Monorepo中管理多个DESIGN.md多设计系统并行的完整指南【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.md为什么需要在 Monorepo 中管理多套设计系统 DESIGN.md是一种面向编码代理Coding Agent的视觉身份描述格式它把机器可读的设计 TokenYAML frontmatter与人类可读的设计说明Markdown 正文写在同一个文件里让 AI 代理对设计系统形成持久、结构化的理解。当一个组织同时维护品牌官网、电商 App、内部后台等多条产品线时一套仓库、多套 DESIGN.md 就成为必然选择——而 Monorepo 正是承载多设计系统并行的理想工程结构。1. 项目结构速览设计系统即工作区本项目本身就是一个 Monorepo 范例根目录通过 npm workspaces 管理子包官方示例目录 examples/ 下就并排放置了三套风格迥异的设计系统设计系统风格定位入口文件Atmospheric Glass玻璃拟态天气应用examples/atmospheric-glass/DESIGN.mdPaws Paths宠物出行平台的暖橙风examples/paws-and-paths/DESIGN.mdTotality Festival日蚀音乐节暗黑沉浸风examples/totality-festival/DESIGN.md每一套都包含三个产物DESIGN.md源文件、tailwind.config.jsTailwind v3 主题导出、design_tokens.jsonDTCG 标准 JSON 导出。这正是多设计系统并行时推荐的文件三件套。2. 推荐目录布局一个产品线一个文件夹Monorepo 中并行多套 DESIGN.md 的黄金法则是按产品线隔离、按 Token 共享monorepo/ ├── package.json # workspaces 声明 ├── turbo.json # 任务编排 └── products/ ├── shop/ │ └── DESIGN.md # 电商设计系统 ├── admin/ │ └── DESIGN.md # 内部后台设计系统 └── shared-tokens/ # 跨系统共享的基座 Token可选这样做的好处边界清晰每套设计系统自带 Token 与说明文字代理生成 UI 时不会串味独立演进产品线 A 改版不影响产品线 Bdiff回归检测可按目录单独运行复用有度共享品牌色、字体族可抽成共享 Token 包被各产品 DESIGN.md 引用3. 统一校验一条命令守住全部设计系统 ✅多套设计系统最怕静默腐化。官方 CLI 提供lint命令可对每个 DESIGN.md 执行 11 条规则检查结构完整性、Token 引用是否断裂、WCAG 对比度、孤悬 Token 等规则清单见 README.md 的 Linting Rules 一节规格全文见 docs/spec.md。推荐在 Monorepo 根目录用脚本遍历所有产品目录for f in products/*/DESIGN.md; do npx google/design.md lint $f doneCLI 支持文件路径或-stdin输出结构化 JSON发现 error 时退出码为 1——天然适合接入 CI 流水线作为质量门禁。4. diff 回归检测设计系统的单元测试每次改动 DESIGN.md 后用diff命令对比新旧两个版本可以精确得到 Token 级别的增删改清单以及 lint 发现的回归regression 字段为true时退出码为 1。在多设计系统并行场景下建议为每套系统保留上一版快照PR 中自动 diff一眼看出改动了哪些 Token、新增了几条警告。diff 的实现位于 packages/cli/src/commands/diff.ts可直接参考其输出结构。5. 导出与消费一份 DESIGN.md多端落地export命令把 Token 一键转成三种下游格式导出格式用途json-tailwindTailwind v3 的theme.extend配置css-tailwindTailwind v4 的theme { ... }CSS 变量块dtcgW3C Design Tokens 标准tokens.json多设计系统并行时每个产品目录各自export产物直接喂给各自的 Tailwind 配置——这正是 examples/totality-festival/ 目录中tailwind.config.js与design_tokens.json的生成方式详见其 README。6. 用 Turbo 编排并行任务可选进阶本仓库根 package.json 使用 npm workspaces bun作为包管理器turbo.json 中声明了build、test、lint三类任务并配置了dependsOn依赖关系。你可以照抄这套模式在根目录写一个design:lint脚本用 Turbo 并发跑所有产品目录的检查改动哪个产品就只重跑哪个。7. 避坑清单 命名规范每个 DESIGN.md 的 frontmatter 里name字段必须全局唯一避免代理混淆上下文不要合并多产品 Token强行把两套系统的颜色塞进一个文件会让orphaned-tokens警告泛滥共享 Token 用引用跨文件复用建议通过{path.to.token}引用语法而非复制粘贴CI 必跑 lintmissing-primary、broken-ref这类问题在生成 UI 前发现成本最低版本对齐CLI 当前格式版本为alpha见 docs/spec.md升级 CLI 后建议全量 diff 一遍所有产品目录小结在 Monorepo 中并行管理多个 DESIGN.md 的核心思路是目录按产品隔离、校验用 lint 门禁、变更用 diff 回归、落地用 export 多格式分发。配合官方 CLI 的 JSON 输出与退出码语义整套流程可以完全自动化——多设计系统不再是维护负担而是结构清晰的工程资产。【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考