OpenDesign 中的 Figma 风格设计系统：从 DESIGN-id 规范到 tokens.css 与组件实现的完整解读

OpenDesign 中的 Figma 风格设计系统：从 DESIGN-id 规范到 tokens.css 与组件实现的完整解读

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design

本文聚焦 OpenDesign 仓库中随附的 Figma 风格设计系统包（design-systems/figma），以 DESIGN-id.md 视觉规范为骨架，结合 tokens.css、components.html 等源码级产物，系统讲解「严格黑白界面外壳 + 彩色产品内容」的双层设计哲学、figmaSans 可变字重体系、pill/圆形几何按钮、虚线焦点指示等核心规则，并给出可直接复用的 Agent Prompt 配方与实现证据，帮助你在生成原型、落地页、仪表盘等设计任务中复现 Figma 风格的高保真页面。

1. 设计系统包结构：一份面向 Agent 与审阅者的完整契约

在 OpenDesign 中，每个品牌风格包都遵循 Design System 2.0 的「文档 + Token + 组件 + 预览」四层结构。Figma 包位于 design-systems/figma，由 manifest.json 声明包元数据与文件清单：

根据 USAGE.md 约定的阅读顺序：先读 USAGE 理解包契约 → 读 DESIGN 掌握视觉意图与反模式 → 把tokens.css粘贴到首个 artifact 的<style>块再写组件 CSS → 用components.manifest.json获取紧凑组件清单，需要精确选择器或状态时打开components.html→ 需要视觉抽查时查看preview/页面。需要特别注意的是，本包源自 OpenDesign 精选的内置 fixture（见 manifest.json 的source.type: "bundled"与 source/evidence.md），不宣称来自上游品牌仓库的原始抓取，因此不应声称拥有原始上游来源证据。

2. 视觉主题：设计工具设计了自己的界面

2.1 双层结构：无色的外壳 + 彩色的内容

Figma 风格最核心的特征是界面外壳与产品内容严格分离：整个交互框架（chrome）只使用#000000与#ffffff两个颜色，而 hero 区与产品展示区则爆发出多色渐变（电光绿、亮黄、深紫、热粉）。这一分离意味着设计系统本身是无色的，把产品的彩色输出当作主角内容——营销页本质上是一面展示彩色艺术品的白色画廊墙。

该决策在 tokens.css 中被显式注释为品牌身份的三句话之一："Monochrome interface absolutely — pure black (#000000) for all text, borders, and solid buttons; pure white (#ffffff) for all backgrounds; no mid-tones in the chrome layer whatsoever."（界面严格单色——所有文本、边框与实心按钮为纯黑，所有背景为纯白，外壳层没有任何中间调。）

2.2 可变字重的微观层次

figmaSans 自定义可变字体在极细（weight 320）与粗体（weight 700）之间调制，且停留在多数字体系统从不触及的中间档位：320、330、340、450、480、540。这种颗粒化的字重控制让每个文本元素拥有精确校准的视觉重量，通过微观差异而非「regular vs bold」这种粗钝工具建立层级——330 与 340 的差异几乎不可见，但在结构上意义重大。

2.3 圆形与 pill 几何、虚线焦点

与可变字体并列的另一大识别特征是 circle-and-pill 几何：按钮使用 50px 半径（pill）或 50%（图标按钮的正圆），营造有机的、工具调色板般的质感。虚线焦点指示器（dashed 2px）是有意为之的设计选择——它呼应 Figma 编辑器中的选区手柄（selection handles），让网站的 UI 语言引用产品自身的 UI 语言，是一种连接网站与产品的元设计（meta-design）选择。

核心特征速查：

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

3. 颜色系统：二元单色与玻璃叠加

3.1 主色（Primer）

注意：Figma 营销站的界面层只使用这两种颜色，所有鲜艳颜色只出现在产品截图、hero 渐变与嵌入内容中。有趣的是，在黑白系统中黑色本身就是强调色（accent）——tokens.css 中--accent: #000000的注释直白地写道："black IS the accent in a monochrome system"，--accent-on: #ffffff保证黑底白字对比。

3.2 表面与背景（Surface & Background）

3.3 渐变系统

• Hero 渐变：使用电光绿、亮黄、深紫、热粉的多停靠点渐变，是 hero 区的视觉签名，代表工具带来的创作可能性。
• 产品分区渐变：各个产品区域（Design、Dev Mode、Prototyping）的展示区可分别采用不同颜色主题。

语义色（success/warn/danger）在黑白外壳中作为例外保留：--success: #16a34a、--warn: #eab308、--danger: #dc2626。

4. 字体排印规则：可变精度、轻量基底与负字距

4.1 字体族

4.2 层级总表

4.3 核心原则

• 可变字体精度：使用多数系统从不触碰的字重 320–540，用细微差异而非剧烈跳变建立层级。
• 轻量即基底：多数正文使用 320–340（比常见的 400「regular」更轻），营造空灵、通透的阅读体验，契合设计工具美学；正文字重上限为 450。
• 处处 kern：每个文本元素启用 OpenType"kern"——components.html 的body与标题、按钮、tab 上都显式写有font-feature-settings: "kern"，注释强调"OpenType kern on all text — structural, not decorative."（结构性而非装饰性）。
• 默认负 tracking：连正文都使用 -0.1px 至 -0.26px 的 letter-spacing，显示级文本进一步压缩至 -0.96px、-1.72px。Token 侧用--tracking-display: -0.02em（86px 归一化后即 -1.72px）表达。
• Mono 承载结构：figmaMono 大写 + 正 letter-spacing（0.54px–0.6px），形成技术路标式标签。

components.html中的实现细节值得注意：标题默认字重为 400（h1/h2），而 h3 副标题用字重 540、line-height: 1.35、letter-spacing: -0.01em；.lead用字重 330、letter-spacing: -0.007em；.mono-label则用 18px figmaMono、大写、letter-spacing: 0.54px——与 DESIGN 文档的层级表逐项对应。

5. 组件样式：按钮、卡片、导航与标志性组件

5.1 按钮体系

源码实现上，.btn基类统一border-radius: var(--radius-sm)（50px pill），.btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }落实虚线焦点；hover 用玻璃叠加而非改色：.btn-black:hover背景为rgba(0, 0, 0, 0.85)，.btn-white:hover背景为rgba(0, 0, 0, 0.04)。

5.2 卡片与容器

• 背景：纯白（--bg）
• 边框：无或最小
• 半径：6px（小容器）、8px（图片、卡片、对话框）
• 阴影：--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)的细微到中等浮起效果
• 内容：产品截图作为卡片内容

5.3 导航

白色底上的干净水平导航；黑色 Figma wordmark 徽标；pill 形（50px）产品 tab 导航；黑色文本链接 + 1px 下划线装饰；黑色 pill 按钮 CTA；hover 通过 CSS 变量改变文本颜色。

5.4 标志性组件

• 产品 Tab 栏（Product Tab Bar）：水平 pill 形（50px 半径）tab，每个 tab 代表一个产品域（Design、Dev Mode、Prototyping 等），激活态高亮。实现上.tab用font-weight: 480、padding: 8px 18px，.tab.active为黑底白字，.tab:hover为rgba(0, 0, 0, 0.06)。
• Gradient Hero 区：全宽多彩渐变背景，白色文本叠加 86px 显示标题，产品截图在渐变内浮动。
• 虚线焦点指示器：所有可交互元素在聚焦时使用dashed 2px轮廓。

6. 布局原则：8px 基础网格与画廊式留白

6.1 间距系统

基础单元 8px；完整刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px。Token 化后为--space-1（4px）到--space-12（48px），并配套--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px的分区节奏变量。

6.2 网格与容器

• 容器最大宽度：1920px（--container-max），桌面/平板/手机侧 gutter 分别为 40px / 24px / 16px
• Hero：全宽渐变、内容居中
• 产品分区：交替展示
• Footer：深色全宽区块
• 响应范围 559px–1920px

6.3 留白哲学

• 画廊式节奏：宽裕间距让每个产品分区像独立展品一样呼吸。
• 彩色分区作为视觉呼吸：hero 渐变与产品展示在单色界面区块之间提供色彩喘息。

6.4 Border Radius 刻度

Token 侧对应--radius-sm: 50px（pill，所有交互元素）、--radius-md: 8px、--radius-pill: 9999px。

7. 深度与层级：以背景对比而非阴影取胜

阴影哲学：Figma 克制地使用阴影。主要的深度机制是背景对比（彩色/深色分区上的白色内容）以及产品截图本身固有的维度感。另一个细节是--elev-ring: 0 0 0 1px var(--border)（1px 描边替代阴影）与--focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8)（键盘导航的焦点回退）。

8. 响应式行为

8.1 Breakpoint

8.2 折叠策略

• Hero 文本：86px → 64px → 48px
• 产品 tab：移动端水平滚动
• 功能分区：堆叠为单列
• Footer：多列 → 堆叠

components.html使用两档媒体查询实现：@media (max-width: 1023px)切换 gutter 与分区内边距、hero-grid变单列、features-grid变双列；@media (max-width: 639px)进一步把features-grid折叠为单列。

9. 无障碍与焦点：虚线 2px 是签名模式

DESIGN 文档将「对所有交互元素应用虚线 2px 焦点轮廓」明确列为 Do 项，并强调它是签名式无障碍模式（signature accessibility pattern）；对应地，「不要使用实线焦点轮廓」是 Don't 项。该规则在 components.html 中落实到.btn:focus-visible与.tab:focus-visible两处，均使用outline: 2px dashed var(--fg); outline-offset: 2px，保证键盘导航时焦点清晰可见且与产品编辑器的选区语言一致。

10. Token 契约与派生产物：tokens.css 是唯一事实来源

本包遵循「单一事实来源 + 派生产物」的工程约束：source/evidence.md 明确说明design-tokens.json与tailwind-v4.css是派生输出，应从 token 契约报告与样式表重新生成，不应手工编辑。

• TOKEN_SCHEMA 契约：design-tokens.json 汇总 56 个 Token，按 A1-identity（8）、A1-structure（18）、A2（26）、B-slot（4）分层，score: 100、grade: "excellent"、recommendRebuild: false，每个 Token 都带sources指向 tokens.css 的具体声明行。
• 组件覆盖审计：components.manifest.json 记录 34 个选择器、17 个类、19 个元素，undeclaredReferenced: []表明组件引用的所有 Token 都有声明，无悬空引用；同时列出unusedDeclared（如--danger、--focus-ring等在 fixture 中声明但未被引用的 Token），供扩展组件时直接使用。
• Tailwind v4 集成：tailwind-v4.css 通过@theme把 CSS 变量映射为--color-*、--text-*、--radius-*、--shadow-*、--duration-*、--spacing-*等 Tailwind 命名空间，让你既能写原生 CSS 变量，也能用 Tailwind 工具类消费同一套 Token。

11. 给 Agent 的 Prompt 指南：可直接复用的配方

11.1 快速颜色参考

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

11.2 组件 Prompt 示例

• 「在鲜艳的多色渐变（绿、黄、紫、粉）上创建 hero。标题 86px figmaSans 字重 400、行高 1.0、letter-spacing -1.72px。白色文本。白色 pill CTA 按钮（50px 半径，8px 18px padding）。」
• 「设计产品 tab 栏，pill 形按钮（50px 半径）。激活态：黑底白字；非激活态：透明、黑色文本。figmaSans 20px 字重 480。」
• 「构建章节标签：figmaMono 18px、大写、letter-spacing 0.54px、黑色文本。启用 kern。」
• 「创建正文：20px figmaSans 字重 330、行高 1.40、letter-spacing -0.14px。白底纯黑。」

11.3 迭代指南

1. 精确使用可变字重档位：320、330、340、450、480、540、700
2. 界面永远黑 + 白——绝不给外壳添加颜色
3. 虚线焦点轮廓，而非实线
4. 正文 letter-spacing 永远为负，mono 标签永远为正
5. 按钮/tab 用 pill（50px），图标按钮用圆形（50%）

11.4 Do's and Don'ts 总结

Do：用 figmaSans 精确可变字重（320–540，颗粒化字重控制本身就是设计）；保持界面严格黑白（颜色只来自产品内容）；所有交互元素用 pill（50px）与圆形（50%）几何；应用虚线 2px 焦点轮廓；所有文本启用"kern"；用 figmaMono 大写 + 正 letter-spacing 做标签；全页应用负 letter-spacing（-0.1px 至 -1.72px）。

Don't：不要添加界面颜色（单色调色板是绝对的）；不要用标准字重（400/500/600/700）——用可变字体的独特档位（320/330/340/450/480/540）；不要在按钮上用尖锐直角——只能 pill 与圆形几何；不要用实线焦点轮廓——虚线是签名；不要把正文字重提到 450 以上——轻量美学是核心；不要在正文字体上用正 letter-spacing——永远为负。

结语

这份 Figma 风格设计系统包的价值在于：它把「黑白外壳 + 彩色内容」「可变字重微观层级」「pill/圆形几何」「虚线焦点」等高度凝练的视觉判断，编码成了机器可读、可审计、可派生的工程资产。无论你是通过 DESIGN-id.md 建立视觉直觉、通过 tokens.css 获取 Token 值、通过 components.html 核对组件细节，还是直接用本文第 11 节的 Prompt 配方驱动编码 Agent 生成页面，都能确保输出在视觉上忠于 Figma 的品牌语言，在工程上忠于 OpenDesign 的 Token 契约。

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design