큐레이션 · 오픈 · 무료

Writer

자동화된 에이전트를 활용하여 브랜드 일관성을 유지하며 실행을 확장하는 엔터프라이즈 AI 플랫폼.

01

디자인 DNA

AI 기반 콘텐츠 및 워크플로우 실행을 위한 엔터프라이즈급 명령 센터.

02

컬러

기본 CTA 및 강조를 위한 단일 고채도 violet 악센트가 있는 고대비 단색 코어.

03

타이포그래피

transitional-serif · geometric-sans · monospaced

• display64px · 400
• body16px · 400

헤드라인은 권위와 우아함을 위해 전환형 세리프를 사용합니다. · 본문 텍스트 및 UI는 높은 가독성을 위해 깔끔한 기하학적 산세리프를 사용합니다. · 레이블과 내비게이션에는 구조감을 더하기 위해 대문자 tracking을 광범위하게 사용합니다.

04

여백

프리미엄 느낌과 깔끔한 인상을 유지하기 위한 넉넉한 수직 여백의 8px baseline grid.

05

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

시각적 노이즈를 추가하지 않고 입력 필드와 카드 테두리를 정의하기 위한 섬세한 1px 테두리.

rgb(243, 243, 243) 0px 2px 4px 0px · rgba(191, 203, 255, 0.25) 0px 1px 8px 0px

06

레이아웃

콘텐츠는 중앙 정렬 단일 열 흐름, 기능 쇼케이스는 이중 열 레이아웃.

07

모션과 인터랙션

인터랙티브 요소에서의 매끄러운 색상 및 배경 전환. · hover 상태에서의 미세한 scale 및 opacity 변화.

텍스트 링크의 색상 전환 및 버튼의 배경 변화. · 기본 액션 버튼에 대한 미세한 scale-down transform.

08

컴포넌트

• button 고대비 채우지가 있는 알약 모양의 기본 버튼과 텍스트 기반 보조 버튼.
• card 미세한 그림자가 있는 깔끔하고 둥근 모서리의 카드, UI 기능을 시연하는 데 자주 사용됩니다.
• chip 분류 및 상태 표시에 사용되는 작은 대문자 뱃지.
• input 미세한 테두리와 명확한 placeholder 텍스트가 있는 둥근 알약 모양의 입력 필드.
• hero 단일 고채도 악센트 단어와 두드러진 데모 요청 양식이 결합된 거대한 세리프 헤드라인.

09

보이스와 금지 목록

• 톤 권위적, 전문적, 직접적.
• 헤드라인 시선을 집중시키기 위해 하나의 단어를 강조하는 크고 영향력 있는 세리프 텍스트.
• CTA 직접적인 가치나 체험을 강조하는 행동 지향적이고 명확한 스타일.

• 다크 모드를 사용하지 마세요 — 디자인은 고대비 백그라운드 패러다임을 엄격히 따릅니다.
• 헤드라인에 지나치게 둥근 산세리프 폰트를 사용하지 마세요 — 스크린샷에서는 전환형 세리프를 명확히 사용합니다.
• 레이블에서 대문자 tracking을 제거하지 마세요 — 내비게이션과 레이블은 `text-transform: uppercase`에 크게 의존합니다.
• 부드러운 파스텔 배경을 사용하지 마세요 — 팔레트는 한 가지 선명한 악센트와 함께 엄격히 단색을 유지합니다.
• 무거운 drop shadow를 사용하지 마세요 — 디자인은 최소한의 깊이를 위해 미세한 box-shadow에 의존합니다.
• 보조 악센트 색상을 혼용하지 마세요 — violet(#5551FF)이 유일하게 사용되는 고채도 색상입니다.
• 피하기: 격식 없는 슬랭
• 피하기: 지나치게 복잡한 전문 용어
• 피하기: 지저분하거나 소란스러운 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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