DESIGN.md pre-commit钩子实战让坏设计令牌提交不了仓库【免费下载链接】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.mdDESIGN.md 是一个面向 AI 编码代理的开源设计系统格式规范配套的官方 CLI 可对设计令牌颜色、字体、间距、圆角等 Design Token执行 lint、diff、export 三类检查。本文面向新手带你用 3 步把lint接入 git 的 pre-commit 钩子让坏设计令牌在提交的瞬间就被拦截永远进不了仓库。为什么 pre-commit 是设计令牌的最佳守门员坏设计令牌通常从这几类路径混进仓库断掉的引用组件引用了{colors.brand}这类根本不存在的令牌对比度不足文字/背景色组合低于 WCAG AA 的 4.5:1 标准键名拼写错误把colors:写成colours:整组令牌被静默丢弃靠肉眼审查很难发现这些问题而 DESIGN.md CLI 内置了 11 条 lint 规则可以自动捕获。关键在于它的退出码lint发现 error 级问题时退出码为1否则为0——这正是 git 钩子放行 / 拦截提交所需要的行为。核心实现见 packages/cli/src/commands/lint.ts。三步配置最快的 pre-commit 钩子接入方法第 1 步本地安装 CLInpm install -D google/design.mdWindowsPowerShell用户请给包名加引号避免被 shell 特殊处理npm install -D google/design.md第 2 步编写 pre-commit 钩子脚本在仓库根目录创建.git/hooks/pre-commit文件需赋予可执行权限内容如下#!/bin/sh # 仅当本次提交包含 DESIGN.md 时才执行检查 if git diff --cached --name-only | grep -q ^DESIGN\.md$; then npx designmd lint DESIGN.md fi说明designmd是官方提供的别名命令可避免 Windows 下.md后缀与 Markdown 文件关联冲突跨平台行为一致grep那一行保证提交其他文件时钩子零开销lint 失败退出码 1时 git 会自动中止提交你看到的就是带findings和summary的结构化 JSON 报告第 3 步提交验证git commit -m update: 调整主按钮配色一切正常则直接提交若有 error 级问题被拦截按 JSON 中path指出的位置修复后重新提交即可 ✅ 如果项目已使用 lint-staged 等文件级检查工具也可以把同一条命令挂到*.md规则里效果等价。哪些坏设计令牌会被拦截linter 内置 11 条规则完整清单见 packages/cli/src/linter/linter/rules/index.ts。日常最常触发的前几条规则级别检查内容broken-referror令牌引用未指向任何已定义令牌missing-primarywarning定义了颜色却缺少primary主色contrast-ratiowarning组件文字/背景对比度低于 4.5:1orphaned-tokenswarning颜色令牌定义了却从未被组件引用section-orderwarningMarkdown 章节顺序不符合规范unknown-keywarning顶层键名疑似拼写错误如colours⚠️ 注意默认只有error级发现如broken-ref会阻断提交warning 仅作提示。若希望 warning 也拦截可在钩子中解析--format json输出的summary.warnings字段自行决定是否exit 1。进阶用 diff 命令拦住设计回退lint解决当前文件是否有错而diff解决新版是否比旧版更差。当后一个文件的 error 或 warning 数量多于前一个文件时命令退出码为1回归判定逻辑见 packages/cli/src/commands/diff.tsnpx designmd diff DESIGN.md DESIGN-v2.md在钩子里把暂存区版本的 DESIGN.md 与git show HEAD:DESIGN.md取出的旧版本做 diff就能连质量悄悄降级的设计系统改动也一并拦住。延伸阅读完整格式规范docs/spec.mdCLI 命令与规则参考README.md设计理念为什么散文比令牌更重要PHILOSOPHY.md完整示例含令牌文件与 Tailwind 导出配置examples/atmospheric-glass/DESIGN.md、examples/atmospheric-glass/tailwind.config.js常见问题Q为什么不放进 CI非要 pre-commitCI 是兜底防线但反馈发生在推送之后pre-commit 把反馈压缩到几秒内修复成本最低。两者可以并存。Q钩子会不会拖慢日常提交不会。脚本只在暂存区包含DESIGN.md时才运行 lint其他提交几乎零开销。QWindows 上行为一致吗一致但建议使用designmd别名PowerShell 下与.md后缀都容易被系统误解析详见 README.md 的 Getting Started 章节。【免费下载链接】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），仅供参考 DESIGN.md pre-commit钩子实战：让坏设计令牌提交不了仓库
DESIGN.md pre-commit钩子实战让坏设计令牌提交不了仓库【免费下载链接】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.mdDESIGN.md 是一个面向 AI 编码代理的开源设计系统格式规范配套的官方 CLI 可对设计令牌颜色、字体、间距、圆角等 Design Token执行 lint、diff、export 三类检查。本文面向新手带你用 3 步把lint接入 git 的 pre-commit 钩子让坏设计令牌在提交的瞬间就被拦截永远进不了仓库。为什么 pre-commit 是设计令牌的最佳守门员坏设计令牌通常从这几类路径混进仓库断掉的引用组件引用了{colors.brand}这类根本不存在的令牌对比度不足文字/背景色组合低于 WCAG AA 的 4.5:1 标准键名拼写错误把colors:写成colours:整组令牌被静默丢弃靠肉眼审查很难发现这些问题而 DESIGN.md CLI 内置了 11 条 lint 规则可以自动捕获。关键在于它的退出码lint发现 error 级问题时退出码为1否则为0——这正是 git 钩子放行 / 拦截提交所需要的行为。核心实现见 packages/cli/src/commands/lint.ts。三步配置最快的 pre-commit 钩子接入方法第 1 步本地安装 CLInpm install -D google/design.mdWindowsPowerShell用户请给包名加引号避免被 shell 特殊处理npm install -D google/design.md第 2 步编写 pre-commit 钩子脚本在仓库根目录创建.git/hooks/pre-commit文件需赋予可执行权限内容如下#!/bin/sh # 仅当本次提交包含 DESIGN.md 时才执行检查 if git diff --cached --name-only | grep -q ^DESIGN\.md$; then npx designmd lint DESIGN.md fi说明designmd是官方提供的别名命令可避免 Windows 下.md后缀与 Markdown 文件关联冲突跨平台行为一致grep那一行保证提交其他文件时钩子零开销lint 失败退出码 1时 git 会自动中止提交你看到的就是带findings和summary的结构化 JSON 报告第 3 步提交验证git commit -m update: 调整主按钮配色一切正常则直接提交若有 error 级问题被拦截按 JSON 中path指出的位置修复后重新提交即可 ✅ 如果项目已使用 lint-staged 等文件级检查工具也可以把同一条命令挂到*.md规则里效果等价。哪些坏设计令牌会被拦截linter 内置 11 条规则完整清单见 packages/cli/src/linter/linter/rules/index.ts。日常最常触发的前几条规则级别检查内容broken-referror令牌引用未指向任何已定义令牌missing-primarywarning定义了颜色却缺少primary主色contrast-ratiowarning组件文字/背景对比度低于 4.5:1orphaned-tokenswarning颜色令牌定义了却从未被组件引用section-orderwarningMarkdown 章节顺序不符合规范unknown-keywarning顶层键名疑似拼写错误如colours⚠️ 注意默认只有error级发现如broken-ref会阻断提交warning 仅作提示。若希望 warning 也拦截可在钩子中解析--format json输出的summary.warnings字段自行决定是否exit 1。进阶用 diff 命令拦住设计回退lint解决当前文件是否有错而diff解决新版是否比旧版更差。当后一个文件的 error 或 warning 数量多于前一个文件时命令退出码为1回归判定逻辑见 packages/cli/src/commands/diff.tsnpx designmd diff DESIGN.md DESIGN-v2.md在钩子里把暂存区版本的 DESIGN.md 与git show HEAD:DESIGN.md取出的旧版本做 diff就能连质量悄悄降级的设计系统改动也一并拦住。延伸阅读完整格式规范docs/spec.mdCLI 命令与规则参考README.md设计理念为什么散文比令牌更重要PHILOSOPHY.md完整示例含令牌文件与 Tailwind 导出配置examples/atmospheric-glass/DESIGN.md、examples/atmospheric-glass/tailwind.config.js常见问题Q为什么不放进 CI非要 pre-commitCI 是兜底防线但反馈发生在推送之后pre-commit 把反馈压缩到几秒内修复成本最低。两者可以并存。Q钩子会不会拖慢日常提交不会。脚本只在暂存区包含DESIGN.md时才运行 lint其他提交几乎零开销。QWindows 上行为一致吗一致但建议使用designmd别名PowerShell 下与.md后缀都容易被系统误解析详见 README.md 的 Getting Started 章节。【免费下载链接】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），仅供参考