把杂乱CSS值变成语义设计令牌：design-md-chrome归一化算法深度解析

把杂乱CSS值变成语义设计令牌design-md-chrome归一化算法深度解析【免费下载链接】design-md-chromeChrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI项目地址: https://gitcode.com/gh_mirrors/de/design-md-chromedesign-md-chrome 是一款 Chrome 插件能一键提取任意网页的字体、颜色、间距、圆角、阴影与动效等原始 CSS 值并通过归一化算法把它们整理成语义设计令牌Design Tokens最终生成可供 AI 工具直接使用的 DESIGN.md 设计系统文档。这篇文章带你深入拆解它的归一化算法从 280 个元素的采样到颜色排名、字号阶梯和置信度推断看看杂乱的 CSS 值是如何变成一张整洁的令牌表的。为什么要把 CSS 原始值归一化打开任意网页浏览器计算样式里看到的值往往是这样一番景象同一套白色可能写成rgb(255, 255, 255)、#fff或white间距散落着8px、12px、16px……毫无规律字体族带着引号、大小写和冗长的回退栈这些原始值人类勉强能读但AI 工具无法基于它写出一套一致的设计系统。design-md-chrome 的核心就是在采样和生成 Markdown 之间插入了一个归一化层统计每个值出现的次数把高频值排名、去重、映射成语义化令牌名。整个算法集中在 lib/normalize.mjs 一个文件中入口函数是normalizeExtractedStylesL8-L148。归一化流水线四个阶段各司其职阶段负责文件核心工作① 元素采样content-script.js遍历最多 280 个可见元素读取计算样式② 值归一化lib/normalize.mjs标准化、计数、排名、映射令牌名③ Markdown 生成lib/generate-design-md.mjs把令牌组装成 DESIGN.md④ 质量校验lib/validate.mjs检查必备章节与无障碍目标四个阶段由 service-worker.js 串联插件注入采样脚本到页面后把原始数据交给归一化层再生成并校验最终文档见 handleExtraction L34-L66。颜色归一化先统一格式再按使用量排名第一步是格式统一。浏览器返回的rgb(17, 24, 39)和手写的#111827其实是同一个颜色。归一化算法把所有rgb()/rgba()值解析并转成标准十六进制格式同时直接丢弃transparent这类无意义的透明值toCanonicalColor函数L673-L708。第二步是使用量排名。只有格式统一后同一个颜色才能被正确计数。之后算法按出现次数取 Top N映射到固定的语义名称排名文本色背景色边框色第 1 名color.text.primarycolor.surface.basecolor.border.default第 2 名color.text.secondarycolor.surface.mutedcolor.border.muted第 3 名color.text.tertiarycolor.surface.raisedcolor.border.strong第 4 名color.text.inversecolor.surface.strong—此外还会额外提取出现最多的描边色作为color.focus.ring焦点环颜色并跨类别按颜色值去重buildColorTokensL556-L596。这样用得最多的深色永远是你的主文本色而不是随机的十六进制码。字号、间距、圆角把散值收拢成数字阶梯字号、间距、圆角、动效时长走的是同一条计数 → 排序 → 命名的路线toTokenRowsL616-L630解析把16px、150ms这类字符串解析成数字parsePx、parseDurationnormal、auto等无效值直接过滤计数每个数字值出现一次就加一票页面里用得越多的尺寸越靠前排序按键值从小到大排序sortNumericKeys命名按预设阶梯名称贴上令牌名。各类令牌对应的阶梯命名如下令牌前缀阶梯名称示例font.sizexs, sm, md, lg, xl, 2xl, 3xl, 4xlfont.size.md 16pxspace数字序列 space.1, space.2…space.3 16pxradiusxs, sm, md, lg, xl, 2xlradius.md 8pxmotion.durationinstant, fast, normal, slow, slowermotion.duration.fast 150ms阶梯名称常量定义在 normalize.mjs 顶部。阴影因为无法简单排序则直接按使用量取 Top 4 命名为shadow.1~shadow.4缓动函数只统计非默认ease的值取前 4 名。间距采样时有一个细节margin 和 padding 的 8 个方向值会被全部摊平统计normalize.mjs L53-L70而且只统计大于 0 的值——避免0px淹没真正有意义的间距档位。字体族推断从回退栈到主字体字体族字符串通常长这样Inter, Helvetica Neue, Arial, sans-serif。算法会做两件事标准化字体栈去引号、去多余空白、统一分隔符normalizeFontFamilyStackL515-L531让写法不同的同一字体栈也能被正确聚合计数推断主字体样式在字体族使用占比最高的前提下再找出该字体下最常见的一组字重 字号 行高组合作为主字体样式输出inferMainFontStyleL462-L505。置信度按占比划分字体族使用占比 ≥ 45% 且样式出现 ≥ 3 次为high占比 ≥ 20% 为medium其余为low。页面字体越混杂算法越会如实告诉你的置信度低而不是硬猜。网站画像推断多信号加权打分归一化层还顺带推断这是个什么网站、给谁看用于生成文档中的 Brand 章节inferSiteProfileL150-L319算法把页面的标题、描述、导航文本、CTA 按钮文本拼成一段语料然后对 6 类产品形态文档站、仪表盘、营销页、内容站、电商、Web 应用和 6 类受众开发者、运营、商务、消费者、阅读者、普通用户分别打分关键词命中语料里出现pricing、checkout等词就为对应形态加分数字证据表单 ≥ 3 个、输入框 ≥ 8 个、出现表格 → 倾向仪表盘出现定价区块 → 倾向营销页路径线索URL 含/docs、/api→ 倾向文档站。每个形态取最高分作为结论并保留前 8 条证据供人工核对。置信度规则很严谨总分 ≥ 5 且领先第二名 ≥ 1.4 才判high否则降级为 medium 或 lowL390-L398。最终置信度取形态与受众两者中较低的那个宁保守不误报。内置诊断主动告诉你结果何时不可信归一化输出里附有一个diagnostics诊断列表L114-L129这是这套算法很贴心的设计——它知道自己什么时候不可靠诊断信号触发条件提示含义样本量不足可见元素 30 个页面太简单统计不具代表性颜色多样性低令牌颜色 4 个颜色推断置信度低字号多样性低字号档 3 个字号阶梯可能需要人工细化主字体缺失无法确定字体族主字体信息不可信画像置信度低网站画像为 low品牌上下文请人工确认这些诊断会原样写入生成的 DESIGN.md 的组件规则期望一节见 generate-design-md.mjs L84-L89让使用者一眼看出哪些令牌需要手动复核。动手验证跑一遍内置测试项目自带一份模拟采样数据的测试脚本你可以观察原始值 → 归一化结果 → 最终 Markdown的完整链路node tests/run-tests.mjs测试用 mock 数据还原了一个仪表盘页面的采样结果包括rgb(17, 24, 39)这类原始颜色值和 150ms 的过渡时长见 tests/run-tests.mjs L7-L78。生成的文档结构以仓库根目录的 DESIGN.md 为蓝本包含 Mission、Brand、Style Foundations、Accessibility、Rules: Do/Dont 等 11 个必备章节validate.mjs 会对这些章节逐一检查缺少任何一节都会报错。总结design-md-chrome 的归一化算法用了一条朴素而有效的思路先统一格式再按使用量排名最后贴上语义名称。颜色、字号、间距、圆角、阴影、动效各自遵循这套流程再叠加字体置信度、网站画像和内置诊断把杂乱 CSS 值变成了一份 AI 可直接消费、人类也看得懂的语义设计令牌表。如果你想在自己的项目里复刻类似的提取 → 归一化 → 生成文档流水线这个仓库 lib/ 目录下的四个模块就是最好的参考起点。⚡【免费下载链接】design-md-chromeChrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI项目地址: https://gitcode.com/gh_mirrors/de/design-md-chrome创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考