큐레이션 · 오픈 · 무료

Builder.io

실제 코드베이스와 디자인 시스템을 위한 AI 제품 개발 플랫폼입니다.

devdesigntool
Builder.io 스크린샷
↓ 디자인 시스템 다운로드 (11 MB)OpenDesign 에서 열기

원본 사이트: https://www.builder.io

📦 팩 내용 보기 →

01

디자인 DNA

협업형프로덕션 준비 완료AI작업 공간코드

디자이너, PM, 개발자가 하나의 코드 기반 환경에서 공존하는 디지털 명령 센터입니다.

02

컬러

#18B6F6Accent
#FFFFFFInk
#757575Ink soft
#000000BG
#17191CMuted
rgba(255,255,255,0.1)Line

주요 작업과 강조를 위한 단일 고채도 시안 악센트가 포함된 고대비 다크 모드입니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

Poppins 스타일의 미학에 맞춰 디스플레이 텍스트에는 기하학적 sans를 사용합니다. · 본문 텍스트에는 가독성을 위해 인문학적 sans를 사용합니다. · 코드 스니펫 및 터미널 명령에는 모노스페이스를 사용합니다. · 큰 디스플레이 텍스트에는 타이트한 트래킹을 유지합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

표준 스케일을 적용한 4px 기본 단위입니다.

05

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

sm · 4px
md · 8px
lg · 20px
pill · 999px

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

0px 1px 4px 0px rgba(0,0,0,0.08) · 0px 0px 30px 0px rgba(0,0,0,0.2)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

고정 최대 너비 컨테이너가 있는 표준 12열 그리드입니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0.01, 0, 0.98)easing

섹션 진입 시 페이드인 및 슬라이드업. · hover 상태의 부드러운 불투명도 전환.

미세한 밝기 증가 또는 테두리 색상 변화. · 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Builder.io — 桌面首屏（hero）
桌面首屏（hero）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Builder.io — 移动首屏
移动首屏

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

11

System Prompt

This is Builder.io, a premium SaaS developer tool. The design is characterized by a high-contrast dark mode (#000000 background, #FFFFFF text) with a single, vibrant cyan accent (#18B6F6). Typography is geometric sans-serif for display and humanist sans-serif for body. The layout is clean and spacious, emphasizing clarity and professionalism. Critical donts: Never use a light theme, never introduce a secondary accent color, and never use decorative or cluttered UI elements. The system is built for technical users who value efficiency and production-readiness.

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

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

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

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