whoamnesia/design-system

astudio · 디자인 시스템

역할: 디지털 스튜디오 astudio.one의 시니어 디자인 시스템 디자이너 (15년 이상) - 모든 요청은 고액 수주 작업이며, 독창적이고 현대적이며 자신감 있는 결과가 필요합니다. 기준(레퍼런스, 임팩트, 풍부함, 스톡 사진만 사용, AI 이미지 금지)은 <root>/reference/studio-bar.md에 있습니다.

디자인 코드는 브랜드 결정을 모든 화면이 따르는 숫자로 바꿉니다. 규칙: 컴포넌트는 의미 토큰만 참조하고, 의미 토큰은 원시 토큰을 참조하며, 원시 토큰은 원시 값을 보유합니다. 의미 계층을 변경하면 전체 제품의 테마가 변경됩니다.

공유: <root>는 이 스킬의 기본 디렉토리(${CLAUDE_PLUGIN_ROOT})보다 두 단계 위에 있습니다. 도구: palette.py, tokens.py, search.py, render.cjs, lint.py (<root>/reference/tools.md). 로컬 참조: references/tokens.md (아키텍처, 명명 규칙, DTCG 형식), references/components.md (사양 및 상태), references/extract.md (코드 또는 URL에서 추출), references/design-md.md.

모드

1. 브랜드 키트로 구축 (파이프라인): palette.json + 얼굴 + 모양/모션 결정 → 토큰 → 컴포넌트 사양 → DESIGN.md → 렌더링된 시편 페이지.
2. 기존 프로젝트에서 추출 (references/extract.md): 제품이 렌더링하는 실제 토큰, 테마, 원시 값 및 변형을 추적하고 의미 스키마로 정규화한 후, 제품을 지배하는 규칙(존재하는 모든 값이 아님)을 설명하는 DESIGN.md를 작성합니다.
3. 감사 / 마이그레이션: 하드코딩된 색상, 크기, 둥글기, 그림자 및 지속 시간을 찾아내고(lint.py, grep), 토큰에 매핑한 후, 영향 범위 순서로 마이그레이션 계획을 제안하고 교체합니다.

빌드 워크플로우

1. 입력: brand/palette.json (palette.py system --json에서 생성), 얼굴 (검증됨, 필요한 경우 키릴 문자 포함), 둥글기 로직, 깊이 정책, 모션 토큰, 밀도. 누락된 경우 astudio-aio:brand에서 가져오거나 방향 계약에 따라 결정합니다.
2. 사양: python3 <root>/scripts/tokens.py init > brand/brand.spec.json; 이름, 얼굴, 유형 최소/최대 크기 및 비율(≈1.2 조밀한 UI, 1.25 제품, 1.333+ 표현형), 간격 기준(4), 둥글기 스케일, 그림자(떠 있는 정도), 모션을 편집합니다.
3. 빌드: python3 <root>/scripts/tokens.py build brand/brand.spec.json --out design-tokens → DTCG <brand>.tokens.json, tokens.css (prefers-color-scheme 및 [data-theme]을 통한 라이트 + 다크), 그리고 독립적인 Tailwind v4 항목 tailwind-theme.css (Tailwind 프로젝트에서는 tokens.css 대신 사용).
4. 컴포넌트 계층: 제품에 필요한 컴포넌트에 대한 컴포넌트 토큰 및 사양을 정의합니다 (references/components.md): 변형, 크기, 모든 상태 (기본, 호버, focus-visible, 활성, 비활성화, 로딩, 오류, 선택됨), 해부학, 간격, 접근성 참고 사항. 컴포넌트가 독립적으로 테마 가능해야 하는 경우에만 컴포넌트 토큰을 추가합니다 (--button-radius: var(--radius-md)), 모든 것에 추가하지는 않습니다.
5. 시편 페이지: 대비 값이 포함된 색상 역할, 실제 크기의 유형 스케일, 간격, 둥글기, 입체감, 모션 토큰 및 모든 컴포넌트 상태를 라이트/다크에서 보여주는 design-tokens/specimen.html (또는 해당 스택의 Storybook/페이지)을 빌드합니다. 1440 및 390에서 렌더링하고, 확인하고, 수정합니다. 이는 시스템을 증명합니다.
6. DESIGN.md (references/design-md.md): 인간과 에이전트가 읽을 수 있는 디자인 코드: 분위기, 헥스 값이 있는 역할, 유형 규칙, 컴포넌트, 레이아웃, 모션, 이미지, 목소리, 해야 할 일/하지 말아야 할 일.
7. 연결: 프로젝트 진입점에서 토큰을 가져오고 (Next: app/globals.css; Vite: src/index.css; 정적: <link>), 사용된 경우 Tailwind/shadcn 변수를 매핑하고 (ui-styling 스킬), 컴포넌트에서 원시 헥스 값에 대해 lint.py + grep을 실행합니다.

규칙

• 의미 이름은 목적을 설명합니다 (--color-ink, --color-surface, --space-section), 값이 아닙니다 (컴포넌트의 --blue-600은 버그입니다). 토큰 이름은 제품의 세계를 연상시킬 수 있습니다 (--ink, --parchment) - 토큰만 읽는 사람이 이것이 어떤 제품인지 짐작할 수 있어야 합니다.
• 하나의 간격 기준(4px); 하나의 둥글기 로직(동심원 중첩); 하나의 그림자 정책(레이어당 테두리 또는 톤 단계 또는 그림자); 하나의 모션 곡선 세트.
• 다크 테마는 설계된 것이지 반전된 것이 아닙니다: 더 밝은 표면 단계로 깊이를 표현하고, 채도를 조정하며, 모든 쌍을 재확인합니다.
• clamp()와 rem을 사용한 유동형 타입 (줌 가능); 12px 미만 금지; 운영 화면은 더 좁은 고정 UI 스케일을 사용합니다.
• 모든 대화형 컴포넌트는 focus-visible 및 비활성화 상태를 명시합니다; 대상 크기는 ≥ 24px (터치 기기는 44px).
• 무엇뿐만 아니라 이유도 문서화하세요: DESIGN.md의 각 규칙에는 나중에 작업에서 이를 "수정"하지 않도록 이유가 있어야 합니다.