没有设计师？为你的应用借鉴一套成熟的设计系统

如何挑选参考网站#

你借鉴的网站决定了你的应用大部分的感觉，所以值得在这里花十分钟。好的参考网站具备以下特点：

• 同类产品。仪表盘适合借鉴另一个仪表盘，而不是时装店。
• 信息密度相近。如果你的应用以表单和表格为主，就挑一个有表单和表格的网站，而不是只有一个大横幅的网站。
• 一个明确的操作色。当只用一种颜色标示可点击的内容时，换品牌只需替换这一个色系。
• 易读的字体。在手机上打开网站，读一段文字。如果读起来舒服，这套字号层级就值得借鉴。
• 浅色或深色，符合你的需要。把一个以深色为主的系统改成浅色，相当于重新设计，而不是微调。
• 外观本身不能就是品牌。如果仅凭颜色就能认出这个网站，你要改的东西就太多了。

DESIGN.md 示例库可以按分类筛选，方便你快速比较几个候选网站。

步骤#

1. 1

   列出两三个候选网站

   参考上面的特点。把你喜欢的页面截图保存下来，方便之后做决定。

2. 2

   获取你最喜欢的那个网站的 DESIGN.md

   从它的示例库页面复制，或者在 Design Extractor 首页粘贴网址并运行一次 Pro 提取。Pro 会抽样网站的关键页面，返回一个包含颜色、字体排版、间距、圆角和组件配方的文件。刚接触这个格式？请阅读什么是 DESIGN.md。

3. 3

   改成你自己的

   修改品牌色系、字体（如果是商业字体）、名称和语调。下面的提示词可以一次完成。

4. 4

   放进仓库，并让智能体指向它

   以 DESIGN.md 为名保存在仓库根目录。Claude Code 和 Cursor 指南中有需要添加的指引。

5. 5

   检查

   把编辑后的文件粘贴到免费的 DESIGN.md 校验器中。它会检查结构，并标出对比度不足的文字颜色。

实例演示：Notion#

假设你喜欢 Notion 的感觉。下面是示例库 DESIGN.md 记录的它的设计系统，以及你应该保留和修改的部分。

该保留什么，该修改什么

### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

用一个提示词改成你自己的#

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

为什么不要整体照搬一个品牌#

本指南使用的文件#

示例库中的一些不错的起点。每个页面都有完整的 DESIGN.md、配色和字体样张。

• 
  软件与 SaaS · Productivity & Notes

  Notion

  Notion 营销首页以深海军蓝（#02093a）的首屏区块搭配浅色（#f6f5f4）的主体背景，所有文字层级统一使用定制字体 NotionInter。设计采用 12 栏网格，栏间距为 28px，圆角体系兼顾两种规格：卡片使用 8px，药丸形按钮使用 9999px。浮层元素则采用多层递进式阴影系统。品牌蓝（#2537b1）用于行动按钮与重点强调，从 gray-200 到 gray-900 的语义化灰阶则负责所有文字与背景面的层级划分。

• 
  旅行、交通与物流

  Airbnb

  Airbnb 的设计系统以一款专有的可变字体（Airbnb Cereal VF）为核心，配色接近单色的中性色调，以深炭色（#222222）和浅灰色为基调。品牌标志性的珊瑚粉色"Rausch"（#ff385c）仅用于主要行动按钮和标志。布局采用响应式图片卡片网格，图片与文字的比例宽松，卡片带有 20px 的柔和圆角，并通过多层环境阴影营造细微的层次感，避免强烈的明暗对比。搜索栏是一个醒目的胶囊形容器，统一了用户的核心操作。

• 
  商业与专业服务

  Shopify

  Shopify 营销首页采用极具冲击力的全幅视频主视觉，近黑色背景（#02090a）与上方白色导航栏形成鲜明对比。品牌主色为醒目的薄荷绿（#36f4a4），克制地用于高亮和交互状态。字体分工明确：展示与编辑类标题使用 NeueHaasGrotesk，界面正文使用 Inter-Variable。CTA 按钮采用全圆角药丸形（border-radius: 9999px）。整体风格自信、高对比、充满憧憬，旨在将访客转化为商家。

浏览全部 DESIGN.md 示例