指南

把两个参考网站融合成一套原型设计

“让它感觉像 Notion 加上 Stripe。”客户经常这样给原型提需求。每个网站都有一份 DESIGN.md 时，你就能把这句话变成一份具体的规范：并排比较令牌，决定以哪个文件为主，然后合并。

Design Extractor 给你这两个文件。合并由你来完成，可以手动，也可以借助你的编程智能体，本指南会演示这两种方法。

面向做原型的设计师和代理机构。更新于 。

你将获得

  • 逐个令牌比较两份 DESIGN.md 文件，让差异一目了然。
  • 一份合并方案：以一个文件为基础，从另一个文件中取用指定的令牌组。
  • 合并后的 DESIGN.md，手动完成或由你的智能体用下面的提示词完成。
  • 一次对比度检查，确保融合后依然易读。

融合是怎么做的

融合不是取平均值。一半用这套配色、一半用那套配色，得到的网站哪个都不像。行之有效的做法是：一个基础文件，加上从另一个文件中取用的几个指定部分：

  • 基础文件提供结构：字号层级、间距、圆角和组件配方。
  • 点缀文件提供完整的组，比如它的主色系或展示字体，绝不是零散的单个数值。

两个文件都遵循 Google 的 DESIGN.md 规范，所以各组可以一一对应：colors、typography、rounded、spacing 和 components。完整结构请参阅 DESIGN.md 包含什么。

步骤

  1. 获取两个文件

    如果它们在示例库中，直接复制；否则在 Design Extractor 首页分别粘贴每个网址，各运行一次 Pro 提取。

  2. 把它们并排放在一起

    比较主色、背景、字体、字号和圆角，如下表所示。

  3. 选定基础文件

    选择布局和信息密度与原型相符的网站。

  4. 写明点缀文件提供什么

    以令牌组的形式写下来，比如“它的主色系”。

  5. 手动合并或借助智能体合并

    两种方法都在下文。把结果以 DESIGN.md 为名保存在原型仓库中。

  6. 检查对比度和结构

    把合并后的文件粘贴到免费的 DESIGN.md 校验器中。

实例演示：Notion 遇上 Stripe

示例库中的两份真实文件：Notion 的 DESIGN.md 和 Stripe 的 DESIGN.md。两者都提取自品牌的公开网站，并非官方品牌规范。

NotionStripe
主色#0075DE#533AFD
背景#FFFFFF#FFFFFF
文字#000000#061B31
字体Notion Inter, Lyon TextSohne
最大字号hero-display, 96px, 字重 600hero-display, 56px, 字重 500
正文字号body, 16px, 字重 400body-lg, 18px, 字重 300
按钮圆角8px4px
颜色令牌2021
组件配方1471

一种融合方式

以 Notion 为基础，取用它的字体、间距、圆角和组件，再让 Stripe 提供它的主色系（primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft）。这就是经典的“我们的布局，他们的活力”需求。

确定方案之前，先检查一下数字。Stripe 的主色在 Notion 的背景上，对比度为 6.1:1。Notion 的 on-primary 文字在新主色上的对比度达到 6.1:1。按照 WCAG AA，正文文字至少需要 4.5:1；大号文字和图标需要 3:1。

有一个陷阱：Notion 自己的主色 #0075DE 在它的文件中出现了 65 次，大部分在组件配方里。只替换顶部的令牌是不够的，每一处都要改。

上文所述手动合并的示意图，由本页根据示例库中的两个文件拼合而成：Notion 的令牌加上 Stripe 的主色系，有删节。这不是 Design Extractor 的功能，也不是智能体的输出。
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

手动合并

  1. 把基础文件复制为 DESIGN.md，并修改它的 name。
  2. 在 colors 中，把基础文件的主色系替换为点缀文件的值。
  3. 在整个文件中搜索每个旧的 hex 值并替换。组件配方会在 CSS 中重复使用这些颜色，所以只改令牌列表是不够的。
  4. 改写 Overview 和 Colors 的文字说明，让它们描述融合后的效果，而不是任一品牌。
  5. 在校验器中检查文件，并修复所有对比度警告。

借助智能体合并

把两个文件都保存在原型仓库中，比如放在 design/ 下，然后给你的智能体一个提示词，写明基础文件、要取用的组以及要运行的检查。这个提示词是为本指南编写的，使用了真实的文件名和令牌名称。

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

像检查其他改动一样检查返回的结果：阅读 diff，然后把文件粘贴到校验器中。打字的工作由智能体完成，提示词里的决策仍然由你来做。

常见问题

把两个网站的设计融合为一：常见问题

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

不能，没有合并功能。每次提取只返回一个网站的 DESIGN.md。你可以手动合并两个文件，或者用类似本指南中的提示词让你的编程智能体来合并，然后检查结果。

两个，有时三个。一个文件作为基础，提供结构：字号层级、间距、圆角和组件。其他文件提供指定的部分，比如一个色系或一种展示字体。从更多文件中混合数值，结果会显得东拼西凑。

以布局和信息密度与原型相符的那个为基础。如果客户想要一个沉静、类似文档的产品，再加上另一个网站的颜色，那么沉静的网站就是基础，另一个网站提供颜色，而不是反过来。

把合并后的文件粘贴到免费的 DESIGN.md 校验器中。它会检查结构，并标出对比度不足的文字颜色。然后在给客户看之前，用它构建一个真实的页面。

为你的需求获取这两个文件

粘贴每个参考网站的网址，获取它的 DESIGN.md，然后进行比较和合并。

从任意网站获取 DESIGN.md

相关指南

查看全部 DESIGN.md 指南