kitchen-sink-design-system

Kitchen Sink 设计系统

为真实场景构建每个组件，将其接入单一的展示页，并通过该页面证明设计系统有效。

此工作流采用脚本优先的方法：由审计脚本负责遍历代码库并识别偏差等“苦活”，让 Agent 专注于修复组件并组装展示页等“判断”工作。

用法

当用户要求创建 Kitchen Sink 页面、设计系统审计或组件清单时：

1. 运行审计脚本：

   python3 ~/.agents/skills/kitchen-sink-design-system/scripts/audit_design_system.py \
     --root "." \
     --out "design_audit.json"
   

2. 阅读报告： 加载 design_audit.json，查看：

   • 检测到的框架（Next.js、Astro 等）。
   • 现有组件清单。
   • **设计偏差报告：**在组件文件中发现的硬编码十六进制值和任意 Tailwind 值（-[...]）。
   • **清单缺项：**代码库中缺少的 Tier 1 基础组件（Button、Card 等）。

3. 建立／采用：

   • 如果有指南：将发现的令牌映射到指南。
   • 如果没有指南：根据偏差报告中发现的既定令牌，提出一个 design-tokens.md。

阶段 1：构建并修复组件

对于每个缺失项或存在偏差的文件：

• 重构为使用语义化设计令牌。
• 采用基础 + 变体模式（React 使用 CVA，Astro 使用 Props）。
• 立即接入展示页。

阶段 2：组装展示页

创建展示页路由（例如 app/sink/page.tsx 或 src/pages/sink.astro），并遵循标准分区顺序：

1. 页眉与品牌声明
2. 设计令牌可视化
3. 品牌语调
4. 插画库（通过 omni-image）
5. 组件类别（排版、按钮、表单等）

阶段 3：验证

pnpm build
pnpm lint
pnpm dlx @axe-core/cli http://localhost:3000/sink

反模式（“犀利观点”清单）

• **Agent 苦活：**不要手动 grep 查找十六进制代码；使用脚本。
• **草稿占位符：**要么构建真实组件，要么什么都不做。
• 任意值：w-[37px] 是设计系统的失败。
• **数量偏差：**从集合推导数量，不要硬编码字符串。