기존 UI 토큰/컴포넌트를 매핑하거나 구현을 위한 일관된 토큰 및 컴포넌트 계약을 정의할 때 사용합니다.
이 스킬은 디자인 시스템 구축 및 유지를 위한 AI 어시스턴트 가이드입니다. 기존 컴포넌트, 토큰, 타이포그래피, 간격 및 상호작용 규칙을 먼저 인벤토리로 정리하고, 불필요한 병렬 시스템 도입을 지양하도록 돕습니다. `tokens.json`과 컴포넌트 결정 사항을 아티팩트 계약 템플릿에 따라 작성하며, 의미론적 역할을 기존 토큰 참조에 매핑하거나, 없을 경우 `direction.md`에 정의된 방향성에 맞춰 간결한 값을 정의합니다. 색상, 타이포그래피, 간격, 반경, 모션을 포괄하고 포커스 및 비활성화 처리 방식을 명시하며, 표면/텍스트/동작/상태 역할을 구분합니다. 각 영향받는 컴포넌트에 대해 목적, API/변형, 상태, 반응형 규칙 및 접근성 동작을 `flows.md` 또는 `direction.md`에 기록합니다. 이 스킬은 Claude Code, Cursor 등 AI 코딩 에이전트에서 유용하며, 현재 스택과 사용자 제약 조건을 확인하지 않고 UI 라이브러리나 폰트 종속성을 도입하지 않도록 주의합니다.
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/design-systemPortuguês (Brasil)
먼저 현재 컴포넌트, 토큰, 타이포그래피, 간격 및 상호작용 규칙을 인벤토리로 정리하세요. 병렬 시스템을 추가하기 전에 재사용하십시오.
tokens.json과 컴포넌트 결정 사항을 아티팩트 계약을 사용하여 작성하세요. 가능한 경우 의미론적 역할을 기존 토큰 참조에 매핑하고, 그렇지 않으면 direction.md에 맞춰 간결한 값을 정의하세요.
색상 역할, 타이포그래피, 간격, 반경 및 모션을 다루세요. 포커스 및 비활성화 처리를 정의하세요. 표면/텍스트/동작/상태 역할을 구분하세요.
영향받는 각 컴포넌트에 대해 flows.md 또는 direction.md에 목적, API/변형, 상태, 반응형 규칙 및 접근성 동작을 기록하세요.
현재 스택과 사용자의 제약 조건을 확인하지 않고 UI 라이브러리나 폰트 종속성을 도입하지 마세요. 명시적인 브랜드 선택을 유지하세요.
This repo contains 4 individual skills — each has its own dedicated page.
Use when reviewing UI keyboard access, focus, accessible names, structure, contrast and motion behavior.
Use when establishing a distinctive visual direction for a new UI or an intentional redesign.
Use when a UI task needs its audience, primary job, content, constraints and success criteria clarified before design.
Use when delivering a UI change with its decisions, verification evidence and remaining limitations.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
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".
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.
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".