用途：为组件和 app 界面提供可复用的 UI 设计模式与规范，覆盖从设计令牌到无障碍、响应式的完整流程，帮助在生成界面时保持视觉与交互一致。
主要能力： 一、起始上下文。先读取 .agents/design-context.md，缺失则在 tailwind.config.* 或 :root CSS 变量中找令牌；都没有则使用默认值（Primary #2563EB、Secondary #7C3AED、Accent #F59E0B、Tailwind gray 中性色、Inter 字体、Minimal 风格），并告知用户使用了默认值，建议运行 design-context。令牌需映射为 CSS 变量后只使用变量。 二、组件设计原则（原子设计）：令牌、原子、分子、有机体、模板、页面分层；每个组件在根作用域定义自有 CSS 自定义属性；优先组合而非配置；组件默认无状态，状态上提。间距统一 4px 基准：4、8、12、16、24、32、48、64px。 三、视觉层级：通过大小、字重、颜色、间距、位置五个杠杆控制视觉顺序，用眯眼测试检验主操作与主标题是否清晰。 四、交互状态：每个可交互元素都必须具备默认、悬停、按下、键盘焦点（focus-visible）与禁用五种状态，禁用态保留 not-allowed 光标。 五、反馈模式：加载用骨架屏而非转圈，置于触发操作附近并标记 aria-busy；成功用 status 提示且不自动关闭含操作的消息；错误用 alert、说明原因并给出恢复操作，不单靠红色；空状态给出说明与主操作。 六、导航：侧边栏 240–280px 可收为 64px，当前项用 aria-current；顶部导航 56–64px，md 断点收为汉堡；标签页不超过 7 个并支持方向键；面包屑当前页不可点，长路径截断中间。 七、表单：标签置于输入框上方且常显；单列布局；失焦时校验；错误信息在字段下方并给出具体指引；主操作左对齐于表单底部。 八、无障碍：正文对比度至少 4.5:1，大文本与非文本 UI 至少 3:1；焦点环 2px、偏移 2px，不得被固定头尾遮挡；指针目标至少 24×24 CSS px，触摸主目标 44px 以上；每页一个 h1、标题不跳级、使用语义地标、操作用按钮导航用链接、图标按钮加 aria-label；遵循 prefers-reduced-motion。 九、响应式：断点 sm 640、md 768、lg 1024、xl 1280、2xl 1536；移动优先，支持容器查询。 十、现代趋势：玻璃拟态需在杂乱背景上并校验对比度且提供不支持时的回退；Bento 网格行高避免固定 200px 裁切内容；极光渐变背景。 十一、高级 CSS：:has() 父选择器、subgrid 对齐卡片内分区、滚动驱动动画仅在支持且允许动效时渐进增强。 十二、验收：生成后用 Playwright 截图核对，例如 npx playwright screenshot --full-page --viewport-size=390,844 file://$PWD/index.html mobile.png，再以 --viewport-size=1440,900 截图；检查无横向滚动与文字重叠、层级清晰、令牌生效、图片比例正确；Tab 遍历检查焦点环与顺序；逐一验证各状态并检查弱化文字对比度，修复后重新截图再交付。
适用场景：构建组件库、应用界面、表单、导航与反馈状态，以及需要无障碍与响应式保障的 UI 交付。
限制：资料未提供收费、价格、平台支持范围与效果保证等信息；Figma 相关能力仅在用户提供 Figma URL 且配合 Figma MCP 时使用，其余细节暂未提供。