agentleFS
liuhean2021liuhean2021/anan-agent-skills/skills/design-md-author/SKILL.md

design-md-author

Skill1 starsChanged 7 months agoMIT-0View on GitHub

从零为新前端项目生成设计系统契约:DESIGN.md(SSOT)+ tokens.css + 防漂移校验, 按「Step 0 必问 → 7 步法产出 → 元校验自查 → 完成标准验收」流程执行。 触发词:写DESIGN.md、生成设计系统、建设计系统、设计系统从0、 design system、DESIGN.md、设计契约、统一设计系统、组件库设计规范。 模糊请求(如「帮我定一下项目的组件和颜色规范」)先确认是否按本技能执行。

2 other projects use a version of this.

Adopted by

Most recently taken up by

The file

Files
SKILL.md

从零生成项目专属设计系统 DESIGN.md

方法论全文见 references/guide.md(执行前必须完整阅读)。 起步模板见 references/mvp-template.md(200 行 MVP 版,复制后填空,不要自创结构)。

触发条件

用户要为项目「写 / 生成 / 建立」DESIGN.md 或设计系统 SSOT 时使用; 包括新用户零知识场景(答不上必问项时走默认答案并留痕)。

执行步骤

  1. 读规范:完整阅读 references/guide.md;从零起步以 references/mvp-template.md 为骨架。
  2. Step 0 必问(提问前不动笔):一次性批量提问 6 项—— 框架与 UI 库 / 品牌色来源 / 业务域与页面类型假设 / 团队规模 / 暗色模式 / 组件库规划。
    • 用户答「不知道 / 用默认值」→ 采用 guide.md Step 0 默认答案列,每条默认决策必须记入产出文档的「已知偏差」
    • 禁止静默编造任何决策
  3. 按 7 步法产出三件套:
    • DESIGN.md → 目标项目根目录(与 AGENTS.md 平级);frontmatter 必含 audience: agent、version: 0.1.0、status: Draft;附录 A 用三态标记(✅ / 🔵 计划中 / ❌ 未实现 + 替代方案);令牌遵守占位符规范(文档写中文占位,tokens.css 用库默认值 + /* TODO(决策) */ 注释,禁止擅自编造色值)
    • tokens.css → 令牌实体 + 注入项目入口 + 覆盖库主题(如 --el-*),做法见 guide.md 实战补充 3
    • AGENTS.md 硬引用 → 追加一句:"涉及 UI / 样式 / 组件选型 / 交互文案的任务,Agent MUST 先读 DESIGN.md"
  4. 挂防漂移校验:运行本技能自带脚本(参数按目标项目实际路径替换):

    bash <技能目录>/scripts/validate-design-md.sh <DESIGN.md路径> <tokens.css路径> [附录B标题] [附录C标题]
    # 例:bash scripts/validate-design-md.sh ./DESIGN.md ./src/styles/tokens.css
    # 区段标题默认 "## 附录 B" / "## 附录 C",与实际文档标题不一致时用第 3/4 参数覆盖

    有差异即修到通过;建议把该命令写入目标项目 pre-commit / CI。

  5. 元校验自查:对照 guide.md「DESIGN.md 自检清单(元校验)」逐项输出自查结果。
  6. 验收引导:输出「完成标准」四条验收清单(真实页面走通 / 令牌可解析 / 防漂移可执行 / Agent 可发现),提示用户: 初版是 status: Draft,四条验收命中 + 设计/前端负责人确认后方可升 Active;初版定位为"假设",等待第一个真实页面校准,不当定稿。

约束

  • 禁止静默编造必问项答案;默认决策必须全部留痕于「已知偏差」
  • 令牌禁止硬编码场景按 guide.md 模块 5 三层模型与「合并层起步形态」规则执行
  • 零期(无封装组件):附录 A 全 🔵 / ❌,附录 C 即临时主注册表(Step 4 零期特则)
  • 映射表方向:从 0 是「规格先行」(映射表 = 设计规格),实现组件时逐行对齐,不一致按实际改规格并记入已知偏差
  • 不交付 status: Active 的初版;不跳过第 4 步校验脚本

参考文件

文件用途
references/guide.md方法论全文(执行前必读)
references/mvp-template.md200 行起步模板(复制填空)
scripts/validate-design-md.sh文档 ↔ tokens.css 令牌一致性校验(第 4 步执行)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.