큐레이션 · 오픈 · 무료

Windsurf

로컬 및 클라우드 에이전트 플릿을 하나의 환경에서 관리합니다.

aidev

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

원본 사이트: https://windsurf.com

📦 팩 내용 보기 →

디자인 DNA

에이전트데스크톱워크플로우개발자IDE

AI 코딩 에이전트 플릿을 관리하기 위한 명령 센터입니다.

컬러

#317CFFAccent

#191919Ink

rgba(0,0,0,0.4)Ink soft

#FFFFFFBG

#F8F8F8BG soft

#A5A5A5Muted

rgba(0,0,0,0.1)Line

깨끗한 흰색 캔버스에 고대비 잉크와 주요 작업을 위한 단일 강렬한 블루 악센트를 사용합니다.

타이포그래피

geometric-sans · humanist-sans · monospace

display56px · 500
heading40px · 500
body-lg20px · 400
body16px · 400
caption13px · 400

현대적인 기술적 정밀함을 전달하기 위해 디스플레이 및 제목에는 기하학적 sans를 사용합니다. · 본문 텍스트에는 높은 가독성을 유지하기 위해 인간주의적 sans를 사용합니다. · 모든 기술 용어, 코드 스니펫 또는 UI 상태 표시기에는 모노스페이스를 사용합니다. · 강력한 시각적 블록을 만들기 위해 큰 디스플레이 텍스트에는 타이트한 트래킹(-1.5px)을 유지합니다.

여백

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

4px 그리드를 기반으로 한 일관된 수직 리듬과, 히어로 섹션에 넉넉한 여백을 둡니다.

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

sm · 4px

md · 8px

lg · 10px

pill · 999px

1px solid rgba(0,0,0,0.1)

rgba(0,0,0,0.05) 0px 1px 2px 0px · rgba(0,0,0,0.1) 0px 2px 6px -2px · rgba(0,0,0,0.1) 0px 10px 15px -3px

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

전폭 히어로 섹션 뒤에 포함된 콘텐츠 블록이 옵니다.

모션과 인터랙션

150msmicro

250mssmall

400msmedium

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

hover 상태에서의 섬세한 불투명도 및 배경색 전환. · 메뉴나 드로어를 열고 닫을 때의 부드러운 전환.

버튼 및 인터랙티브 요소에 대한 섬세한 배경색 또는 불투명도 변경. · 약간의 스케일 또는 불투명도 감소를 통한 즉각적인 시각적 피드백.

컴포넌트

button 솔리드 프라이머리(블루 배경, 흰색 텍스트), 세컨더리(흰색 배경, 검정 텍스트, 섬세한 테두리), 고스트(텍스트 전용)입니다. 모두 약간의 border-radius를 가집니다.
card 구조화된 데이터나 사용 후기를 포함하는, 섬세한 1px 테두리 또는 부드러운 그림자가 있는 흰색 배경입니다.
chip 태그와 필터에 사용되는, 섬세한 회색 배경(rgba(0,0,0,0.06))과 1px 테두리입니다.
input 흰색 배경, 1px 테두리, 둥근 모서리, 그리고 명확한 플레이스홀더 텍스트를 가집니다.
hero 두드러진 CTA 버튼이 있는 깨끗한 흰색 배경 위의 큰 타이포그래피입니다.

보이스와 금지 목록

톤 효율성과 통제에 초점을 맞춘 전문적이고 기술적이며 직접적인 어조입니다.
헤드라인 크고 굵으며 간결하며, 기술 용어에는 종종 모노스페이스를 사용합니다.
CTA 'MacOS용 다운로드' 또는 'Devin 체험'과 같이 행동 지향적이고 명확합니다.

여러 경쟁 밝은 색상을 사용하지 마세요 — 스크린샷은 흰색, 검정, 단일 블루 악센트로 구성된 절제된 팔레트를 보여줍니다.
디스플레이에 장식용 세리프 글꼴을 사용하지 마세요 — 스크린샷은 모든 헤드라인에 깨끗한 기하학적 sans를 보여줍니다.
무거운 상자 그림자나 3D 효과를 사용하지 마세요 — 스크린샷은 거의 인식할 수 없을 정도로 섬세하고 부드러운 그림자를 보여줍니다.
빽빽하고 비좁은 레이아웃을 사용하지 마세요 — 스크린샷은 모든 주요 콘텐츠 블록 주변에 넉넉한 여백을 보여줍니다.
메타데이터에 작고 읽기 힘든 텍스트를 사용하지 마세요 — 스크린샷은 명확한 행 높이를 가진 13-16px 텍스트를 보여줍니다.
모든 것에 둥근 알약 모양 컨테이너를 사용하지 마세요 — 스크린샷은 주로 섬세한 4-10px border-radius를 보여줍니다.
피하기: 모호한 마케팅 용어
피하기: 지나치게 장난스럽거나 캐주얼한 언어
피하기: 복잡한 문장

팩 안의 실제 스크린샷

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

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

System Prompt

이 디자인은 Devin Desktop이라는 개발자 도구를 위한 깨끗하고 전문적인 SaaS 제품 페이지입니다. 최소주의적 흰색 캔버스를 사용하며, 주요 작업을 위해 단일 강렬한 블루(#317CFF) 악센트를 사용합니다. 타이포그래피는 기하학적 및 인간주의적 sans-serif 글꼴로 구성되어 있으며, 강력한 시각적 임팩트를 위해 크고 타이트한 트래킹의 헤드라인을 사용합니다. 주요 디자인 요소로는 넉넉한 여백, 섬세한 1px 테두리, 그리고 매우 부드러운 그림자가 포함됩니다. 중요한 디자인 제약 조건은 다음과 같습니다: 여러 악센트 색상 사용을 피하고, 절대로 장식용 세리프를 사용하지 않으며, 최대 가독성을 위해 잉크와 배경 사이에 높은 대비를 유지합니다. 어조는 기술적이고 효율적이며, 엔지니어링 팀을 대상으로 합니다.

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

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

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

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