큐레이션 · 오픈 · 무료

Farcaster

구축. 공유. 성장.

web3social

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

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

📦 팩 내용 보기 →

디자인 DNA

탈중앙화소셜개발자오픈프로토콜

빌더를 위한 탈중앙화 소셜 프로토콜.

컬러

#7959FFAccent

#FFFFFFInk

rgba(255, 255, 255, 0.8)Ink soft

#361AACBG

rgba(255, 255, 255, 0.5)Muted

rgba(255, 255, 255, 0.25)Line

높은 대비를 위해 딥 인디고 배경과 흰색 텍스트를 사용합니다.

타이포그래피

humanist-sans

display28px · 600

여백

4px

8px

16px

24px

32px

48px

64px

96px

표준 4px 베이스 그리드입니다.

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

sm · 4px

md · 8px

lg · 12px

pill · 300px

없음, 배경 대비에 의존합니다.

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

표준 웹 레이아웃, 모바일 우선입니다.

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

부드러운 hover 트랜지션.

스케일 또는 색상 변화. · 약간 축소.

컴포넌트

button 둥근 필 모양, primary 및 secondary 스타일.
card 모바일 앱 프리뷰에 다크 글래스 효과.
chip 보이는 것 없음.
input 보이는 것 없음.
hero 폰트 목업과 CTA가 포함된 분리형 레이아웃.

보이스와 금지 목록

톤 직설적이고 자신감 있는 기술적 어조.
헤드라인 짧고 강렬한 문장.
CTA 명확하고 실행 가능한.

얇은 weight를 사용하지 마세요 — 스크린샷은 bold/medium weight를 보여줍니다.
primary 버튼에 날카로운 모서리를 사용하지 마세요 — 스크린샷은 pill 모양을 보여줍니다.
밝은 배경을 사용하지 마세요 — 스크린샷은 딥 인디고를 보여줍니다.
복잡한 gradient를 사용하지 마세요 — 스크린샷은 단색 또는 매우 미묘한 gradient를 보여줍니다.
장식용 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 sans-serif를 보여줍니다.
레이아웃을 어지럽히지 마세요 — 스크린샷은 명확하고 집중된 히어로 섹션을 보여줍니다.
피하기: 모호한 약속.
피하기: 과장된 마케팅 문구.
피하기: 비전문적인 전문 용어.

팩 안의 실제 스크린샷

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

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

System Prompt

개발자와 크리에이터를 위한 탈중앙화 소셜 프로토콜. 딥 인디고 배경(#361AAC)에 흰색 텍스트와 생동감 있는 보라색 액센트(#7959FF). 깔끔한 humanist sans-serif 타이포그래피(Inter)를 사용하며 강조를 위해 bold weight를 사용합니다. 버튼은 완전히 둥글며(filter 모양). 레이아웃은 깔끔하고 집중적이며 어지러움을 피합니다. 중요한 주의사항: 버튼에 날카로운 모서리를 사용하지 마세요, 밝은 배경을 사용하지 마세요, 얇은 폰트 weight를 사용하지 마세요.

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

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

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

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