큐레이션 · 오픈 · 무료

Uizard

GenAI로 제품 아이디어를 즉시 컨셉으로 전환합니다.

01

디자인 DNA

텍스트 프롬프트를 와이어프레임으로 변환하는 UI 디자인 자동 조종 장치.

02

컬러

활기찬 보라색 AI 악센트를 사용하여 창의성과 현대 기술을 나타내는 고대비 다크 모드.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display56px · 500
• h140px · 480
• body-lg18px · 400
• body16px · 400
• caption14px · 400

제목용으로 타이트한 행간(1.1-1.15)을 유지합니다. · 현대적이고 타이트한 느낌을 위해 음수 자간(-1px ~ -0.2px)을 사용합니다. · 모든 디스플레이 타이포그래피에 깔끔하고 기하학적인 형태를 우선시합니다.

04

여백

일관된 4px 그리드 시스템은 모든 UI 컴포넌트에 걸쳐 조화로운 간격을 보장합니다.

05

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

문맥에 따라 1px solid rgb(245,245,245) 또는 rgb(33,33,33)를 사용합니다.

0px 12px 30px -4px rgba(3,3,3,0.12) · 0px 2px 12px 0px rgba(168,129,254,0.64) · 0px -20px 200px 0px rgba(68,20,187,0.75)

06

레이아웃

페이지 중앙에 정렬된 구조화된 그리드 레이아웃으로, 히어로, 기능, 사회적 증명을 위한 명확한 섹션을 갖춥니다.

07

모션과 인터랙션

background-color 및 opacity에 대한 매끄러운 트랜지션. · 상호작용 요소에 대한 은은한 hover 효과. · AI 중심 느낌을 강화하는 역동적인 글로우와 그라디언트.

기본 액션에 대한 미묘한 색상 변화와 약간의 스케일 또는 글로우 효과. · 색상 변화 또는 inset 그림자를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 알약 모양 테두리와 은은한 보라색 글로우가 적용된 고대비 기본 버튼.
• card 부드러운 테두리(1px solid #212121)와 깊은 배경색을 가진 둥근 모서리 카드.
• chip 인터페이스 내 상태나 태그에 사용되는 작고 둥근 레이블.
• input 어두운 배경과 은은한 테두리가 있는 깔끔한 입력 필드로, 종종 액션 버튼과 함께 그룹화됩니다.
• hero 대형 헤드라인, 부제목, 그리고 두드러진 프롬프트 입력을 특징으로 하는 지배적인 중앙 정렬 히어로 섹션.

09

보이스와 금지 목록

• 톤 혁신적이고, 강력하며, 직접적입니다.
• 헤드라인 속도와 AI 역량에 중점을 둔 굵고 혜택 중심적인 문구.
• CTA '생성하기', '가입하기', '탐색하기'와 같은 행동 지향적 동사.

• 흰색 또는 밝은 배경을 사용하지 마세요 — 스크린샷은 깊은 다크 테마(#0D0D0D)를 기반으로 보여줍니다.
• 따뜻하고, 자연스럽거나, 파스텔 색상을 사용하지 마세요 — 팔레트는 블랙, 화이트, 그리고 고채도 보라색이 지배적입니다.
• 세리프 폰트를 사용하지 마세요 — 스크린샷은 오로지 깔끔하고 기하학적이며 휴머니트 계열의 산세리프 타이포그래피를 보여줍니다.
• 모서리 둥글기를 4px보다 작게 사용하지 마세요 — 작은 요소들도 최소 4px를 사용하며, 많은 카드는 12px 또는 16px를 사용합니다.
• 마케팅 자료에 일반적인 플레이스홀더 텍스트를 사용하지 마세요 — 스크린샷은 명확하고 지시적인 프롬프트 예시를 사용합니다.
• 저대비 텍스트를 사용하지 마세요 — 스크린샷은 최대 가독성을 위해 어두운 배경에 고대비 화이트(#F5F5F5)를 보여줍니다.
• 피하기: 설명되지 않는 지나치게 전문적인 용어.
• 피하기: 수동적이거나 주저하는 언어.
• 피하기: 과도한 느낌표 또는 선정적 표현.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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