开发者大概都有过这样的时刻：看到一个设计得漂亮的网站，想复刻、想参考，甚至只是想把它的配色和间距记下来，结果打开开发者工具，一层层翻 CSS，一个个量像素，折腾半天，记了一堆零散的数字，回头一用，发现漏了这个忘了那个。这事儿本来就很琐碎，偏偏又避不开。
问题在于，现在越来越多的开发者在用 AI 辅助写代码。Claude Code、Google Stitch、Codex，这些工具都能帮你生成界面，但你得告诉它们你要什么样的界面。于是你打开某个网站，指着屏幕说"就这个风格"，AI 问你"字体多大？间距多少？圆角几个像素？"你愣住了。你当然可以一个个去量，但那要花多少时间？
design-md-chrome 这个 Chrome 扩展，做的就是这件事：一键提取网站的样式信息，生成一份结构化的设计文档。字体、颜色、间距、圆角、阴影、动效，它都能抓出来，然后按 TypeUI DESIGN.md 的格式整理成一份 markdown 文件。这份文件可以直接喂给 AI，让它按照提取出来的设计规范去生成代码。
我觉得，这类工具早就该有人做了。网页设计从来不是玄学，它是一堆可以量化的参数：主色号是多少，辅助色有几个，标题用什么字体、多大字号，正文行高多少，按钮圆角几个像素，卡片间距多大。这些参数就在 CSS 里，只是平时没人愿意一个个去翻。现在有人写了个脚本，自动帮你翻出来、整理好，省下的时间不是一点半点。
生成的文档结构很清晰。Mission 部分定义设计目标，Brand 部分记录产品和受众信息，Style Foundations 列出视觉基础：字体栈、色板、间距比例、圆角规格、阴影层级、动效参数。后面还有 Accessibility 部分列出 WCAG 2.2 AA 的合规要求，Writing Tone 设定文案风格，Rules 部分分"要做"和"不要做"两条线，Guideline Authoring Workflow 定义编写流程，Quality Gates 列出质量检查点。一份文档，把设计系统的骨架搭全了。
传统的方式当然也能做到。打开开发者工具，翻 CSS，量间距，记颜色，整理成文档。但一个中等复杂度的网站，光颜色可能就有二三十个，字体大小七八档，间距规格四五套，加上阴影、圆角、动效，手动整理下来，少说也要一两个小时。而且容易漏，漏了回头还得补。design-md-chrome 这个扩展，点一下按钮，几秒钟就出来了。准确不准确另说，至少它不会漏。
更关键的是，这份文档是给 AI 看的。AI 不需要你一个个告诉它"这个按钮圆角是 8px，那个卡片间距是 16px"，它需要的是一份完整的设计规范，一份它能够理解并执行的蓝图。design-md-chrome 生成的 DESIGN.md 文件，就是这份蓝图。你把它喂给 Claude Code 或者 Google Stitch，告诉它"按这个风格生成一个登录页面"，它就能按照提取出来的字体、颜色、间距、圆角去生成代码，而不是凭空猜测或者套用默认模板。
当然，工具只是工具。提取出来的样式能不能用、好不好用，还得看原网站的设计质量。一个设计得乱七八糟的网站，提取出来的参数也是乱的。design-md-chrome 做的是提取，不是优化。它帮你省的是整理的时间，不是判断的时间。你仍然需要判断这些参数是否合理、是否适合你的项目、是否需要调整。
这事儿说到底，是把一件本来该自动化的事情自动化了。网页样式是可量化的，可量化的东西就该交给脚本去处理。开发者应该把时间花在判断和决策上，而不是一个个翻 CSS、量像素。design-md-chrome 做的就是这件事，简单，直接，省时间。
