create-design-system

用途：在用户要求“创建设计系统或 UI 套件”时使用，指导把品牌上下文、视觉基础、组件与完整界面沉淀为一套可被设计智能体消费的文件夹结构。\n\n主要能力：整理排版、颜色、资源、品牌风格与语气、CSS 样式及 React 界面还原；包含真实视觉资源、底层视觉基础（字体、颜色、阴影、圆角、间距）、可复用 UI 组件和高层 UI 套件（完整屏幕）。\n\n使用方式：根目录固定提供 styles.css（或 index.css、globals.css、global.css、main.css、theme.css、tokens.css，首个匹配生效），仅写 @import 行，链接此文件即可消费；被其递归 @import 的内容与 @font-face 会一并发布。其余结构可自定义，默认建议 tokens/、components/<group>/、ui_kits/<product>/、guidelines/、assets/、readme.md。组件为同级目录中 PascalCase 的 <Name>.jsx 或 .tsx 配 <Name>.d.ts；令牌为 :root 下的 --* 自定义属性；字体为 @font-face。每个组件目录配一个首行为 @dsCard 标记的 HTML；不要手写 _ds_bundle.js、_ds_manifest.json、_adherence.oxlintrc.json 或 barrel index.js。\n\n流程要点：先探索给定代码库、Figma 或文件资源，写 readme.md 记录上下文，调用 set_project_title；写令牌 CSS 与 @font-face，再写根 styles.css；补充 CONTENT FUNDAMENTALS、VISUAL FOUNDATIONS、ICONOGRAPHY 等章节；制作约 700×150px 的基础样卡；复制 logo、图标与插图到 assets/，不得自行绘制或凭记忆重建品牌标识；按来源定义的组件清单逐个构建，不自行添加常见组件；为每个产品建 UI 套件并目视校验；如提供幻灯片模板则制作示例幻灯片。缺少字体时可在 Google Fonts 找最接近替代并明确告知用户。\n\n适用场景：需要基于已有品牌或产品快速产出一套可复用设计系统、组件库、UI 套件与演示页面时。\n\n限制：资料未提供具体所属产品、收费、价格、平台与效果信息；UI 套件为高保真视觉与交互复刻，非生产代码；来源缺少组件定义时才可自拟标准组件；无法从截图单独可靠重建 UI；遇到关键阻塞（如缺少 Figma 或代码库访问）应停止并报告；未能完成的组件家族需明确列出并询问是否继续。