企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本篇技术指南以仓库内法语版设计规范 design-systems/figma/DESIGN-fr.md（英文原文见 design-systems/figma/DESIGN.md）为骨架，结合 design-systems/figma/tokens.css、design-systems/figma/components.html 等源码级资产，系统拆解如何以 Agent 提示词的方式复刻 Figma 营销站的视觉语言。读完你将掌握：figmaSans 可变字重的非常规字重档位如何构建层级、黑白二元界面如何与彩色产品内容共存、药丸/圆形几何与虚线焦点轮廓的具体取值，以及这套设计系统在 OpenDesign 仓库中如何以"可移植设计系统包"的形式被组织、校验和消费。

1. 视觉主题与氛围：工具为自己设计的元设计课

Figma 的界面是"设计工具设计了自己"的典范。其视觉系统的核心是一套自定义可变字体figmaSans，在极细（weight 320）与粗体（weight 700）之间，插入了大多数排版系统从未触及的非常规档位：330、340、450、480、540。这种对字重的颗粒化控制，让每个文本元素都拥有精确校准的视觉重量——层级不是靠粗鲁的"常规 vs 粗体"二元对比，而是靠微差（micro-differences）构建的。

页面的二元性是这套系统的另一根支柱：

• 界面铬层（chrome）严格黑白：整个界面层仅检测到#000000与#ffffff两种颜色；
• hero 区与产品橱窗色彩爆发：电光绿、亮黄、深紫、玫粉构成的多色渐变只属于产品内容层。

这意味着设计系统本身是无色的——Figma 的营销页本质上是一面白色的画廊墙，墙上挂的是彩色的作品。除字体外，其最显著的特征是圆形与药丸几何：按钮使用 50px 圆角（药丸）或 50%（正圆，用于图标按钮）；而dashed 2px虚线焦点轮廓是对 Figma 编辑器选中手柄的刻意致敬——网站的 UI 语言在引用产品的 UI 语言，这是贯穿全文的元设计选择。

关键特征清单（继承自原文档）：

• 自定义可变字体 figmaSans，字重档位：320、330、340、450、480、540、700
• 界面铬层严格黑白——颜色只存在于产品内容中
• figmaMono 用于大写技术标签，配以宽松字距
• 药丸（50px）与圆形（50%）按钮几何
• 虚线焦点轮廓，呼应 Figma 编辑器选中手柄
• 鲜艳的多色 hero 渐变（绿、黄、紫、粉）
• 全局启用 OpenType"kern"特性
• 全程负字距——连正文都是 -0.14px 到 -0.26px

2. 色彩系统：绝对黑白的二元世界

2.1 主色（Primary）

注意：Figma 营销站只用这两种颜色作为界面层。所有鲜艳颜色只出现在产品截图、hero 渐变与嵌入内容中。

2.2 表面与背景（Surface & Background）

2.3 渐变系统（Gradient System）

• Hero 渐变：多停靠点鲜艳渐变（电光绿、亮黄、深紫、玫粉），是 hero 区的视觉签名，象征工具的创作可能性；
• 产品分区渐变：Design、Dev Mode、Prototyping 等各产品区域可在各自橱窗中使用独立的色彩主题。

2.4 tokens.css 中的落地：黑白系统的 token 语义

在 design-systems/figma/tokens.css 中，这套二元世界观被编码为一组语义 token。值得注意的 schema 决策（文件头注释有明确说明）：

• --bg: #ffffff; --surface: #ffffff——画廊墙，无表面色调层；
• --surface-warm: var(--surface)——黑白系统没有暖色调层级，直接别名；
• --fg: #000000; --muted: rgba(0, 0, 0, 0.55)——次要文本用透明度而非灰阶；
• --accent: #000000——在单色系统中，黑色本身就是强调色（实心 CTA 背景），--accent-on: #ffffff为强调色上的前景；
• --accent-hover: rgba(0, 0, 0, 0.85)、--accent-active: rgba(0, 0, 0, 0.08)（即玻璃黑）——悬停与激活态全部通过玻璃色调叠加实现，不引入新色相；
• --border: rgba(0, 0, 0, 0.12)、--border-soft: rgba(0, 0, 0, 0.06)——边框只在结构必需处出现；
• 语义色--success: #16a34a; --warn: #eab308; --danger: #dc2626保留用于状态语义，不进入界面铬层。

在 design-systems/figma/design-tokens.json 的契约报告中，56 个声明的 token 全部有源可查（sourceBackedTokens: 56），分层为 A1-identity（8 个）、B-slot（4 个）、A2（26 个）、A1-structure（18 个），契约评分 100、评级 excellent——这意味着黑白二元并非随意命名，而是经过契约化校验的 token 体系。

3. 排版规则：以微差构建层级的可变字体

3.1 字体族

• 主字体：figmaSans，回退链：figmaSans Fallback, SF Pro Display, system-ui, helvetica
• 等宽/标签：figmaMono，回退链：figmaMono Fallback, SF Mono, menlo

3.2 完整层级表（继承原文档，逐项保留）

3.3 排版原则

• 可变字体精度：figmaSans 使用大多数系统永远不会触碰的字重——320、330、340、450、480、540。层级来自微妙的字重差异而非戏剧性跳跃。330 与 340 的差异几乎不可感知，但在结构上意义重大；
• 以轻为基：大多数正文使用 320–340（比常规 400 更轻），营造空灵、轻盈的阅读体验，呼应设计工具的美学；
• 全局 kern：每个文本元素都启用 OpenType"kern"特性——字距微调不是可选项，而是结构性的（在 components.html 中通过font-feature-settings: "kern"落实在body与标题、按钮上）；
• 默认负 tracking：连正文都使用 -0.1px 至 -0.26px 的字距，形成普遍紧凑的文本；Display 文本进一步压缩到 -0.96px 与 -1.72px；
• 等宽用于结构：figmaMono 大写 + 正字距（0.54px–0.6px）构成技术路标标签。

在 tokens.css 中，这套排版被量化为：--text-xs: 12px; --text-sm/--text-base: 16px; --text-lg: 20px; --text-xl/--text-2xl: 26px; --text-3xl: 64px; --text-4xl: 86px；--leading-tight: 1.00；--tracking-display: -0.02em（即 86px 字号归一化后的 -1.72px）。正文的 -0.14px 与等宽标签的 +0.54px 则按组件内联应用。

4. 组件样式：药丸、圆形与虚线焦点

4.1 按钮四件套

黑色实心（药丸）

• 背景：纯黑#000000；文本：纯白#ffffff
• 圆角：图标按钮为圆形（50%）
• 焦点：2px 虚线轮廓；最大强调级

白色药丸

• 背景：纯白#ffffff；文本：纯黑#000000
• 内边距：8px 18px 10px（垂直不对称）
• 圆角：药丸（50px）；焦点：2px 虚线轮廓
• 深色/彩色表面上的标准 CTA

玻璃黑

• 背景：rgba(0, 0, 0, 0.08)（微暗叠加）；文本：纯黑
• 圆角：圆形（50%）；焦点：2px 虚线轮廓
• 浅色表面上的次要操作

玻璃白

• 背景：rgba(255, 255, 255, 0.16)（磨砂玻璃）；文本：纯白
• 圆角：圆形（50%）；焦点：2px 虚线轮廓
• 深色/彩色表面上的次要操作

在 components.html 的参考实现中，基础类.btn使用border-radius: var(--radius-sm)（50px 药丸）、padding: 10px 20px、font-weight: 400，悬停态通过透明度叠加实现（.btn-black:hover { background: rgba(0, 0, 0, 0.85) }、.btn-white:hover { background: rgba(0, 0, 0, 0.04) }），焦点态为.btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px }。

4.2 卡片与容器

• 背景：纯白；边框：无或极简
• 圆角：6px（小容器）、8px（图片、卡片、对话框）
• 阴影：轻微到中等的浮起效果
• 产品截图作为卡片内容

4.3 导航

• 白底上的简洁横向导航
• Logo：黑色 Figma 文字商标
• 产品标签：药丸形（50px）标签导航
• 链接：黑字，1px 下划线装饰
• CTA：黑色药丸按钮；悬停：通过 CSS 变量改变文本颜色

4.4 标志性组件

产品标签栏（Product Tab Bar）

• 横向药丸形标签（50px 圆角）
• 每个标签对应一个 Figma 产品分区（Design、Dev Mode、Prototyping 等）
• 激活标签高亮。参考实现：.tab使用padding: 8px 18px; border-radius: var(--radius-sm); font-weight: 480，.tab.active { background: var(--fg); color: var(--accent-on) }，悬停为rgba(0, 0, 0, 0.06)微灰，焦点同为 2px 虚线。

Hero 渐变区

• 全宽鲜艳多色渐变背景
• 白色文本叠加 86px Display 标题
• 产品截图悬浮于渐变之中

虚线焦点指示器

• 所有交互元素聚焦时使用dashed 2px轮廓
• 呼应 Figma 编辑器选中手柄——连接网站与产品的元设计选择

4.5 组件契约：manifest 可验证

components.manifest.json 对参考夹具做了量化校验：34 个选择器、17 个类、19 个元素、1 个样式块；组件组覆盖 buttons、inputs、cards、links、icons、typography、layout（badges、keyboard 显式标记为present: false）。关键点是"每个可见值都来自 tokens.css"——夹具本身不引入任何游离的硬编码值（undeclaredReferenced: []，即所有被引用的 token 均已声明），这正是保证跨品牌切换可靠性的机制。

5. 布局原则：画廊节奏与 8px 体系

5.1 间距系统

• 基础单位：8px
• 完整刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px

5.2 栅格与容器

• 容器最大宽度：可达1920px
• Hero：全宽渐变，内容居中
• 产品分区：交替橱窗
• Footer：全宽深色区
• 响应式范围：559px 至 1920px

5.3 留白哲学

• 画廊节奏：慷慨的间距让每个产品分区像独立展品一样呼吸；
• 彩色分区作为视觉呼吸：渐变 hero 与产品橱窗在单色界面分区之间提供色彩喘息。

5.4 圆角刻度

在 tokens.css 中，圆角被定义为--radius-sm: 50px（药丸——所有交互元素）、--radius-md/--radius-lg: 8px（卡片容器）、--radius-pill: 9999px；分区节奏由--section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 40px控制，容器则由--container-max: 1920px与三档 gutter（桌面 40px / 平板 24px / 手机 16px）约束。

6. 深度与层级：背景对比优先于阴影

阴影哲学：Figma 对阴影的使用极其克制。主要的深度机制是背景对比（白色内容置于彩色/深色分区之上）以及产品截图本身的固有立体感。tokens.css 与之对应：--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)——浮起阴影极其柔和，且.card的阴影只在 Level 2 出现。

7. 响应式行为：从 559px 到 1920px 的降级策略

7.1 断点表（继承原文档，逐项保留）

7.2 降级策略

• Hero 文本：86px → 64px → 48px
• 产品标签：移动端横向滚动
• 功能分区：堆叠为单列
• Footer：多列 → 堆叠

参考实现中，components.html 以max-width: 1023px（容器 gutter 切到平板档、hero-grid 变单列、features-grid 变两列）与max-width: 639px（容器 gutter 切到手机档、features-grid 变单列、分区纵向节奏切到手机档）两个媒体查询实现了上述降级。

8. 在 OpenDesign 中落地：设计系统包的组织与消费

8.1 包结构

这套 Figma 风格系统在仓库中不是孤立的 CSS 文件，而是一个符合 Design System 2.0 规范的可移植设计系统包。按照 design-systems/README.md 的说明，所有捆绑包共享最小机器可读结构DESIGN.md + tokens.css + manifest.json，而 Figma 包是"富包"，额外声明了：

design-systems/figma/ ├── manifest.json # 发现元数据、来源、路径契约 ├── DESIGN.md # Agent 可读的规范正文（法语版为 DESIGN-fr.md） ├── USAGE.md # Agent 与评审者的阅读顺序与使用契约 ├── tokens.css # 规范化的语义 token 样式表（唯一事实源） ├── design-tokens.json # 派生的 Design Tokens JSON（契约报告） ├── tailwind-v4.css # 派生的 Tailwind v4 @theme 映射 ├── components.html # 独立组件参考夹具 ├── components.manifest.json # 派生的组件/token 索引 ├── preview/ # 颜色、排版、间距预览页 └── source/ # 导入证据、token 契约报告

manifest.json 声明了schemaVersion: "od-design-system-project/v1"、category: "Design & Creative"、importMode: "normalized"，并将 source/evidence.md 标为审计证据：本包基于 OpenDesign 精选捆绑夹具（curated bundled fixture）派生，不声称对原始上游品牌仓库做过全新抓取。此外 manifest 的craft.suggested建议配套应用 craft/color.md 与 craft/accessibility-baseline.md 两份规范（黑白对比与虚线焦点正是可访问性基线的组成部分）。

8.2 消费方式与使用顺序

USAGE.md 规定了标准阅读顺序：先读 USAGE 理解包契约，再读 DESIGN 理解视觉意图与反模式，然后把tokens.css粘贴进第一个 artifact 的<style>块之后再写组件 CSS，需要精确选择器或状态时查阅components.html，需要视觉核对时打开preview/页面。其核心约束包括：保留 schema token 名称不变以保证跨品牌切换可靠；使用--accent表示主操作、链接、焦点态；复用components.manifest.json中的组件组；避免在复制的:roottoken 块之外使用裸 hex 值；避免脱离tokens.css单独重定义 Tailwind 或设计 token。

8.3 Tailwind v4 与 JSON 派生物

tailwind-v4.css 通过@theme块把每个 token 映射为 Tailwind 主题变量（--color-fg: var(--fg)、--font-display: var(--font-display)、--text-4xl: var(--text-4xl)、--radius-pill: var(--radius-pill)等），头部明确写着"Derived from tokens.css. Keep tokens.css as the source of truth"——即tokens.css是唯一事实源，派生物必须从它再生成（source/evidence.md 同样要求design-tokens.json与tailwind-v4.css从契约报告和 token 样式表重新生成，而非手工编辑）。

9. 做与不做（Do's & Don'ts）

应当遵循

• 使用 figmaSans 的精确可变字重（320–540）——颗粒化的字重控制本身就是设计；
• 保持界面严格黑白——颜色只来自产品内容；
• 所有交互元素使用药丸（50px）与圆形（50%）几何；
• 应用 2px 虚线焦点轮廓——标志性的可访问性模式；
• 在所有文本上启用"kern"特性；
• 标签使用 figmaMono 大写 + 正字距；
• 全程应用负字距（-0.1px 至 -1.72px）。

应当避免

• 不要给界面添加颜色——单色板是绝对的；
• 不要使用标准字重（400、500、600、700）——必须使用可变字体独特档位（320、330、340、450、480、540）；
• 按钮不要使用尖锐直角——只用药丸与圆形几何；
• 不要使用实线焦点轮廓——虚线才是签名；
• 不要把正文字重提高到 450 以上——轻盈美学是核心；
• 正文不要使用正字距——它永远是负的。

10. Agent Prompt 指南：可复制的提示词模板

10.1 快速颜色参考

• 一切：纯黑 #000000与纯白 #ffffff
• 玻璃黑：rgba(0, 0, 0, 0.08)
• 玻璃白：rgba(255, 255, 255, 0.16)

10.2 组件提示词示例（继承原文档，可直接使用）

• "在鲜艳的多色渐变（绿、黄、紫、粉）上创建一个 hero。标题 86px figmaSans 字重 400，行高 1.0，字距 -1.72px。白色文本。白色药丸 CTA 按钮（50px 圆角，8px 18px 内边距）。"
• "设计一个产品标签栏，药丸形按钮（50px 圆角）。激活态：黑底白字。非激活态：透明底黑字。figmaSans 20px 字重 480。"
• "构建一个分区标签：figmaMono 18px，大写，字距 0.54px，黑色文本。启用 kern。"
• "创建 20px figmaSans 字重 330 的正文，行高 1.40，字距 -0.14px。纯黑底白字。"

10.3 迭代指南

1. 精确使用可变字体字重档位：320、330、340、450、480、540、700；
2. 界面永远是黑 + 白——绝不给铬层加颜色；
3. 虚线焦点轮廓，不要实线；
4. 正文字距永远是负的，等宽标签字距永远是正的；
5. 按钮/标签用药丸（50px），图标按钮用圆形（50%）。

结语：从规范到可验证的包

这套 Figma 风格设计系统的价值在于它的自洽性：黑白二元的界面层、以微差建立层级的可变字重、药丸/圆形几何与虚线焦点，全部被编码进 tokens.css 这一唯一事实源，并通过 components.manifest.json 与 design-tokens.json 做契约化校验（56 个 token 全部有源、所有被引用 token 均已声明）。对于希望复刻"黑白色板 + 彩色内容"式产品营销页的开发者与 Agent，只需要按照 USAGE.md 的顺序消费包内资产、严格遵循上文第 9 节的做与不做清单，即可在 preview/ 预览页与components.html夹具的对照下，稳定地还原这套视觉语言。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成