큐레이션 · 오픈 · 무료

Lovable

AI와 대화하여 앱과 웹사이트를 만드세요.

01

디자인 DNA

자연어를 기능적인 소프트웨어로 변환하는 친근하고 다채로운 포털.

02

컬러

따뜻한 중립적 기반에 활기차고 표현력이 넘치는 다채로운 gradient.

03

타이포그래피

geometric-sans · monospace

• display60px · 480
• heading48px · 480
• body16px · 400
• small14px · 400

04

여백

섹션 간 넓은 세로 간격을 활용한 여유로운 여백.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgb(236, 234, 228)

oklch(0.2 0 0 / 0.12) 0px 2px 2px -1px · oklch(0.2 0 0 / 0.12) 0px 4px 4px -2px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px

06

레이아웃

눈에 띄는 히어로 섹션이 있는 중앙 정렬 단일 열 레이아웃.

07

모션과 인터랙션

UI 요소의 부드러운 opacity와 transform 전환. · hover 시 gradient 변화.

미묘한 색상 변화와 opacity 변경. · scale 또는 opacity 조정으로 즉각적인 피드백.

08

컴포넌트

• button 높은 대비와 작은 radius를 가진 알약 모양의 주요 버튼.
• card 미묘한 border와 따뜻한 배경을 가진 부드럽게 둥근 카드.
• input 주요 상호작용 지점 역할을 하는 크고 둥근 입력 컨테이너.
• hero 중앙 정렬된 텍스트와 떠 있는 입력이 있는 전체 너비 gradient 배경.

09

보이스와 금지 목록

• 톤 격려하는, 명확한, 그리고 강화하는.
• 헤드라인 짧고, 강렬하며, 행동 지향적인.
• CTA 도구 사용의 이점에 초점을 맞춘 직접적인.

• 순백 배경을 사용하지 마세요 — 스크린샷은 따뜻하고 약간 off-white인 배경을 보여줍니다.
• 날카로운 직사각형 모서리를 사용하지 마세요 — 스크린샷은 카드와 입력의 둥근 모서리를 보여줍니다.
• 차갑고 단색의 색 구성표를 사용하지 마세요 — 스크린샷은 활기차고 다채로운 gradient를 보여줍니다.
• 밀도 높고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 여유로운 여백과 명확한 계층 구조를 보여줍니다.
• 복잡하고 화려한 타이포그래피를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 sans-serif 스타일을 보여줍니다.
• 강하고 어두운 border를 사용하지 마세요 — 스크린샷은 미묘하고 밝은 border를 보여줍니다.
• 피하기: 전문 용어가 많은 기술적 설명
• 피하기: 밀도 높은 긴 문단
• 피하기: 수동적이거나 지나치게 격식 있는 어조

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko