SuperAPI AI 工具集

kitchen-sink-design-system

前端与建站

查看项目

更新于 10-15 21:50

技能介绍

用途:为前端项目建立并验证设计系统,通过一个“sink 页面”集中展示所有组件,证明设计系统可用。适用于被要求生成 Kitchen Sink 页面、设计系统审计或组件盘点时。

主要能力:审计脚本会爬取代码库,输出设计审计报告(design_audit.json),内容包括检测到的框架(如 Next.js、Astro)、现有组件清单、设计漂移报告(组件文件中的硬编码十六进制值和任意 Tailwind 值 -[...])、清单缺口(缺失的 Tier 1 基础组件)。随后代理据此重构组件、采用语义化设计令牌,并组装 sink 页面。

使用方式:先运行审计脚本:python3 ~/.agents/skills/kitchen-sink-design-system/scripts/audit_design_system.py --root "." --out "design_audit.json",然后读取报告。若已有设计指南,将发现的令牌映射到指南;若无,则依据漂移报告中的事实令牌提出 design-tokens.md。第一阶段为每个缺失或有漂移的组件重构为语义化令牌,并应用基础加变体模式(React 用 CVA,Astro 用 Props),随即接入 sink 页面。第二阶段创建 sink 路由(如 app/sink/page.tsx 或 src/pages/sink.astro),按标准分区顺序组装:页眉与品牌声明、设计令牌可视化、语气与语调、插图库、组件类别(排版、按钮、表单等)。第三阶段验证:运行 pnpm build、pnpm lint、pnpm dlx @axe-core/cli http://localhost:3000/sink。

限制与反模式:不要手动 grep 十六进制色值,应使用脚本;不要用占位草稿,必须构建真实组件;避免任意值如 w-[37px];不要硬编码字符串计数,应从集合推导。关于具体收费、平台兼容范围、脚本内部实现细节及更详细的效果说明,资料暂未提供。