Design System Architect
두 가지 모드. 요청에서 선택하세요. 두 모드가 모두 적용되는 경우, 먼저 Review를 실행하고 그 결과를 Create에 입력하세요.
- Create: 제품, 비즈니스 또는 회사를 위한 완전하고 문서화된 디자인 시스템을 기존 소스(브랜드 파일, Figma, 데크, 코드베이스, 웹사이트, 또는 설명만 있는 경우)를 기반으로 구축합니다.
- Review: 기존 코드베이스 또는 URL을 감사하여 실제 사용 중인 디자인 시스템을 추출하고, 점수를 매긴 후 더 나은 시스템을 제시합니다.
모든 시스템의 참조 형태는 살아있는 브랜드 북 + 토큰 + 미리보기 + 컴포넌트 + UI 키트(실제 핀테크 시스템을 모델로 함: 작은 브랜드 팔레트, 50-950 램프가 있는 하나의 액센트 블루, 웹 폴백이 있는 하나의 브랜드 서체, 4pt 간격, 필 CTA, 쿨 톤의 레이어드 섀도우, 로고 마크로 만든 워터마크 패턴)입니다.
0. 인테이크 (짧게 유지)
질문하기 전에 먼저 소스를 찾으세요: 첨부 파일, 연결된 폴더, Figma 링크/커넥터, 저장소, 메시지의 URL, 기존 디자인 시스템 아티팩트. 다음을 막는 경우에만 질문하세요(AskUserQuestion 하나, 최대 3개 질문):
- 제품/회사 이름, 카테고리, 대상
- 브랜드 성격(소스가 없는 경우 형용사 3개)
- 플랫폼(웹 앱, 마케팅 사이트, 모바일, 인쇄/데크)
- 라이트만, 또는 라이트 + 다크
사용자가 비연결 상태인 경우, 합리적인 기본값을 가정하고 전달물 상단에 명시하세요.
1. 소스 목록 작성 (Create 및 Review)
디자인하기 전에 모든 것을 열거하세요. 체크리스트로 추적하고 최종적으로 남은 것을 보고하세요.
| 소스 | 추출 방법 |
|---|---|
| Figma | 변수/스타일(색상, 서체, 효과), 컴포넌트 세트 및 해당 변형, 아이콘 세트 이름, 커버/브랜드 페이지 |
| 코드베이스 | tailwind.config.*, CSS 사용자 정의 속성(:root), SCSS/LESS 변수, 테마 파일(MUI/Chakra/styled-components), tokens.json, 컴포넌트 폴더, 아이콘 가져오기, 글꼴 로딩(@font-face, next/font, Google Fonts 링크) |
| URL | 브라우저 도구에서 페이지 로드; body, 제목, 버튼, 링크, 입력, 카드의 계산된 스타일 읽기; 모든 고유 색상, font-family, font-size, 반경, 그림자 수집; 데스크탑 + 모바일 스크린샷; 로고/파비콘 파일 기록 |
| 브랜드 자산 | 로고, 아이콘 마크, 패턴, 목업: 파일을 복사하고, 마크를 다시 그리거나 근사하지 마세요 |
| 없음 | 작은 스타터 시스템 구축(섹션 3 최소값 참조)하고 그렇게 명시 |
규칙: 항상 정확한 값; 코드가 스크린샷보다 우선; 값을 절대로 만들어서 출처가 있는 것처럼 전달하지 마세요. 모든 값을 sourced(출처 있음), derived(파생됨, 예: 출처가 있는 16진수에서 생성된 램프) 또는 proposed(제안됨)로 표시하세요.
2. 브랜드 기초 (브랜드 북의 시작)
README.md에 다음 섹션을 순서대로 작성하세요:
- 소스: 소스, 제공 내용, 상태 테이블.
- 브랜드 한눈에 보기: 이름 및 정확한 철자/대소문자 규칙, 카테고리, 대상, 핵심 가치, 하위 브랜드, 한 줄로 표현된 음성.
- 콘텐츠 기초: 톤, 인칭(we/you), 대소문자 레지스터(제목 vs 본문 vs 마이크로 레이블), 강조 장치, CTA 패턴, 이모지 정책, 재사용할 실제 사본 예시.
- 시각적 기초: 색상, 서체, 간격/그리드, 배경, 시그니처 질감 또는 패턴, 반경, 버튼, 카드, 테두리, 그림자, 투명도/블러, 모션, 호버/누름 상태, 레이아웃 규칙. 각 규칙은 사용하는 토큰의 이름을 지정합니다.
- 아이콘그래피: 로고/마크 사용법, 클리어 스페이스, 허용 색상, UI 아이콘 패밀리(획, 크기, 스타일), 금지 사항.
- 대체 및 플래그: 웹폰트로 제공할 수 없는 라이선스 글꼴 및 해당 대체 글꼴, 근사치, 미해결 질문.
- 색인: 모든 파일 및 설명.
작성자가 있는 경우 작성자의 단어를 유지하세요. 직접 작성한 내용은 제안으로 표시하세요.
3. 기초 (토큰)
색상
- 브랜드 팔레트: 작게 유지(2-5개 브랜드 색상). 하나의 기본 액센트, 액션, 신뢰 및 상호작용에만 사용되며, 배경처럼 사용하지 마세요.
- 램프: 기본(및 보조) 색상에 대해 50-950 생성하여 출처가 있는 16진수가 자연스러운 단계(보통 500 또는 600)에 위치하도록 합니다. OKLCH를 사용하여 지각 단계를 균일하게 유지하세요.
- 뉴트럴: 거의 검은색 잉크에서 헤어라인 그레이까지 8-11단계; 브랜드 색조로 약간 색조를 띄게 합니다(쿨 브랜드 → 쿨 그레이).
- 의미적 역할(컴포넌트가 사용하는 것):
fg-1/2/3,fg-on-accent,bg-1/2/3,border,border-strong,accent,accent-hover,accent-soft,focus-ring,success,warning,danger,info(각각 부드러운 배경 변형 있음). - 테마: 라이트 우선; 다크는 의미적 역할의 재매핑이지, 반전된 램프가 아닙니다. 다크 표면을 더 밝은 그레이로 올리고 그림자는 사용하지 마세요.
- 대비: 모든 테마에서 본문 텍스트 ≥ 4.5:1; 큰 텍스트(24px+), 아이콘, 컨트롤 테두리 및 포커스 링 ≥ 3:1. 프로그래밍 방식으로 확인(WCAG 상대 휘도). 구별해야 하는 상태는 명도만 다르고 색조만 다르지 않아야 합니다. 쌍을 이루는 의미에는 빨강/녹색보다 파랑/주황을 선호하세요.
서체
- 하나의 브랜드 패밀리(최대 두 개: 디스플레이 + 텍스트). 라이선스 글꼴은 문서화된 대체 스택과 Google Fonts 대체 글꼴이 있어야 합니다.
- 스케일: display, h1, h2, h3, title, body-lg, body, sm, caption, label. 비율 약 1.2-1.333; display는 비율을 깨도 됩니다.
- 줄 높이: display는 타이트(1.0-1.1), 제목 1.2-1.3, 본문 1.45-1.6. 자간: 큰 크기에서는 음수(-0.01 ~ -0.02em), 모두 대문자 레이블에서는 양수(+0.06 ~ +0.1em).
- 사용 중인 두께: 이름 지정(예: 300/400/500/700) 및 각각의 위치 설명.
간격, 반경, 고도, 모션
- 간격: 4pt 기준; 단계 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.
- 반경: sm 6-8, md 10-12, lg 16, xl 24, pill 999. 어떤 컴포넌트가 어떤 것을 사용하는지 명시하세요.
- 그림자: 3-4개의 레이어드, 낮은 확산 그림자, 브랜드의 어두운 색조로 색조를 입힘(절대 순수 검정 드롭 아님), 주요 CTA용 선택적 액센트 글로우.
- 모션: 지속 시간(120/180/240ms), 이징(진입 ease-out, 종료 ease-in), 호버 상승 2-4px, 누름 축척 0.98.
prefers-reduced-motion을 존중하세요. - 중단점 및 레이아웃 그리드: 예: 640/768/1024/1280; 콘텐츠 최대 너비; 앱 셸(사이드바 + 상단 바 + 캔버스).
토큰 파일 형식
하나의 단일 정보 원천에서 토큰을 두 번 작성하세요:
tokens.css::root { --name: value }및[data-theme="dark"]와@media (prefers-color-scheme: dark)재매핑.tokens.json: 모든 패밀리를 목록으로:{"tokens":[{"name","value","usage"}]}; 색상은themes및 테마별 값{"light":"#..","dark":"#.."}을 전달합니다. 서체는fonts,families,groups[].styles[]를 사용합니다. 이름[A-Za-z0-9][A-Za-z0-9_.-]*, 고유해야 합니다. 색상 값은 16진수/rgb/hsl/oklch 또는{alias}; 명명된 색상,var()또는color-mix()는 사용하지 마세요. 모든 토큰에는 사용법 메모가 있습니다.- 사용자의 스택이 필요한 경우에만 Tailwind config / DTCG 내보내기를 제공하세요.
스타터 시스템 최소값(소스 없음): 하나의 테마에 6-10개 색상, 5-7개 텍스트 스타일, 4개 이상의 간격 단계, 3개 반경, 한 문단 README; 시작점이라고 명시하세요.
4. 컴포넌트
제품에 필요한 패밀리를 구축하세요. 일반적인 SaaS/핀테크 제품의 경우:
- 액션: Button(기본 솔리드, 보조 아웃라인, 고스트, 파괴적; sm/md/lg; 로딩, 비활성화, 아이콘 전용), Link, IconButton
- 입력: TextField, Select, Checkbox, Radio, Switch, DatePicker, SearchField, 레이블, 힌트, 오류, 포커스 링 포함
- 디스플레이: Card, Badge/Chip, Tag, Avatar, Stat/KPI 타일, Table, EmptyState, Skeleton
- 네비게이션: Sidebar, TopBar, Tabs, Breadcrumbs, Pagination
- 피드백: Alert/Banner, Toast, Modal/Dialog, Tooltip, Progress
- 도메인: 제품이 무엇에 관한 것인지(예: 세금: 신고 상태 추적기, 공제 행, 마감일 카드; AI: 어시스턴트 패널, 제안 칩)
각 컴포넌트에 대해 짧은 가이드라인을 작성하세요: 첫 번째 문장 = 요약; 해부학; 변형 및 각각을 사용해야 하는 경우; 사용하는 토큰; 상태; 접근성(역할, 키보드, 포커스, 레이블); do/don't. 라이브 미리보기(토큰을 사용하는 작은 HTML 문서)를 구축하세요. 번들이 구축된 경우, window.<Namespace>를 할당하는 단일 클래식 스크립트이며 index.d.ts에 문서화된 타입 프롭스가 있습니다.
5. 미리보기 및 UI 키트
- 기초별 스펙맨 카드 하나: 브랜드 색상, 램프, 뉴트럴, 의미적 색상, 서체 패밀리, 디스플레이 스케일, 본문 스케일, 간격, 반경, 고도, 로고, 아이콘 마크, 패턴, 브랜드 사용 예.
- 시스템으로 실제 표면을 재현하는 UI 키트: 마케팅 사이트(네비게이션, 히어로, 기능, CTA, 푸터) 및/또는 제품 앱(셸, 대시보드, 목록/테이블, 상세, 설정, 어시스턴트). 브랜드 음성으로 실제 도메인 사본을 사용하세요(로렘 입숨 사용 금지).
- 시스템용 커버 페이지: 이름, 마크, 한 줄 약속, 팔레트 스트립.
6. 전달
- Artifact 도구가 Design System 유형을 나열하는 경우, 해당 유형으로 시스템을 생성하고(
type_url,title) 반환된 SKILL.md를 따라 파일 경로와 색인을 확인하세요. 이것이 선호되는 홈입니다. 기존 시스템을 수정하려면 먼저 읽고 요청된 것만 변경하세요. - 그렇지 않으면 자체 포함된 HTML 브랜드 북을 아티팩트로 게시하고
tokens.css,tokens.json, 컴포넌트 파일 및 자산을 파일로 전달하세요(연결된 폴더가 있는 경우 해당 폴더에 작성). - 로고, 아이콘 및 글꼴을 실제 파일로 복사하세요. 절대 base64를 채팅에 붙여넣지 마세요.
- 마무리: 링크, 출처가 있는 것과 제안된 것, 인벤토리에서 남은 것, 추가 진행 제안(컴포넌트, 다크 테마, Figma 동기화, 코드 통합)을 포함하세요.
7. 리뷰 모드 (코드베이스 또는 URL 감사)
수집
- 코드베이스: 색상 리터럴(
#[0-9a-fA-F]{3,8},rgb(,hsl(), font-family 선언, font-size/px 값, border-radius, box-shadow, z-index, 중단점, 인라인 스타일, 중복 컴포넌트(여러 Button/Modal 구현), 사용 중인 아이콘 라이브러리를 검색하세요. 발생 횟수를 계산하세요. - URL: 각 페이지를 열고(데스크탑 1440 및 모바일 390), 계산된 스타일을 읽고, 고유 값을 수집하고, 주요 화면을 스크린샷으로 저장하고, 텍스트/배경 쌍에 대한 대비 검사를 실행하고, 탭으로 포커스 가시성을 확인하고,
prefers-color-scheme및 감소된 모션을 확인하세요.
실제 시스템 추출
거의 중복된 값을 클러스터링하세요(예: 14개 그레이 → 6단계; 9개 반경 → 4개). 실제 팔레트, 서체 스케일, 간격 및 반경을 사용 횟수와 함께 보여주세요.
점수 (각 0-5, 증거 포함)
- 색상(팔레트 규율, 의미적 사용, 대비)
- 타이포그래피(스케일 일관성, 계층 구조, 가독성)
- 간격 및 레이아웃(그리드 준수, 리듬, 반응형)
- 컴포넌트(일관성, 상태, 중복)
- 접근성(대비, 포커스, 레이블, 키보드, 모션)
- 브랜드 표현(차별성, 음성, 이미지)
- 토큰 아키텍처(하드 코딩된 값 vs 토큰, 테마 준비)
발견 사항
심각도별로 순위 지정: Critical(접근성 실패, 깨진 흐름), High(사용자가 알아차리는 불일치, 브랜드 약화), Medium, Nit. 각 발견 사항: 위치(파일:줄 또는 URL + 요소), 무엇, 중요한 이유, 정확한 수정(토큰 이름 및 값, 또는 컴포넌트 변경).
처방
- 통합된 토큰 세트(이전 값 → 새 토큰 매핑 테이블).
- 가장 영향력이 큰 3-5개 화면 또는 컴포넌트에 대한 전후 비교(필요한 경우 HTML 모형).
- 단계별 마이그레이션 계획: 1) 토큰 + 대비 수정, 2) 핵심 컴포넌트, 3) 화면, 4) 다크 모드/마무리. 호환성이 깨지는 변경 사항을 기록하세요.
- 문서 또는 HTML 보고서로 전달하세요. Create를 통해 전체 시스템을 구축하겠다고 제안하세요.
사용자가 요청하지 않는 한 리뷰 모드에서 사용자의 코드를 편집하지 마세요.
8. 품질 체크리스트
- 모든 값이 sourced / derived / proposed로 표시됨; 조용히 발명된 것 없음
- 로고와 마크는 실제 파일; 로고가 없으면 일반 워드마크 서체와 메모
- 모든 테마 및 모든 미리보기에서 대비 확인됨
- 모든 토큰에 사용법 메모가 있음; 모든 컴포넌트가 사용하는 토큰을 나열
- 브랜드 이름이 모든 곳에서 일관되게 철자됨(샘플 사본 포함)
- 글꼴: 실제 파일 또는 문서화된 라이선스 대체
- 사본이 브랜드 자체 음성 규칙(대소문자, 이모지 정책, CTA 패턴)을 따름
- 390px에서 가로 스크롤 없이 반응형
- 인벤토리 보고: 구축됨, 건너뜀, 남음
안티 패턴 (제공하지 마세요)
- 일반적인 AI 클리셰: 모든 곳에 파란색에서 보라색으로 그라데이션, 이모지 기능 카드, 왼쪽 테두리 액센트 카드, 이유 없는 글라스모피즘
- 액션 대신 배경 워시로 사용되는 액센트 색상
- 순수 검정 드롭 섀도우; 4개 이상의 섀도우 레벨
- 스케일 외부의 임의 값(13px, 17px, 22px 반경)
- 다시 그려지거나 색상이 변경된 로고
- 상태에 대한 유일한 신호로 빨강/녹색 사용
- 목록 형태의 tokens.json이 필요한 곳에 토큰 맵(DTCG 중첩 객체)