큐레이션 · 오픈 · 무료

Create

단어를 기능적인 앱, 사이트, 도구로 변환하는 AI 네이티브 플랫폼입니다.

aidev

Create 스크린샷

↓ 디자인 시스템 다운로드 (34 MB)OpenDesign 에서 열기

원본 사이트: https://www.create.xyz

📦 팩 내용 보기 →

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

display42px · 400
heading24px · 400
body16px · 400
body-large18px · 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

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

중앙 정렬 단일 열 히어로 뒤에 카드 기반 섹션을 배치합니다.

07

모션과 인터랙션

150msmicro

300mssmall

700msmedium

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

팩 안의 실제 스크린샷

Create — 桌面首屏（hero） — 桌面首屏（hero）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 移动首屏 — 移动首屏

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

11

System Prompt

단어로 앱을 만드는 친근한 AI 네이티브 SaaS 플랫폼입니다. 밝은 회색(#F9F9F9) 또는 흰색(#FFFFFF) 배경, 주요 텍스트와 CTA를 위한 검정(#000000), 보조 텍스트를 위한 미묘한 회색(#6A6A6C, #ACADAE)을 사용합니다. 타이포그래피는 전환형 세리프(디스플레이용)와 휴머니스트 산세리프(본문용)를 혼합합니다. 레이아웃은 중앙 정렬, 깔끔하고 넓습니다. 중요 하지 마세요: 날카로운 모서리를 사용하지 마세요(최소 8px radius). 무거운 그림자를 사용하지 마세요. 복잡한 그리드로 인터페이스를 복잡하게 만들지 마세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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