큐레이션 · 오픈 · 무료
Create
단어를 기능적인 앱, 사이트, 도구로 변환하는 AI 네이티브 플랫폼입니다.
ai dev
01
디자인 DNA
AI 네이티브 앱 빌더 창의적 간편한
누구나 AI로 디지털 제품을 만들 수 있는 장난기 있으면서도 전문적인 작업실입니다.
02
컬러
#000000Ink
#18191BInk soft
#F9F9F9BG
#FFFFFFBG soft
#F2F2F2BG quiet
#6A6A6CMuted
rgba(187, 187, 187, 1)Line
사진 히어로와 검정 대비로 주요 작업을 강조하는 깔끔하고 밝은 중성색입니다.
03
타이포그래피
transitional-serif · humanist-sans · monospace
display 42px · 400heading 24px · 400body 16px · 400body-large 18px · 400
04
여백
4px
8px
12px
16px
20px
24px
30px
40px
일관된 4px 기본 간격과 섹션의 여유로운 padding입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 8px
md · 12px
lg · 20px
pill · 9999px
1px solid #BBBBBB
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
중앙 정렬 단일 열 히어로 뒤에 카드 기반 섹션을 배치합니다.
07
모션과 인터랙션
150ms micro
300ms small
700ms medium
cubic-bezier(0.23, 1, 0.32, 1) easing
hover/클릭 시 부드러운 전환 · opacity 변경 시 페이드인
0.15초 동안 색상과 배경 전환. · 전환을 통한 즉각적인 시각적 피드백.
08
컴포넌트
button 높은 대비의 알약 모양 주요 버튼과 더 작은 보조 버튼입니다. card 독특한 이미지와 설명이 아래에 있는 크고 둥근 카드입니다. chip 뚜렷하게 보이지 않으며, 단순한 둥근 요소일 가능성이 높습니다. input 히어로에 사용자 프롬프트를 위한 크고 둥근 흰색 입력 필드입니다. hero 중앙 정렬 텍스트와 입력이 있는 전체 폭 사진 배경입니다.
09
보이스와 금지 목록
톤 친근하고, 강력하며, 약간 장난기 있는 느낌. 헤드라인 세리프와 산세리프 폰트를 혼합하여 사용하는 간결하고 직접적인 문장. CTA 명확하고 행동 지향적인 문구('시작하기'). 순백 배경을 사용하지 마세요 — 스크린샷은 밝은 회색(#F9F9F9) 배경을 보여줍니다. 순전히 산세리프 로고를 사용하지 마세요 — 스크린샷은 브랜드 이름 'Any'에 세리프 폰트를 사용합니다. 밝고 채도 높은 강조색을 주요 배경으로 사용하지 마세요 — 스크린샷은 전체 폭 사진을 사용합니다. 주요 요소에 날카롭고 사각의 모서리를 사용하지 마세요 — 스크린샷은 카드와 입력에 20px border-radius를 보여줍니다. 무겁고 어두운 그림자를 사용하지 마세요 — 스크린샷은 매우 미묘하고 낮은 opacity의 그림자를 보여줍니다. 타이포그래피를 단색으로 균일하게 만들지 마세요 — 스크린샷은 세리프 디스플레이와 산세리프 본문 간의 대비를 보여줍니다. 피하기: 설명 없는 전문 용어 피하기: 지나치게 복잡한 레이아웃 피하기: 지루하고 기업적인 언어
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
단어로 앱을 만드는 친근한 AI 네이티브 SaaS 플랫폼입니다. 밝은 회색(#F9F9F9) 또는 흰색(#FFFFFF) 배경, 주요 텍스트와 CTA를 위한 검정(#000000), 보조 텍스트를 위한 미묘한 회색(#6A6A6C, #ACADAE)을 사용합니다. 타이포그래피는 전환형 세리프(디스플레이용)와 휴머니스트 산세리프(본문용)를 혼합합니다. 레이아웃은 중앙 정렬, 깔끔하고 넓습니다. 중요 하지 마세요: 날카로운 모서리를 사용하지 마세요(최소 8px radius). 무거운 그림자를 사용하지 마세요. 복잡한 그리드로 인터페이스를 복잡하게 만들지 마세요.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 디자인은 장난기 있는 창의적인 AI 도구 정체성과 깔끔하고 전문적인 SaaS 미학을 효과적으로 균형 있게 맞추고 있습니다.