指南

要重构网站？先提取它的设计系统

重构、品牌升级或迁移到新框架，往往就是设计系统悄悄丢失的时候。颜色藏在旧的 CSS 里，字号层级只存在于某个人的脑子里，按钮状态埋在一个没人愿意打开的组件里。

在做任何改动之前，先把当前网站提取为 DESIGN.md。你会得到一份新版本的书面基准，你的团队和编程智能体都能读懂。

面向计划重构、品牌升级或迁移的团队。更新于 。

你将获得

  • 一份当前网站的 DESIGN.md，在重构的第一行代码之前就已提交。
  • 清楚了解文件记录了什么、没有记录什么。
  • 一份需要手动核实的清单：素材、状态、动效、断点，以及需要登录的页面。
  • 完成后对比新旧网站的方法。

什么时候这样做

  • 迁移框架。外观不变，技术栈更换。有了 DESIGN.md，你的编程智能体可以用精确数值重建组件，而不必去读旧的样式表。
  • 品牌升级。先保存旧系统，这样你就能清楚知道哪些颜色、字体和圆角要改，哪些保留。
  • 交接。新的代理机构或新团队拿到的是一份描述网站当前外观的文件，而不用把代码库从头看一遍。

步骤

  1. 在任何改动之前提取线上网站

    在 Design Extractor 首页粘贴你的生产环境网址，运行一次 Pro 提取。它必须是公开页面：提取会像访问者一样加载页面，因此 localhost 和需要登录的页面都不行。

  2. 作为基准提交

    以 DESIGN.md 为名保存在新仓库中，并在重构开始前提交。它记录了网站在那一天的样子。

  3. 阅读 Known Gaps 章节

    文件末尾列出了这次提取无法记录的内容。那里的每一项都需要手动检查。

  4. 检查 DESIGN.md 无法容纳的内容

    素材、登录后的页面、动效以及下面列出的其他项目。边检查边在文件中添加备注。

  5. 以它为依据进行构建

    按照 Claude Code 和 Cursor 指南中的方法，让你的编程智能体指向这个文件，并对照它检查每个新页面。

文件在 Stripe 上记录了什么

想知道你会得到什么，可以看看示例库中的 Stripe DESIGN.md。它的 Pro 提取抓取了 stripe.com 的 5 个页面：/nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales。在你自己的网站上提取，会得到同样的结构。

颜色21 个令牌，每个都标明角色
字体排版17 种样式，使用 Sohne
圆角10 个令牌
间距62 个令牌
组件71 个配方，以 HTML 和 CSS 编写：44 个通过了与实时页面的核对，27 个被标注或无法检查，均附有原因
章节Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps

它自己说明的遗漏

文件会如实说明自己的局限。以下是其 Known Gaps 章节中 11 项里的前 5 项：

摘自 Stripe 的 DESIGN.md 末尾，原文照录。
## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

提取自 Stripe 的公开网站，并非官方品牌规范。阅读完整的 Stripe DESIGN.md

你自己的文件会有自己的清单。把它当作下面这些检查的待办事项。

需要手动检查的内容

项目文件为什么可能遗漏怎么做
Logo、图标、图片DESIGN.md 描述的是样式，而不是文件。从当前代码库中导出它们，放到新的代码库中。
登录后的页面提取只能看到公开页面。列出应用与营销网站的不同之处，比如更密集的表格或侧边栏。
状态悬停和聚焦状态会在提取看到的地方被记录；按下、禁用和错误状态往往不会。逐一点击表单和按钮，记下缺失的状态。
动效过渡和动画最多只会用文字描述。从当前的 CSS 中记下时长和缓动曲线。
断点提取会记录一个桌面端宽度和一个移动端宽度。检查平板布局，记下栏数变化的位置。
抽样之外的页面模板Pro 会抽样大约五个关键页面。对于任何看起来不同的页面，比如文档页或结账页，单独提取。

重构之后

新网站上线后，再提取一次并对比两份文件。没有变化的令牌说明外观保住了；变化的令牌要么是你计划中的品牌升级，要么是需要修复的偏差。

任何文本 diff 都能显示变化的 hex 值和尺寸。Google 的 @google/design.md 包还提供 diff 命令，可以逐个令牌比较两个版本；DESIGN.md 详解介绍了这个格式及其工具。如果你在过程中手动编辑了文件，请用 DESIGN.md 校验器检查。

常见问题

重构前先提取你的设计系统：常见问题

尝试之前大家最常问的问题，这里都有简短回答。

不会。DESIGN.md 是一个描述样式的文本文件：颜色、字体排版、间距、圆角，以及以 HTML 和 CSS 编写的组件配方。请从当前的代码库或设计文件中导出 Logo、图标、插图和照片，并和它放在一起。

不能。提取会像访问者一样通过网址加载页面，因此不支持需要登录的页面、localhost 上的页面或私有网络中的页面。请提取公开网站，并记录下登录后的页面有哪些不同。

Pro 会抽样网站的关键页面，大约五个，并把发现的内容合并到一份 DESIGN.md 中。如果某个重要的页面模板不在其中，比如文档页或结账页，也请单独提取该页面的网址，然后对比两份文件。

新网站上线后再提取一次，然后对比两份文件。Google 的 @google/design.md 包提供 diff 命令，可以逐个令牌比较 DESIGN.md 的两个版本；任何文本 diff 工具也都能显示变化的 hex 值和尺寸。

在改动之前，先保存你的网站

粘贴你的生产环境网址。Pro 提取会抽样其关键页面，返回一份 DESIGN.md。

获取当前网站的 DESIGN.md

相关指南

查看全部 DESIGN.md 指南