design-md-chrome：把任意网站的设计系统变成 SKILL.md

"照这个网站的样子做"是 agent 前端工作翻车的地方——agent 根本没见过那个网站。bergside/design-md-chrome 补上了这个缺口：一个 Chrome 扩展，读取你当前标签页的样式，把它们变成 agent 真正能消费的 DESIGN.md 或 SKILL.md 文件。

为什么这个 Skill 重要

这个扩展基于 typeui.sh 的开源 TypeUI DESIGN.md 格式，做的事远不止导出 CSS 变量。一次提取会读取当前标签页的字体、配色、间距、圆角、阴影和动效，然后生成一份包含十一个章节的结构化文档——Mission、Brand、Style Foundations、Accessibility、Writing Tone、Rules: Do、Rules: Don't、Guideline Authoring Workflow、Required Output Structure、Component Rule Expectations 和 Quality Gates。Accessibility 一节内置了 WCAG 2.2 AA 要求，所以输出不只是在描述设计，而是在约束生成。

因为产物是标准 markdown 文件，任何读指令的工具都能用——README 点名了 Google Stitch、Claude Code、Codex 等。

安装

README 文档化的加载方式是未打包扩展：

1. 打开 chrome://extensions。
2. 开启 Developer mode。
3. 点 Load unpacked，选中克隆下来的仓库文件夹。

git clone https://github.com/bergside/design-md-chrome.git

实战：克隆一套设计语言，再照着它开发

1. 打开你想复用其风格的参考网站，在扩展里跑 Auto-extract，它会读取当前标签页的样式。
2. 想要人可读的设计系统文档就先生成 DESIGN.md；文件的去向是 agent 就生成 SKILL.md。下载文件。
3. 把 SKILL.md 放进项目的 skills 目录，然后正常提示：

Build the pricing page for our product. Follow the design
system in the attached SKILL.md exactly.

4. 如果结果跑偏了，用扩展的 Explain（?）动作——它会展示文件是怎么生成的，并附 TypeUI 参考——你就能看清哪个信号产出了哪条规则。

生成的文件保持文本可编辑、规则可检查：当构建结果和参考站不一致时，Rules: Don't 一节能告诉你是 agent 违反了约束，还是提取本身漏了。

技巧

• 大型参考站两个文件都生成：DESIGN.md 给团队评审，SKILL.md 给 agent。
• 不想先抓取的话，typeui.sh/design-skills 上有现成的策划设计系统可以当起点。
• 与页面交互之后用 Refresh 重新提取，让提取结果反映当前页面状态。
• 想改造提取器的话，仓库的测试用 node tests/run-tests.mjs 跑。

何时不用这个 Skill

这个扩展只能提取 CSS 能表达的东西。活在图片里的图像、品牌插画和布局意图不会变成规则，而对大型站点做单页抓取得到的只是样本，不是完整系统。要像素级复刻，你仍然需要把参考站开在 agent 旁边；用这个文件去约束系统，而不是代替你的眼睛。

查看 排行榜 了解更多 skill。