SuperAPI AI 工具集

cavekit-design-system

设计与创作

查看项目

更新于 10-16 06:21

技能介绍

用途:DESIGN.md 是 Cavekit 项目的视觉规范文档,回答「看起来是什么样」,而非「如何实现」。它与 CLAUDE.md(如何构建)、kits(行为约束)、plans(任务)并列,所有构建 UI 的智能体在写代码前都应先读它。缺失该文档时,颜色、字体、间距容易分散在各处并被硬编码。

主要能力:采用九段式 Stitch 格式,且九段必须齐备。1 视觉主题与氛围;2 配色与角色(每个颜色需语义名称、十六进制值、功能角色,含暗色模式映射);3 字体规则(字体栈、字阶表含字号/字重/行高/字距/字体);4 组件样式(含 hover、focus、active、disabled 状态与过渡时长);5 布局原则(4px 基数间距表、栅格、圆角表);6 层次与阴影;7 正误对照(Do's and Don'ts);8 响应式行为(断点、触控目标 44x44px、移动端适配);9 智能体提示指南(速查表与示例提示)。

使用方式:设计令牌按 --{类别}-{名称}[-{修饰} 命名,如 --color-..., --space-..., --text-...、--radius-...、--shadow-...、--font-...,可直接映射为 CSS 变量或 Tailwind 配置。kits 中的验收标准只按章节和令牌名引用,不复制内容;计划阶段任务注明需读的章节;构建阶段使用令牌而非硬编码值,并在提交信息中注明遵循的章节。手工视觉修复可通过 /ck:revise 回溯更新对应章节,并记录到 context/designs/design-changelog.md。可从 awesome-design-md 仓库(54+ 真实产品设计系统)导入模板作为起点,导入后归项目所有,后续直接维护。

限制与要求:所有值必须具体明确,避免「清爽现代」这类空泛描述;颜色不得孤立未用;组件不得缺少交互状态;间距须为基数倍数;暗色映射须覆盖组件用到的全部颜色。资料未提供安装命令、收费标准与具体平台支持信息。