큐레이션 · 오픈 · 무료

Character.AI

저 마찰 회원가입 흐름을 갖춘 캐릭터 기반 대화에 초점을 맞춘 미니멀하고 친근한 AI 플랫폼입니다.

01

디자인 DNA

간단함과 온보딩의 편의성을 강조하는 깔끔하고 현대적인 채팅 애플리케이션 인터페이스입니다.

02

컬러

주요 액션을 위한 높은 대비의 다크 요소를 포함한 중립적이고 차분한 팔레트입니다.

03

타이포그래피

geometric-sans · humanist-sans

• display36px · 700
• body16px · 400

제목에는 임팩트를 위해 타이트한 음의 자간을 사용합니다. · 본문 텍스트는 가독성을 위해 표준 행간을 유지합니다. · 글꼴 두께는 엄격히 400, 500, 600, 700으로 제한합니다.

04

여백

표준 4px 그리드 시스템을 사용하여 패딩 및 간격에 일관된 간격을 둡니다.

05

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

1px solid #d4d4da

rgba(0, 0, 0, 0.1) 0px 4px 6px -1px · rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

06

레이아웃

회원가입 양식의 배경으로 대규모 히어로 이미지를 사용하는 중앙 정렬 카드 레이아웃입니다.

07

모션과 인터랙션

모든 인터랙티브 요소에 은은한 250ms 전환 효과. · 원활한 배경 이미지 스케일링 또는 페이딩. · 버튼과 링크의 깔끔한 hover 상태.

주요 버튼의 은은한 배경색 변경 또는 투명도 변화. · 약간의 스케일링이나 색상 변화로 즉각적인 피드백 제공.

08

컴포넌트

• button 높은 대비(흑백)와 중앙 정렬 텍스트를 가진 크고 둥근 버튼입니다.
• card 메인 회원가입 양식에 사용되는 은은한 그림자가 있는 부유하는 흰색 카드입니다.
• chip 푸터 내비게이션에 사용되는 hover 시 밑줄이 나타나는 간단한 텍스트 링크입니다.
• input 둥근 모서리와 은은한 테두리를 가진 깔끔한 입력 필드입니다.
• hero 대규모 애니메이션/일러스트 배경과 전환을 위한 부유하는 흰색 카드를 사용하는 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 초대적, 간결하며, 격려하는 어조.
• 헤드라인 규모와 속도에 중점을 둔 직접적이고 혜택 지향적 스타일.
• CTA 명확하고 행동 지향적인 버튼(예: '채팅에 가입하기', 'Google로 계속하기').

• 복잡한 다중 열 그리드를 사용하지 마세요 — 스크린샷은 단순하고 집중된 단일 열 또는 분할 레이아웃을 보여줍니다.
• 다양한 색상을 사용하지 마세요 — 스크린샷은 흑백을 주요 대비로 사용하는 중립적 팔레트를 보여줍니다.
• 화려하거나 장식적인 글꼴을 사용하지 마세요 — 스크린샷은 깔끔하고 현대적인 sans-serif 타이포그래피를 보여줍니다.
• 메인 인터페이스에 무겁고 어두운 배경을 사용하지 마세요 — 스크린샷은 밝고 가벼운 미학을 보여줍니다.
• 작고 비좁은 버튼을 사용하지 마세요 — 스크린샷은 충분한 패딩을 가진 크고 터치 친화적인 버튼을 보여줍니다.
• 공격적이거나 높은 채도의 악센트 색상을 사용하지 마세요 — 스크린샷은 차분하고 단색 UI를 보여줍니다.
• 피하기: 기술 용어
• 피하기: 공식적이거나 지나치게 기업적인 언어
• 피하기: 장황한 설명

10

팩 안의 실제 스크린샷

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

11

System Prompt

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