Communitygithub.com

Design System Builder (디자인 시스템 빌더)

모든 프로젝트와 플랫폼을 위한 디자인 시스템을 생성, 확장 또는 감사합니다. 디자인 토큰(색상, 타이포그래피, 간격, 반경, 입체감, 모션, 중단점), 토큰 아키텍처(원시 → 의미론적 → 컴포넌트), W3C DTCG 토큰 형식, 테마(라이트/다크, 브랜드, 밀도), 다중 플랫폼 출력(CSS 변수, Tailwind v4 @theme, React Native, Flutter, SwiftUI, Compose), 컴포넌트 API 규칙, 문서(DESIGN.md, Storybook) 및 거버넌스를 다룹니다.

Design System Builder (디자인 시스템 빌더)란 무엇인가요?

이 스킬은 개발자가 새로운 앱을 시작하거나 기존 UI를 통합할 때 시각적 기반을 체계적으로 구축할 수 있도록 돕는 디자인 시스템 빌더입니다. 디자인 토큰이라는 핵심 개념을 통해 색상, 타이포그래피, 간격, 반경, 입체감, 모션 등 모든 시각적 결정을 한 번 정의하고 재사용합니다. W3C DTCG JSON 형식을 기반으로 원시 토큰(primitive), 의미 토큰(semantic), 컴포넌트 토큰(component)의 3계층 아키텍처를 제공하여 라이트/다크 모드, 브랜드, 밀도 등 다양한 테마를 유연하게 전환할 수 있습니다. CSS 변수, Tailwind v4 @theme, React Native, Flutter, SwiftUI, Compose 등 다양한 플랫폼으로 출력을 생성하며, DESIGN.md 템플릿과 컴포넌트 API 규칙, 감사 체크리스트를 포함하여 프로젝트 규모에 맞게 확장 가능합니다. 사용자가 '디자인 시스템', '디자인 토큰', '테마', '스타일 가이드', '일관성 유지' 등을 언급하거나 기존 코드/피그마에서 토큰을 추출해야 할 때 이 스킬을 활용합니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/TomasValleDuran/pomos-skillzzeria/tree/HEAD/plugins/skillzzeria/skills/design-system-builder
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

디자인 시스템 빌더

디자인 시스템은 한 번 내린 결정의 집합으로, 모든 화면이 그 결정을 다시 내리지 않도록 합니다. 토큰은 결정을 담고, 컴포넌트는 이를 적용하며, 문서는 설명합니다. 프로젝트 규모에 맞게 노력을 조절하세요. 주말에 만드는 앱은 40줄짜리 토큰 파일과 DESIGN.md면 충분합니다. 여러 팀이 참여하는 제품은 파이프라인과 거버넌스가 필요합니다. 작게 시작하고, 추출을 통해 확장하세요.

프로세스

0. 기존 내용 파악

확인할 항목: 토큰/테마 파일, tailwind 설정 또는 @theme 블록, components.json, CSS 변수, theme/ 모듈, Figma 링크(연결된 경우 Figma MCP get_variable_defs/search_design_system 사용), DESIGN.md/.interface-design/system.md. 기존 코드베이스에서는 발명하기 전에 추출하세요. 실제 사용 중인 색상, 글꼴 크기, 간격 및 반경을 grep하고, 클러스터링하여 통합된 스케일을 제안합니다. 사용자에게 변경 전 → 변경 후 매핑을 보여주세요.

1. 방향 정의 (한 문단)

누가 사용하는지, 어떤 느낌이어야 하는지(구체적인 단어로: "트레이딩 터미널처럼 빽빽한", "독서 앱처럼 차분한"), 플랫폼, 브랜드 제약 조건, 밀도, 라이트/다크. 이는 아래 모든 스케일 선택을 결정합니다. 만약 interface-design 또는 frontend-design 스킬이 활성화되어 있다면, 해당 스킬이 이 미적 단계를 담당합니다. 이 스킬은 그 방향을 시스템으로 전환합니다.

2. 기반 (토큰)

다음 순서대로 구축합니다. 각 단계는 이전 단계에 의존합니다.

  1. 색상 → color-theory 스킬의 도구 실행: python3 <skills-dir>/color-theory/scripts/palette.py system <brand-hex> --format tailwind|css|json (color-theory는 이 스킬 디렉토리의 형제입니다). 원시 램프(ramp) + 검증된 라이트/다크 의미론적 역할을 생성합니다.
  2. 타이포그래피 → 글꼴 모음(≤2개 + 모노), 명명된 역할이 있는 글꼴 크기 스케일, 줄 높이, 두께, 자간. references/scales.md 참조.
  3. 간격 → 4px 기본 그리드; 티셔츠 또는 숫자 스케일; 레이아웃 간격은 컴포넌트 패딩과 별도로 관리.
  4. 모양 → 반경 스케일(중첩 규칙: 내부 반경 = 외부 반경 − 패딩), 테두리 두께.
  5. 입체감 → 그림자 스케일(라이트) 및 표면 밝기 단계(다크), z-index 레이어.
  6. 모션 → 토큰화된 지속 시간 + 이징 곡선(그리고 축소 모션 동작).
  7. 레이아웃 → 중단점, 컨테이너 너비, 그리드 열, 안전 영역(모바일).
  8. 크기 조정 → 컨트롤 높이(sm/md/lg), 아이콘 크기, 최소 터치 대상.

3. 토큰 아키텍처

세 가지 계층 — 컴포넌트는 반드시 의미론적(또는 컴포넌트) 계층만 사용해야 합니다.

원시(primitive)   --blue-600, --space-4, --radius-2          원시 값, 무엇인지에 따라 명명
의미론적(semantic)    --color-accent, --space-inset-md, --radius-control   역할에 따라 명명, 원시 값을 별칭, 테마별 전환
컴포넌트(component)   --button-bg, --card-padding                 선택 사항; 실제 테마 요구 사항이 있는 컴포넌트에만 사용

테마 전환(다크 모드, 브랜드, 밀도, 고대비) = 의미론적 토큰 재지정. 컴포넌트는 절대 변경되지 않습니다. 전체 명명 규칙, DTCG 형식, 모드: references/token-architecture.md.

4. 플랫폼에 배포

  • 단일 웹 앱: 수동 CSS 변수 + Tailwind v4 @theme으로 충분합니다.
  • 웹 + 모바일 또는 여러 앱: 토큰을 DTCG JSON(단일 소스)으로 작성하고 Style Dictionary v5 또는 Terrazzo를 사용하여 CSS, Tailwind, TS, Swift, Kotlin/Compose, Flutter, RN으로 빌드합니다. 플랫폼별 레시피 및 출력 예시: references/platform-outputs.md. 시작용 DTCG 파일: assets/tokens.example.json.

5. 컴포넌트

접근 가능한 기본 요소 위에 구축합니다(ui-stack-advisor 참조). 일관된 API: variant(시각적 의도), size, 필요한 경우에만 tone/color, 데이터 속성을 통한 상태, 구성보다는 합성. 모든 컴포넌트는 모든 상태를 문서화합니다: 기본, 호버, 활성, 포커스-가시, 비활성화, 로딩, 오류, 빈 상태, 선택됨, 읽기 전용. 규칙 및 체크리스트: references/components.md.

6. 문서화 및 거버넌스

assets/DESIGN.template.md에서 프로젝트 루트에 DESIGN.md를 작성합니다 — 방향, 토큰 테이블, 컴포넌트 인벤토리, 해야 할 일/하지 말아야 할 일, 결정에 대한 이유. 이 파일은 향후 세션이 일관성을 유지하기 위해 읽는 파일입니다. 짧고 최신 상태로 유지하세요. 더 큰 시스템은 Storybook(또는 Ladle/Histoire), 시각적 회귀 테스트, semver를 사용한 변경 로그, 기여 프로세스를 추가합니다(references/components.md#governance).

기본값 (사용자가 선호도를 밝히지 않았을 때)

기반기본값
기본 단위4px; 간격 스케일 0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 px
글꼴 크기 스케일12, 14, 16(본문), 18, 20, 24, 30, 36, 48, 60 px (≈1.2–1.25 비율); 제품 UI는 14px 본문 사용 가능
줄 높이본문 1.5, 제목 1.2–1.3, 디스플레이 1.1; 큰 크기에서 자간 좁힘 (−0.01 ~ −0.03em)
반경0, 4, 6, 8, 12, 16, 24, 전체 — 성격 선택: 날카로운(2–4), 부드러운(8–12), 둥근(16+) 그리고 일관되게 적용
컨트롤높이 32 / 36–40 / 44–48 px; 터치 대상 ≥ 44pt(iOS) / 48dp(Android) / WCAG 2.2 최소 24px (44px 권장)
모션100 / 150 / 200 / 300 / 500 ms; 진입 시 cubic-bezier(0.23,1,0.32,1) ease-out, 이동 시 ease-in-out, 모바일에서 스프링
중단점640, 768, 1024, 1280, 1536 (Tailwind); 컴포넌트에는 컨테이너 쿼리 선호
입체감4–5 그림자 레벨; 다크 모드에서는 더 밝은 표면 + 미세한 테두리 사용
Z-index기본 0, 드롭다운 1000, 고정 1100, 오버레이 1300, 모달 1400, 팝오버 1500, 토스트 1600, 툴팁 1700

기본값은 최소 기준일 뿐, 스타일이 아닙니다. 차별성은 변하는 선택에서 나옵니다: 서체, 강조 색상, 중립 색온도, 반경 성격, 밀도, 모션 특성.

품질 기준 (완료하기 전에 확인)

  • 컴포넌트에 원시 값 없음(hex, px 글꼴 크기, 임의 간격) — grep으로 확인
  • 의미론적 이름은 역할을 설명하고, 값이나 색조를 설명하지 않음
  • 라이트 + 다크 모두 설계 및 대비 검증 완료(WCAG 2.2 AA)
  • 모든 대화형 컴포넌트에 포커스 가시, 비활성화, 로딩, 오류 상태 표시
  • 글꼴 크기 스케일에 명명된 역할(display, h1–h3, body, label, caption, code)이 있고, 단순한 크기만 있지 않음
  • 간격 일관성: 동일한 관계 → 동일한 토큰
  • 모션 토큰에 대한 축소 모션 변형
  • DESIGN.md 작성 및 정확함
  • 모바일: Dynamic Type / 글꼴 크기 조정 존중, 안전 영역 토큰화, 터치 대상 ≥ 44/48

참고 자료

  • references/token-architecture.md — 계층, 명명 문법, DTCG 2025.10 형식, 모드/테마, 별칭 규칙
  • references/scales.md — 타이포그래피(스케일, 유동형(type), 페어링), 간격, 반경, 입체감, 모션, 밀도, 중단점
  • references/platform-outputs.md — CSS, Tailwind v4, shadcn 테마, React Native (NativeWind/Unistyles/Tamagui), Flutter, SwiftUI, Compose, Style Dictionary/Terrazzo 파이프라인
  • references/components.md — 컴포넌트 API 규칙, 해부학, 상태 매트릭스, 합성, 문서, 테스트, 거버넌스
  • assets/tokens.example.json — 시작용 DTCG 토큰 파일
  • assets/DESIGN.template.md — DESIGN.md 템플릿

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

TomasValleDuran/color-theory

Color theory and palette engineering for UI on any platform (web, iOS, Android, Flutter, React Native). Choose and derive brand palettes, build tonal ramps, tinted neutrals and status colors, map them to light/dark semantic tokens, and verify contrast (WCAG 2.2 + APCA) and color-blind safety with a bundled zero-dependency OKLCH tool. Use this whenever the user picks, generates, critiques or fixes colors — "what colors should I use", brand color, palette, color scheme, theme, dark mode colors, accent, gradient, "this looks dull/garish", contrast problems, color-blind friendliness, or turning one hex into a full system — even if they don't say "color theory".

TomasValleDuran/ui-stack-advisor

Curated, up-to-date knowledge of UI component libraries, animation libraries and building blocks (icons, charts, tables, forms, toasts, drag-and-drop, virtualization, rich text) for web (React, Next.js, Vue, Svelte, Solid, Angular) and mobile (React Native/Expo, Flutter, SwiftUI, Jetpack Compose), with a decision process for picking one. Use this whenever a project is being started or scaffolded, when the user asks "which UI library / component library / design kit should I use", compares libraries (shadcn vs MUI vs Mantine, Tamagui vs NativeWind, etc.), needs a specific widget (date picker, data table, command palette, carousel, bottom sheet, chart), wants "cool animated components", or when you are about to hand-roll a component that a mature library already solves well.

TomasValleDuran/ui-ux-playbook

The entry point for any UI/UX work on web or mobile — the end-to-end workflow (brief → direction → system → stack → build → motion → verify), industry standards and best practices (WCAG 2.2, Apple HIG, Material 3, Nielsen heuristics, Laws of UX, Core Web Vitals, forms, navigation, states, i18n), a pre-ship UI checklist, and a routing map telling you which specialized design/animation/color/library skill to load for each sub-task. Use this whenever you start or plan a frontend or mobile app, build or redesign screens, review UI/UX quality, answer "what's the best practice for X" in interface design, or when several design skills could apply and you need to decide which.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community