用途：该技能充当设计系统工程师角色，帮助团队在 Next.js（App Router）+ shadcn/ui + Tailwind CSS 4 项目中建立和维护可规模化、一致的界面基础设施。它面向令牌、组件与文档，而非单个像素。
主要能力：
- 模式识别：根据用户请求判断进入审计、基础搭建、组件、页面、文档、Figma 同步或上下文文档七种模式之一；无法判断时先询问。
- 项目预读：强制先读取 .docs/design-system-context.md（若存在）、globals.css、Tailwind 配置（v3 的 tailwind.config 或 v4 的 @theme inline）、components/ui 列表、样式指南页面、package.json 与令牌文件，并检测技术栈，不做假设。
- 审计：扫描令牌漂移、硬编码值、WCAG 违规（对比度低于 4.5:1、缺少标签、目标过小）、组件不一致、缺失状态（hover、focus、disabled、loading、error）、暗色模式缺口，并以覆盖率门禁先检查系统是否覆盖动效、z-index、图标、组件状态与文案等容易被忽略的领域。输出按颜色、间距、字体、圆角、阴影分列的令牌覆盖率表，健康阈值分别为 90%+、70–89%、低于 70%。同时检测 AI 生成痕迹模式（如非单一主视觉场景的渐变文字、卡片侧边强调边框、装饰性玻璃拟态、紫/青默认配色、弹跳缓动、营销套话），并区分品牌场景与产品场景。
- 基础搭建：可从截图提取颜色、字体、间距、圆角、阴影并初始化 shadcn，生成含明暗两套 CSS 变量的 globals.css，映射到 Tailwind，安装字体与基础组件，建立样式指南结构；也可从现有项目扫描并归组令牌、替换硬编码值。
- 组件：先查重，再检索 shadcn 注册表，安装或基于原语构建，创建展示页并更新导航，验证全部变体、状态、暗色模式与无障碍。
- 页面：分析设计、优先复用现有组件、安装缺失组件、移动优先构建、构建后校验所有值来自设计系统。
- 文档：提取令牌清单、组件目录（导入语句、属性/变体、用法示例、无障碍说明）、使用指南与文件结构，生成 .docs/design-system.md 并报告缺口。
- Figma 同步：通过 Figma MCP 拉取令牌、对比代码与 Figma 差异（仅 Figma、仅代码、值不匹配），或从 Figma 组件生成代码并建展示页。
- 上下文文档：通过读取代码加 5–7 个访谈问题，生成 .docs/design-system-context.md，记录原则、约束、特殊约定、贡献流程与无障碍目标，未确定处标 TODO。
使用方式：以技能形式安装后，用自然语言触发对应模式，例如“审计设计系统”“创建设计系统”“添加组件”“创建页面”“生成文档”“同步 Figma”“生成上下文文档”。技能会先读取项目文件，再按对应参考工作流执行。
适用场景：需要统一多页面视觉与交互的中大型前端项目、已有项目令牌治理与清理、从截图快速搭建设计系统、组件库维护与文档化、设计与代码令牌对齐。
限制：技能明确面向 Next.js App Router、shadcn/ui、Tailwind CSS 4（兼容 v3）与 lucide-react 图标；推荐但非必需的 shadcn MCP 与 Figma MCP 用于注册表检索和 Figma 同步。审计的令牌覆盖率与问题清单需基于实际扫描结果，不保证一次修复全部问题。项目若无 .docs/design-system-context.md，技能仅提示建议生成，不阻塞其他工作。具体安装命令、定价与运行环境要求资料未提供。