在GitHub Actions里搭建设计回归防线designlang drift lint的CI部署完整指南【免费下载链接】design-extractExtract any websites complete design system with one command. DTCG tokens, semanticprimitivecomposite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20.项目地址: https://gitcode.com/gh_mirrors/de/design-extract只需两条命令就能在 GitHub Actions 里为design tokens搭起一条自动化的设计回归防线designlang lint审查你本地的 token 文件designlang drift把线上真实页面与代码里的 token 逐项比对一旦发现设计漂移就让 CI 红灯亮起。本指南面向刚接触 CI 的开发者带你从零完成部署让设计走样再也逃不过你的 PR。为什么需要设计回归检查功能代码有单元测试视觉设计却常常裸奔。一个很常见的事故是设计师在 Figma 里把主色从#2563EB调成了#1D4ED8前端按新色值改了线上页面但仓库里的tokens.json没同步三个月后有人基于旧 token 写新页面两个页面摆在一起——颜色对不上了。这就是设计 token 漂移Design Token Drift。而designlang drift干的事就是定期把线上真实渲染结果和你仓库里的 token 文件做差值比较超阈值就让流水线失败。认识 3 个内置命令lint、drift、cidesignlangnpm 包名designlang需 Node 20依赖 Playwright内置了三个专为 CI 设计的命令全部在 bin/design-extract.js 中定义命令作用适合场景designlang lint file审计本地 token 文件.json/.css每次 PR 静态检查designlang drift url --tokens file线上页面 vs 本地 token 比对发布前 / 定时巡检designlang ci url一次跑出漂移 评分 可直接贴 PR 的 Markdown 报告任意 CI 平台一键安装与本地体验npx designlintlatest # 等价于 npx designlang按提示安装依赖即可 npx designlang doctor # 体检Node 版本、Playwright、Chromium 是否就绪doctor命令会告诉你缺什么比如提示运行npx designlang install-browser下载 Chromium——这在 CI 里同样有用。lint不联网的静态体检designlang lint的实现在 src/lint.js它检查的不是页面而是 token 文件本身颜色泛滥发现接近的重复印色RGB 距离小于 8 的双胞胎色值间距刻度不一致spacing 系列的倍率忽大忽小圆角 / 阴影膨胀radius 超过 8 个、shadow 超过 10 个会提醒收敛WCAG AA 对比度自动配对text/fg与bg/surface类 token对比度低于 4.5:1 直接报 error。出现error级别问题时进程以非零码退出——这就是CI-ready的含义。drift线上与本地的差值比对designlang drift的实现在 src/drift.js。它用 Playwright 打开目标站点提取真实调色板然后对本地 token 文件中的每个颜色找最近的线上色计算 RGB 距离距离 ≤ 容差默认 8→ 记为 matched距离 容差 → 记为 drifted并给出线上最近的色值和色板角色。最终给出四级判定in-sync同步→minor-drift轻微→notable-drift明显→major-drift严重并输出漂移率。--fail-on level参数决定到哪个级别才算 CI 失败默认在notable-drift时红灯。GitHub Actions 部署5 分钟搭好完整流水线下面是一条最小可用的 workflow放在你项目的.github/workflows/design-regression.ymlname: Design Regression Guard on: pull_request: paths: - src/** - app/** - tailwind.config.* schedule: - cron: 0 8 * * 1 # 每周一早 8 点巡检线上站 jobs: design-lint-and-drift: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 with: node-version: 22 - name: Lint local token file run: npx designlang lint ./src/tokens/design-tokens.json - name: Check drift against live site run: | npx designlang drift https://yourapp.com \ --tokens ./src/tokens/design-tokens.json \ --fail-on notable-drift - name: Upload CI report if: always() uses: actions/upload-artifactv4 with: name: designlang-ci path: .designlang-ci/几个关键设计点PR 触发 定时巡检双保险PR 里改 token 立即 lint每周一自动比对线上站捕捉别人改了线上、你没跟上的漂移。报告即工件designlang ci会把ci-report.md和ci-summary.json写到.designlang-ci/目录实现见 src/ci.js上传为 artifact 后团队随时可以翻出历史报告看这个月设计健康度趋势。失败原因可追溯designlang 的退出码语义在 src/exit-codes.js 中定义Action 侧同样遵循退出码含义你需要做什么0通过无需处理1漂移/评分超阈值看报告修 token2提取失败页面报错、无浏览器检查 URL 与浏览器安装3导航超时可重试重跑一次即可别误判为回归第 2、3 条尤其重要预览部署网络抖一下不会让你误以为设计出了问题。 进阶玩法仓库内置了一个开箱即用的 GitHub Action见 github-action/README.md。它在每次 PR 上自动跑提取、与提交的 baseline 文件做 diff把每个变更的 token直接标注在 PR 上并支持fail-on-change、comment等参数。调优参数让防线既不狼来了也不漏报参数作用建议值--tolerance n颜色距离容差0–50默认 8品牌色敏感项目调到 4–6--fail-on level红灯阈值新系统先major-drift观察稳定后收紧到notable-drift--baseline url给ci提供改造前页面做视觉 diff改版期间配合使用--quiet静默 stdout仍写文件日志已经很长时加上新手常见误区是把--tolerance设成 0 追求零漂移——抗锯齿、主题微调都会让线上色值产生 ±2 的偏差防线会天天误报。先跑一周默认参数看漂移报告里的真实分布再决定阈值这是最省心的调参路径。总结lint管文件本身健不健康drift管线上与仓库是否一致ci把两者打包成一份可直接贴 PR 的报告三个命令都内置非零退出码粘贴进 GitHub Actions 即成防线无需自写脚本用--fail-on--tolerance按项目成熟度渐进收紧配合schedule定时巡检设计走样从此无所遁形。更多命令细节可参考 README.md 的 CLI 速查表以及 src/lint.js、src/drift.js、src/ci.js 三份核心实现。【免费下载链接】design-extractExtract any websites complete design system with one command. DTCG tokens, semanticprimitivecomposite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20.项目地址: https://gitcode.com/gh_mirrors/de/design-extract创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在GitHub Actions里搭建设计回归防线：designlang drift + lint的CI部署完整指南
在GitHub Actions里搭建设计回归防线designlang drift lint的CI部署完整指南【免费下载链接】design-extractExtract any websites complete design system with one command. DTCG tokens, semanticprimitivecomposite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20.项目地址: https://gitcode.com/gh_mirrors/de/design-extract只需两条命令就能在 GitHub Actions 里为design tokens搭起一条自动化的设计回归防线designlang lint审查你本地的 token 文件designlang drift把线上真实页面与代码里的 token 逐项比对一旦发现设计漂移就让 CI 红灯亮起。本指南面向刚接触 CI 的开发者带你从零完成部署让设计走样再也逃不过你的 PR。为什么需要设计回归检查功能代码有单元测试视觉设计却常常裸奔。一个很常见的事故是设计师在 Figma 里把主色从#2563EB调成了#1D4ED8前端按新色值改了线上页面但仓库里的tokens.json没同步三个月后有人基于旧 token 写新页面两个页面摆在一起——颜色对不上了。这就是设计 token 漂移Design Token Drift。而designlang drift干的事就是定期把线上真实渲染结果和你仓库里的 token 文件做差值比较超阈值就让流水线失败。认识 3 个内置命令lint、drift、cidesignlangnpm 包名designlang需 Node 20依赖 Playwright内置了三个专为 CI 设计的命令全部在 bin/design-extract.js 中定义命令作用适合场景designlang lint file审计本地 token 文件.json/.css每次 PR 静态检查designlang drift url --tokens file线上页面 vs 本地 token 比对发布前 / 定时巡检designlang ci url一次跑出漂移 评分 可直接贴 PR 的 Markdown 报告任意 CI 平台一键安装与本地体验npx designlintlatest # 等价于 npx designlang按提示安装依赖即可 npx designlang doctor # 体检Node 版本、Playwright、Chromium 是否就绪doctor命令会告诉你缺什么比如提示运行npx designlang install-browser下载 Chromium——这在 CI 里同样有用。lint不联网的静态体检designlang lint的实现在 src/lint.js它检查的不是页面而是 token 文件本身颜色泛滥发现接近的重复印色RGB 距离小于 8 的双胞胎色值间距刻度不一致spacing 系列的倍率忽大忽小圆角 / 阴影膨胀radius 超过 8 个、shadow 超过 10 个会提醒收敛WCAG AA 对比度自动配对text/fg与bg/surface类 token对比度低于 4.5:1 直接报 error。出现error级别问题时进程以非零码退出——这就是CI-ready的含义。drift线上与本地的差值比对designlang drift的实现在 src/drift.js。它用 Playwright 打开目标站点提取真实调色板然后对本地 token 文件中的每个颜色找最近的线上色计算 RGB 距离距离 ≤ 容差默认 8→ 记为 matched距离 容差 → 记为 drifted并给出线上最近的色值和色板角色。最终给出四级判定in-sync同步→minor-drift轻微→notable-drift明显→major-drift严重并输出漂移率。--fail-on level参数决定到哪个级别才算 CI 失败默认在notable-drift时红灯。GitHub Actions 部署5 分钟搭好完整流水线下面是一条最小可用的 workflow放在你项目的.github/workflows/design-regression.ymlname: Design Regression Guard on: pull_request: paths: - src/** - app/** - tailwind.config.* schedule: - cron: 0 8 * * 1 # 每周一早 8 点巡检线上站 jobs: design-lint-and-drift: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 with: node-version: 22 - name: Lint local token file run: npx designlang lint ./src/tokens/design-tokens.json - name: Check drift against live site run: | npx designlang drift https://yourapp.com \ --tokens ./src/tokens/design-tokens.json \ --fail-on notable-drift - name: Upload CI report if: always() uses: actions/upload-artifactv4 with: name: designlang-ci path: .designlang-ci/几个关键设计点PR 触发 定时巡检双保险PR 里改 token 立即 lint每周一自动比对线上站捕捉别人改了线上、你没跟上的漂移。报告即工件designlang ci会把ci-report.md和ci-summary.json写到.designlang-ci/目录实现见 src/ci.js上传为 artifact 后团队随时可以翻出历史报告看这个月设计健康度趋势。失败原因可追溯designlang 的退出码语义在 src/exit-codes.js 中定义Action 侧同样遵循退出码含义你需要做什么0通过无需处理1漂移/评分超阈值看报告修 token2提取失败页面报错、无浏览器检查 URL 与浏览器安装3导航超时可重试重跑一次即可别误判为回归第 2、3 条尤其重要预览部署网络抖一下不会让你误以为设计出了问题。 进阶玩法仓库内置了一个开箱即用的 GitHub Action见 github-action/README.md。它在每次 PR 上自动跑提取、与提交的 baseline 文件做 diff把每个变更的 token直接标注在 PR 上并支持fail-on-change、comment等参数。调优参数让防线既不狼来了也不漏报参数作用建议值--tolerance n颜色距离容差0–50默认 8品牌色敏感项目调到 4–6--fail-on level红灯阈值新系统先major-drift观察稳定后收紧到notable-drift--baseline url给ci提供改造前页面做视觉 diff改版期间配合使用--quiet静默 stdout仍写文件日志已经很长时加上新手常见误区是把--tolerance设成 0 追求零漂移——抗锯齿、主题微调都会让线上色值产生 ±2 的偏差防线会天天误报。先跑一周默认参数看漂移报告里的真实分布再决定阈值这是最省心的调参路径。总结lint管文件本身健不健康drift管线上与仓库是否一致ci把两者打包成一份可直接贴 PR 的报告三个命令都内置非零退出码粘贴进 GitHub Actions 即成防线无需自写脚本用--fail-on--tolerance按项目成熟度渐进收紧配合schedule定时巡检设计走样从此无所遁形。更多命令细节可参考 README.md 的 CLI 速查表以及 src/lint.js、src/drift.js、src/ci.js 三份核心实现。【免费下载链接】design-extractExtract any websites complete design system with one command. DTCG tokens, semanticprimitivecomposite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20.项目地址: https://gitcode.com/gh_mirrors/de/design-extract创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考