用途：把「我看到一个喜欢的设计」转化为「我的 AI 生成的代码长得像那个设计」。它扮演资深设计系统工程师，针对 AI 编程代理默认生成通用 UI（如 Inter 字体、紫色配白、4px 间距）的问题，提供精确、有主张的约束。
主要能力：支持四种输入路径——风格描述（如 dark mode fintech with glassmorphism）、截图/图片分析、Figma 链接（用 Figma MCP 工具提取令牌）、混合输入。输出四件交付物：design-tokens.json（机器可读的令牌，含颜色、字体、间距、边框、阴影、组件等，且每个值附带 usage 说明）；design-system.css（可直接使用的 CSS 变量，含 Google Fonts 引入与可选深色模式）；design-system.md（设计哲学、色彩、字体、间距、组件规则，含可粘贴进系统提示的「AI Agent Instructions」段落）；design-system-preview.html（单文件预览，展示色板、字阶、间距与组件示例）。
使用方式：按输入类型走对应路径，产物保存到工作目录 design-system-{name}/ 下，四个文件名固定。
适用场景：需要让 AI 代理产出视觉一致、有辨识度界面的前端项目；也可将 tokens 作为其他前端技能的上下文。
限制：资料未提供安装命令、收费方式与具体平台支持信息；质量要求中禁用 Inter 与 Roboto、强调 WCAG AA 对比度、间距需基于统一基准单位，均为该技能设定的规则，不代表已实测效果。