用于映射现有 UI 令牌/组件，或定义一致的令牌和组件协议以指导实现。
该技能专注于开发与设计系统相关的技术规范与实现。它指导用户首先盘点现有组件、设计令牌、排版、间距及交互约定，并强调在已有体系基础上复用，避免引入平行冗余系统。技能要求将令牌定义与组件决策写入标准的制品契约（artifact contract），映射语义角色到已有的令牌引用，或在必要时根据 direction.md 定义紧凑的值。覆盖内容包含颜色角色、排版、间距、圆角和动效，并明确定义聚焦与禁用状态的处理，区分表面、文本、动作和状态等不同角色。对于受影响的每个组件，需在 flows.md 或 direction.md 中记录其用途、API/变体、状态、响应式规则和可访问性行为。该技能明确禁止在未检视当前技术栈和用户约束的前提下引入新的 UI 库或字体依赖，并需保留品牌方的显式选择。它适用于 Cursor、Claude Code 等支持技能文档 Agent 的平台，帮助开发者系统化地管理设计系统，确保扩展的一致性和可维护性。
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".