SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-md

design-md

设计与创作

查看项目

更新于 10-16 10:05

技能介绍

用途

design-md 用于为某个代码仓库建立或维护「设计语言契约」：在仓库根目录生成 DESIGN.md，明确告诉 AI 智能体和人类在这个仓库里 UI 是如何构建的，并配一份可移植的前端设计工艺技能（.agents/skills/frontend-design/SKILL.md），让该设计准则可以应用到任何仓库。文档是代码的下游——它描述已经存在的设计语言，或在获得用户批准后提议一套设计语言；不会凭空发明一套设计语言并当成事实，也不会为了迎合文档去改现有 UI 的样式。

主要能力

  • 审计仓库证据：从 package.json（框架、UI 库如 react/vue/svelte、tailwind、shadcn、radix/base-ui、motion/framer-motion、lucide、字体包）、令牌层（globals.css / tailwind.config.* / 主题文件中的 CSS 变量、@theme 块、自定义工具类）、字体加载方式、组件系统（components/ui/、变体模式）、动效（关键帧、transition 工具、motion 库、prefers-reduced-motion 处理）以及 3–5 个最精致的界面收集证据。
  • 仓库分类：先读 docs/agents/skills-config.md（若存在），其中可能已记录分类模式和 Mode C 已确定的美学方向，不会重复询问。
    • Mode A — 记录：已有统一令牌、字体选择、组件系统和反复出现的母题，但无设计文档；任务是提取现有设计，引用证明文件，不一致时记录主导/最新模式并注明偏差。
    • Mode B — 合并：已存在 DESIGN.md、品牌指南或设计相关规则；合并而非重新生成，保留每条本地独有规则，去重，保持单一事实来源；文档与代码矛盾时向用户指出。
    • Mode C — 提议：全新项目、无统一设计语言；通过访谈技能确定美学方向（根决策）及其下游的字体搭配、配色与强调色预算、层次策略、动效方式，给出 2–3 个方向，写出 docs/plans/design-language.md 提议，获得批准后再写 DESIGN.md。
  • 生成产出物：DESIGN.md（根设计语言契约，活文档）、.agents/skills/frontend-design/SKILL.md（可移植工艺准则）、Mode C 的 docs/plans/design-language.md 提议文档；并在 AGENTS.md 的 Quick Links 中插入 - [Design Language](DESIGN.md) 链接（幂等，仅此一处改动）。
  • 模板参考：使用了 references/design-md-template.md（DESIGN.md 骨架，从证据填充）与 references/skill-frontend-design.md（逐字创建 SKILL.md，去掉模板前言）。

使用方式

按以下顺序执行：

  1. Phase 0 审计与分类（先读配置，再收集证据，再归类）。
  2. 仅 Mode C：按 frontier-interview 技能访谈，撰写提议，展示并等待批准。
  3. 以 references/design-md-template.md 为结构写 DESIGN.md（Mode A/B 由证据填充，Mode C 由批准的提议填充）。
  4. 逐字从 references/skill-frontend-design.md 创建 .agents/skills/frontend-design/SKILL.md（去掉模板前言），除非仓库已有等价工艺技能则跳过。
  5. 从 AGENTS.md Quick Links 链接到 DESIGN.md。
  6. 运行验证环节。
  7. 报告：所选模式及原因、创建的文件、发现的文档与代码矛盾、从既有文档保留的规则。

DESIGN.md 写作规则

  • 引用真实文件：文档中每个令牌、工具类、字体、组件模式都要链接到定义它的文件。
  • 写明预算：优秀的设计语言多为克制，明确限制（如「每个视图一组强调色搭配」「每页至多一处展示字体」）。
  • 包含一句话摘要：顶部附近的引用块，把整套语言压缩成一段代理可携带到其他界面的文字。
  • 结尾附每页可核验清单，措辞让代理能自查。
  • 用尺寸而非形容词（如「rounded-3xl 卡片、rounded-full CTA」而非「大圆角」）。
  • 在仓库令牌系统覆盖处优先用语义令牌而非硬编码值，并明确点出被认可的例外。

约束

  • 绝不为了匹配 DESIGN.md 去重设现有组件样式；文档只描述或提议，不授权重构。若用户希望 UI 对齐文档，那是另一项明确任务。
  • Mode A/B 中记录时不得「改进」设计语言，改进想法放在结尾明确标注的「Open questions」部分。
  • 不得把其他产品的设计语言（字体、调色板、母题）复制进 DESIGN.md，除非在本仓库验证过或在 Mode C 提议中获批准。
  • 宁可准确而短，不要华丽而长。
  • 匹配仓库的 markdown 语气与格式。

重跑、标记与归属

  • 每个产出文件首行带 <!-- generated by design-md v<version> --> 标记（版本来自技能 frontmatter）；生成的 SKILL.md 中标记紧跟在 frontmatter 之后。
  • 依据标记判断归属：带本技能标记的文件在重跑时可更新，但用户之后添加或编辑的规则要保留，不得重新生成掉；无标记的文件不属于本技能（手写的 DESIGN.md 按定义属 Mode B），就地合并，绝不覆盖，也不在旁边创建副本。
  • AGENTS.md 的编辑是幂等的单行插入，检查是否存在，不存在则添加，不动其他内容。

验证环节（完成前必做）

  • DESIGN.md 中引用的每个文件路径都能解析到现有文件。
  • 文档中命名的每个令牌、工具类、字体都在代码库中存在（grep 验证）。
  • Mode A/B：文档中没有规则与最精致界面的实际做法矛盾。
  • Mode B：既有文档中每条独有规则在合并后都保留（diff 对比）。
  • Mode C：文档与批准的提议一致，提议文件存在于 docs/plans/。
  • AGENTS.md 链接可解析。
  • DESIGN.md 结尾清单只包含代理可从代码核验的条目。
  • 每个产出文件都带本技能的生成标记，没有无标记文件被覆盖。

完成标准

  • 在本仓库构建 UI 的代理可仅凭 DESIGN.md 回答「用什么字体、令牌、圆角、阴影、动效？」，且距 AGENTS.md 仅一跳。
  • 用户既有设计决策完好——没有任何内容被覆盖，任何新方向都经过明确批准。
  • 可移植的前端设计工艺技能已安装。
  • 每条文档陈述都有证据（或批准）支撑，验证环节全部通过。

适用场景

适合需要为代码库建立 AI 可读设计规范的团队，尤其是有 AI 代理参与前端开发的仓库：已有成熟设计语言想沉淀成文档、已有零散设计文档想统一、或全新项目需要先确定美学方向再落地设计规范。

限制

仓库未提供具体的安装命令；本技能以技能文件形式工作，涉及的具体模板内容、版本号、访谈技能细节需参考对应 references 文件与技能 frontmatter，页面未在此给出。