指南

让 Claude Code 和 Cursor 构建与网站风格一致的界面

让编程智能体做一个“简洁的设置页面”，你得到的会是一个千篇一律的页面。给它一份来自你喜欢的网站的 DESIGN.md，它就会使用该网站真实的颜色、字号层级、圆角和组件规则来构建，而不是靠猜。

本指南演示在 Claude Code 和 Cursor 中的完整流程，并以示例库中 Linear 的文件为例。

面向使用 AI 编程智能体开发的开发者。更新于 。

你将获得

  • 一份你喜欢的网站的 DESIGN.md，保存在仓库中，你的智能体可以读取。
  • 在 CLAUDE.md 中为 Claude Code 加一段简短指引，为 Cursor 加一条项目规则，让每个界面任务都从这个文件出发。
  • 点名令牌的提示词，让智能体使用精确数值，而不是近似猜测。
  • 一套快速检查流程，找出智能体偏离的地方。

为什么 DESIGN.md 比截图更好

截图只给智能体一堆像素去猜。它能大致抓住氛围，但数值会出错：一个差不多的蓝色、一个差了几像素的圆角、一个因为看着像而选的字体。每做一个新页面就再猜一次，应用的风格会慢慢走样。

DESIGN.md 则给它精确的数值。文件遵循 Google 的 DESIGN.md 规范：顶部的 YAML front matter 存放令牌（hex 颜色、字体族和字号、圆角、组件），下面的 Markdown 说明每个令牌该用在哪里。刚接触这个格式？请阅读什么是 DESIGN.md。

步骤

  1. 挑一个界面感觉和你要做的产品相近的网站

    信息密度相近的产品页面，比带大横幅的落地页更合适。如果你在做仪表盘，就挑一个有仪表盘的产品。先看看 DESIGN.md 示例库：文件可能已经在那里了。

  2. 获取它的 DESIGN.md

    从示例库页面复制，或者在 Design Extractor 首页粘贴网址并运行一次 Pro 提取。Pro 会抽样网站的关键页面，一次提取至少需要一分钟。

  3. 以 DESIGN.md 为名保存在仓库根目录

    把它放在 README.md 和 AGENTS.md 旁边并提交，这样每个分支、每位队友的智能体读取的都是同一个文件。

  4. 让你的智能体指向它

    为 Claude Code 在 CLAUDE.md 中加一段简短指引，或为 Cursor 加一条项目规则。代码块见下文。

  5. 用文件中的术语提出界面需求

    在提示词中点名令牌和组件（primary、body-md、某个按钮配方），并要求智能体列出它找不到的值，而不是自己编一个。

  6. 对照文件检查结果

    在接受修改之前，对照 DESIGN.md 检查颜色、字体、圆角和状态。

实例演示：Linear

示例库中的 Linear DESIGN.md 通过一次 Pro 提取从 linear.app 获取，抓取了 5 个页面。它包含 17 个颜色令牌、16 种文字样式和 12 个圆角。这就是你的智能体工作的依据。

颜色

字体排版

hero-displayDesign is intelligence made visibleInter Variable72px / 510 / 1
display-lgDesign is intelligence made visibleInter Variable64px / 510 / 1
display-mdDesign is intelligence made visibleInter Variable48px / 510 / 1
heading-lgDesign is intelligence made visibleInter Variable32px / 590 / 1.15
title-mdDesign is intelligence made visibleInter Variable20px / 590 / 1.35
body-lgDesign is intelligence made visibleInter Variable17px / 400 / 1.6

形状

xs · 2px
sm · 4px
sm-2 · 4.4625px
md · 5px
md-2 · 6px
lg · 8px
lg-2 · 9px
xl · 12px

根据 Linear 的 DESIGN.md 渲染的前 12 种颜色、6 种文字样式和 8 种圆角。点击色块即可复制 hex 值。

文件开头部分（有删节）：17 种颜色中的 8 种、16 种文字样式中的 2 种，以及 12 个圆角中的 4 个。这些就是智能体照搬的精确数值。
---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

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

文件如何描述外观

令牌下方的文字说明告诉智能体每个值该用在哪里。它是这样开头的：

Linear's marketing surface reads like the product itself: a near-black Void canvas (canvas, #08090A) with charcoal panels stacked a half-step lighter, fenced by 1px hairlines rather than shadows. The mood is engineering-grade and restrained. Realistic product UI mockups, a customer logo strip and Berkeley Mono micro-labels ("FIG 0.1") stand in for illustration. Nothing shouts; the page earns attention through precision.

文件给智能体的规则

Do's and Don'ts 章节把外观变成规则。前几条如下：

该做

  • Reserve Linear Indigo (primary, #5E6AD2) for focus and interactive accents. Every measured focus state is a 1px solid #5E69D1 outline with a 2px offset.
  • Shape every button as a pill with rounded.full. button-ghost, button-ghost-2 and button-ghost-3 all measure 9999px.
  • Keep control heights on the observed ladder: button-ghost and button-ghost-2 at 32px, button-ghost-4 at 29px, button-ghost-3 at 24px, and sidebar-nav-item and the icon buttons at 28px.

不该做

  • Don't use weights other than 400, 510 and 590, and never substitute a static 600 or 700 for heading-lg or title-md.
  • Don't add a third typeface. Inter Variable carries everything, and Berkeley Mono is limited to micro figure labels.
  • Don't use accent-blue, danger or success for marketing chrome; they belong inside product mockups.

组件

文件中有 30 个组件配方，以 HTML 和 CSS 编写。其中 13 个通过了与实时页面的核对；对于其余的配方，文件说明了它们未通过或无法检查的原因。整个文件大约 276,000 个字符，大部分是配方。这就是为什么要让智能体指向它，而不是把它粘贴到提示词里。

让你的智能体指向这个文件

大多数智能体不会主动打开 DESIGN.md。在它们已经会加载的指令中加几行就能解决。在 Claude Code 中，把下面的内容添加到仓库根目录的 CLAUDE.md：

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

在 Cursor 中，添加一条项目规则。把下面的内容保存为 .cursor/rules/design.mdc；alwaysApply 会让它在项目的每个请求中加载：

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

使用指引，而不是把文件粘贴到指令中。Pro DESIGN.md 为从网站挑选的每个组件都提供了配方，所以篇幅较长，而你的智能体只在做界面相关的工作时才需要它。

使用令牌的提示词

点名文件和其中的令牌，给智能体留一条退路，而不是逼它去猜。这些提示词是为本指南编写的，使用了 Linear 真实的令牌名称；把任务换成你自己的即可。

Claude Code

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

Cursor

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

在 Cursor 中，@DESIGN.md 会把文件附加到聊天中；当任务主要与外观有关时，在规则之外这样做会更有帮助。

结果应该是什么样子？大致像这张卡片，它由本页直接根据令牌绘制。它展示的是这些数值的效果，而不是智能体的产出。

规划下一个版本

所有任务、日期和决策集中在一处，让团队按时交付。

开始构建联系销售
本页根据 Linear 的令牌绘制的示意图：canvas #08090A、ink #F7F8F8、primary #5E6AD2 和 button-ghost.rounded 9999px。它不是编程智能体的输出，并且只有当你的设备上装有该字体时才会显示该字体。

检查智能体构建的内容

  • 颜色。在 diff 中搜索 hex 值。每一个都应该出现在 DESIGN.md 中。出现新的值，通常意味着智能体在猜。
  • 字体。很多品牌使用你无法直接使用的商业字体。文件的 Typography 章节通常会给出一个开源替代字体；确保智能体加载的是它，而不是随便一个后备字体。
  • 圆角和间距。按钮和卡片应该使用文件中的圆角令牌，而不是到处都用 8px 这样的默认值。
  • 状态。悬停和聚焦样式是每个组件配方的一部分。用 Tab 键在页面中切换，检查聚焦环。
  • 被标注的配方。如果文件把某个配方标记为 flagged，它的几何尺寸是近似值。请把这个组件和真实网站对比一下。

如果你手动编辑了 DESIGN.md，在智能体再次读取它之前，用免费的 DESIGN.md 校验器检查一下。

常见问题

在 Claude Code 和 Cursor 中还原网站风格：常见问题

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

不需要。把它以 DESIGN.md 为名保存在仓库根目录一次，然后在 Claude Code 的 CLAUDE.md 或 Cursor 的项目规则中指向它。当任务涉及界面时，智能体就会读取它。带组件配方的 Pro DESIGN.md 篇幅较长，用指引的方式可以让你的提示词保持简短。

不会，这也不是目的。智能体拿到的是网站的令牌（颜色、字体、圆角）、组件配方和规则。你的布局、内容和功能仍然是你自己的。未通过实时网站核对的配方会在文件中标记为 flagged，请把它们当作近似值看待。

适用。任何能读取你仓库中文件的智能体都可以使用 DESIGN.md。在该智能体已经会读取的指令中指向它，比如 AGENTS.md 或 .github/copilot-instructions.md，或者在提示词中写明这个文件。

可以。每个示例库页面都提供完整的 DESIGN.md 供你复制。示例库文件提取自各品牌的公开网站，并非官方品牌规范。如果网站不在示例库中，在首页粘贴它的网址并运行一次提取即可。

为你喜欢的网站获取 DESIGN.md

粘贴任意公开网址。Pro 提取会抽样网站的关键页面，返回一份你的智能体可以读取的 DESIGN.md。

从任意网站获取 DESIGN.md

相关指南

查看全部 DESIGN.md 指南