OpenDesign 中的 Figma 设计系统深度解析黑白界面壳层、figmaSans 可变字体与精确设计语言【免费下载链接】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本文以 design-systems/figma/DESIGN-ko.md 为骨架结合仓库内 tokens.css、components.html、components.manifest.json 等实际交付物展开。读者将掌握如何复刻 Figma 式黑白画廊设计语言的完整规则可变字体权重停靠点、负字距体系、pill/圆形几何、虚线焦点以及这套 Design System 2.0 包在 OpenDesign 中作为 Agent 可消费设计契约的落地方式——包括 token 结构、Tailwind v4 映射、组件清单与预览页的用法。在 OpenDesign 的 design-systems 目录中每个品牌目录都是一个可被 Agent 直接消费的设计系统包。figma包收录了 Figma 官网上极具辨识度的视觉语言——它是一套自我设计的设计工具的界面界面壳层严格黑白色彩只存在于产品内容中。本文从 DESIGN 文档出发逐层拆解其设计决策并用仓库中的 token 与组件源码验证每一处规则。1. 视觉主题与氛围黑白画廊 彩色展品Figma 的设计系统核心是一个有趣的二元结构界面壳层chrome严格黑白——文档中记录检测到的界面颜色只有字面意义上的#000000与#ffffff两种英雄区与产品展示区充满高饱和多色渐变——电光绿、亮黄、深紫、热粉将产品截图当作展品陈列。这套白墙画廊隐喻在 tokens.css 中直接被注释为gallery wall — no surface tint画廊墙无表面色调--surface与--bg均为纯白#ffffff。让 Figma 页面脱颖而出的另一核心是自定义可变字体 figmaSans它提供了绝大多数排版系统不会使用的极端停靠点——320, 330, 340, 450, 480, 540, 700。这意味着标题层级不靠常规 vs 粗体的跳跃而是靠肉眼几乎不可辨但结构上真实存在的微差例如 330 与 340 之间来建立视觉权重。此外还有几项贯穿全文的标志性设计特征figmaMono 等宽字体 宽字距 大写用于技术标签按钮采用 pill50px 圆角或圆形50%几何所有可交互元素使用dashed 2px虚线焦点轮廓呼应 Figma 编辑器里的选择手柄全局启用 OpenTypekern特性正文甚至也使用-0.14px到-0.26px的负字距。2. 颜色体系与角色分工Primary界面主色色值用途纯黑#000000所有文本、所有实心按钮、所有边框——界面唯一的颜色纯白#ffffff所有背景、白色按钮、深色表面上的文字——二进制的另一半在 tokens.css 中可以看到这一原则被忠实地 token 化--fg: #000000; --fg-2: #000000; /* 黑白系统无次级墨色层 */ --accent: #000000; /* 在严格黑白系统中黑色本身就是强调色 */ --accent-on: #ffffff; --accent-hover: rgba(0, 0, 0, 0.85); --accent-active: rgba(0, 0, 0, 0.08); /* glass dark —— 次级按钮背景 */值得注意的 schema 决策--accent强调色直接绑定纯黑而不是某个品牌色。文档注释明确写道 black IS the accent in a monochrome system。Surface 与背景层级纯白#ffffff页面背景与卡片表面--bg/--surface玻璃黑rgba(0, 0, 0, 0.08)辅助圆形按钮、玻璃效果的微妙暗色叠加--accent-active玻璃白rgba(255, 255, 255, 0.16)深色/彩色表面之上按钮的磨砂玻璃叠加。由于系统是纯黑白--surface-warm直接var(--surface)别名见 tokens.css次级文本使用--muted: rgba(0, 0, 0, 0.55)、元信息使用--meta: rgba(0, 0, 0, 0.40)边框则被压到rgba(0, 0, 0, 0.12)/0.06的极低存在感。渐变体系英雄区渐变电光绿、亮黄、深紫、热粉组成的多停靠点渐变是工具创造性潜能的视觉签名产品区块渐变各个产品域Design、Dev Mode、Prototyping 等在展示时可使用各自的色彩主题。3. 排版规则可变字体的精确控制字体族主字体figmaSans回退链figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽/标签figmaMono回退链figmaMono Fallback, SF Mono, menlo。两者均被完整写入 tokens.css 的--font-display/--font-body/--font-mono。完整层级表继承自 DESIGN 文档角色字体字号字重行高字距备注展示 / 英雄标题figmaSans86px (5.38rem)4001.00紧-1.72px最大冲击力极端负字距区块标题figmaSans64px (4rem)4001.10紧-0.96px功能区块标题副标题figmaSans26px (1.63rem)5401.35-0.26px强调的区块文本副标题轻figmaSans26px (1.63rem)3401.35-0.26px轻盈的区块文本功能标题figmaSans24px (1.5rem)7001.45normal粗体卡片标题正文大figmaSans20px (1.25rem)330–4501.30–1.40-0.1px ~ -0.14px描述、导语正文 / 按钮figmaSans16px (1rem)330–4001.40–1.45-0.14px ~ normal标准正文、导航、按钮正文轻figmaSans18px (1.13rem)3201.45-0.26px ~ normal轻盈正文等宽标签figmaMono18px (1.13rem)4001.30紧0.54px大写区块标签等宽小号figmaMono12px (0.75rem)4001.00紧0.6px大写小号标签这套层级在 tokens.css 中对应为--text-xs(12px) 到--text-4xl(86px) 的刻度并配套--leading-tight: 1.00、--tracking-display: -0.02em即 86px 下归一化的 -1.72px。在 components.html 的参考实现中可以看到 h1/h2/h3 与.lead的精确落地例如 64px 区块标题是line-height: 1.10; letter-spacing: -0.015em26px 副标题是line-height: 1.35; letter-spacing: -0.01em; font-weight: 540。排版原则可变字体精度使用 320/330/340/450/480/540 这类非常规停靠点用微差而非剧烈跳变建立层级330 与 340 的差别几乎不可察觉但结构上有意义。以轻为默认绝大多数正文使用 320–340比常规 400 更轻营造与设计工具美学匹配的空气感阅读体验。处处 kern所有文本元素启用 OpenTypekern——components.html 中 body 上写有font-feature-settings: kern注释为 structural, not decorative结构性而非装饰性。负字距为默认正文也使用 -0.1px ~ -0.26px展示文本进一步压缩至 -0.96px / -1.72px。用等宽构建结构figmaMono 大写 正字距0.54px–0.6px构成技术里程碑标签。4. 组件样式pill 与圆形的纪律按钮家族黑色实心pill——主 CTA背景纯黑#000000文字纯白#ffffff图标按钮为圆形50%焦点为 dashed 2px outline最大强调级。白色填充pill——深色/彩色表面上的标准 CTA背景纯白文字纯黑内边距8px 18px 10px非对称垂直圆角 pill50px焦点 dashed 2px outline。玻璃黑——浅色表面上的次级动作背景rgba(0, 0, 0, 0.08)文字纯黑圆形50%。玻璃白——深色/彩色表面上的次级动作背景rgba(255, 255, 255, 0.16)磨砂玻璃文字纯白圆形50%。在 components.html 中.btn基类统一使用border-radius: var(--radius-sm)50px pill.btn-black悬停变rgba(0,0,0,0.85).btn-white带 1pxrgba(0,0,0,0.15)边框且悬停变 4% 黑叠加。焦点则统一是.btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }——这与 USAGE.md 强调的 Dashed focus outlines echoing Figmas editor selection handles 完全一致。卡片与容器背景纯白边框无或最小化圆角6px小容器、8px图片/卡片/对话框阴影微妙至中等的高差效果产品截图作为卡片内容。token 侧对应--radius-md: 8px与--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)见 tokens.css.card类在 components.html 中直接消费这三个 token。导航白色背景上的水平导航黑色 Figma 字标、pill50px产品标签页、黑色文字链接1px 下划线装饰、黑色填充 CTAHover 通过 CSS 变量切换文本颜色。特殊组件产品标签栏水平 pill 形标签50px 半径每个标签代表一个 Figma 产品域Design、Dev Mode、Prototype、Slides激活态加粗强调。参考实现见 components.html 的.tab/.tab.active——激活态为黑底白字background: var(--fg); color: var(--accent-on)非激活态为透明底黑字、字重 480。英雄渐变区全宽多色渐变背景 86px 展示标题白字叠加 渐变内悬浮的产品截图。虚线焦点指示所有交互元素聚焦时使用dashed 2px轮廓呼应编辑器选择手柄——这是一个连接网站 UI 语言与产品 UI 语言的元设计决策。组件层面的完整性由 components.manifest.json 把关该清单统计了 34 个选择器、17 个类、19 个元素并按 groups 组织buttons、inputs、cards、links、icons、typography、layout其中 badges 与 keyboard 两个组present: false——说明该 fixture 刻意不包含这两类组件。5. 布局原则间距系统基本单位8px完整刻度1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px。token 化的间距为--space-1(4px) 到--space-12(48px)见 tokens.css并额外定义了区块纵向节奏--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px——即画廊式的区块呼吸节奏。网格与容器最大容器宽度 1920px--container-max英雄区全宽渐变内容居中产品区块交错展示页脚深色全宽区块响应范围 559px 至 1920px容器边距按断点切换桌面 40px、平板 24px、手机 16px--container-gutter-*。留白哲学画廊式呼吸充裕的留白让每个产品区块都像独立展品以色彩作视觉呼吸渐变英雄与产品展示在单色区块之间提供彩色喘息。圆角刻度层级值用途最小2px小型链接元素微妙6px小容器、分隔线舒适8px卡片、图片、对话框Pill50px标签页按钮、CTA圆形50%图标按钮、圆形元素6. 深度与高差层级处理方式用途平0 级无阴影页面背景、多数文本表面1 级渐变/深色区块上的白色卡片卡片、产品展示高差2 级微妙阴影悬浮卡片、Hover 状态阴影哲学Figma 对阴影极为克制——主要的深度机制是背景对比彩色/深色区块上的白色内容以及产品截图自身的立体感。这解释了为何--elev-flat: none是默认值而--elev-raised只有0 4px 16px rgba(0,0,0,0.08)这么轻的一层见 tokens.css。7. Dos and Donts快速评审清单Do用 figmaSans 的精确可变字重320–540——微差控制本身就是设计界面保持严格黑白——色彩只来自产品内容所有交互元素使用 pill50px与圆形50%几何应用 dashed 2px 焦点轮廓——签名式可访问性模式所有文本启用kern标签使用大写 figmaMono 正字距全局应用负字距-0.1px 到 -1.72px。Dont不要给界面加色——单色板是绝对的不要用标准字重400/500/600/700——必须用可变字体的停靠点320/330/340/450/480/540按钮不要用尖锐直角——只允许 pill 与圆形不要用实线焦点——虚线才是签名正文字重不要超过 450——轻盈美学是核心正文不要用正字距——永远是负值。8. 响应式行为断点名称宽度主要变化小屏手机560px紧凑布局、堆叠平板560–768px小幅调整小桌面768–960px双列布局桌面960–1280px标准布局大桌面1280–1440px扩展超宽1440–1920px最大宽度收缩策略英雄文本86px → 64px → 48px产品标签移动端横向滚动功能区块堆叠为单列页脚多列 → 堆叠。components.html 中对应的实现是两档媒体查询max-width: 1023px与max-width: 639px切换容器边距与区块纵向内边距.hero-grid双列在 1023px 以下降为单列.features-grid三列依次降为双列再降为单列。9. Agent 使用指南把 DESIGN 文档变成可执行契约在 OpenDesign 的体系里这份 DESIGN 文档不是给人看的说明书而是给 Agent 消费的设计契约。USAGE.md 规定了阅读顺序先读 USAGE 理解包契约读 DESIGN.md英文主版理解视觉意图与反模式将 tokens.css 粘贴进首个 artifact 的style块再写组件 CSS用 components.manifest.json 做紧凑的组件清单需要精确选择器/状态时打开 components.html需要视觉核对时查看preview/页面colors.html、typography.html、spacing.html。包结构本身由 manifest.json 声明tokens.css是 token 源design-tokens.json与tailwind-v4.css是派生产物。其中 tailwind-v4.css 展示了如何把 schema token 完整映射进 Tailwind v4 的theme块——--color-accent、--text-4xl、--radius-pill、--shadow-raised等一一对应注释明确要求 Keep tokens.css as the source of truth以 tokens.css 为唯一事实源。快速颜色参考一切界面纯黑 (#000000) 与 纯白 (#ffffff)Glass Darkrgba(0, 0, 0, 0.08)Glass Lightrgba(255, 255, 255, 0.16)。示例组件 Prompt可直接给 Agent 使用在鲜艳的多色渐变绿、黄、紫、粉上创建 hero。标题用 86px figmaSans 字重 400、line-height 1.0、letter-spacing -1.72px白色文字。白色填充 CTA 按钮50px 圆角8px 18px padding。用 pill 形按钮50px 圆角设计产品标签栏。激活态黑底白字非激活态透明底黑字。figmaSans 20px 字重 480。创建区块标签figmaMono 18px大写letter-spacing 0.54px黑色文字。启用 kern。创建正文20px figmaSans 字重 330、line-height 1.40、letter-spacing -0.14px。白底纯黑。迭代五原则Agent 自检精确使用可变字体停靠点320, 330, 340, 450, 480, 540, 700界面永远是黑 白——不要给 chrome 加色焦点用虚线而非实线正文永远负字距等宽标签永远正字距按钮/标签用 pill50px图标按钮用圆形50%。10. 溯源与审计这份包的证据边界source/evidence.md 明确声明本包是基于 OpenDesign 整理的 bundled fixtureDESIGN.md tokens.css components.html派生的 Design System 2.0 回填并不声称对上游品牌官网做了全新抓取。因此在使用时不要声称来自上游原始来源的证据design-tokens.json与tailwind-v4.css是派生输出应通过报告与 token 样式表重新生成而非手工编辑。source/tokens.source.json 提供了逐 token 的审计证据每个 token 都标注了 value、layerA1-identity / A1-structure / A2 / B-slot 分层与tokens.css中的声明行号如--bg→tokens.css:32、--accent→tokens.css:48。这构成了可机器校验的 token 契约任何一处视觉值都能追溯到样式表中的唯一声明。总结Figma 设计系统包是 OpenDesign 中设计纪律如何被编码的典型样本它把黑白绝对主义 可变字体微差 pill 几何 虚线焦点这套极难手工保持一致的美学固化成 56 个 schema token、34 个选择器的组件 fixture 与逐行审计报告。对希望复刻该风格的开发者本文第 3、4、5、9 节提供了可直接照抄的层级表、组件规则与 Agent Prompt对希望理解 OpenDesign 设计系统包架构的读者manifest.json、USAGE.md 与 source/tokens.source.json 展示了从设计文档 → 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenDesign 中的 Figma 设计系统深度解析：黑白界面壳层、figmaSans 可变字体与精确设计语言
OpenDesign 中的 Figma 设计系统深度解析黑白界面壳层、figmaSans 可变字体与精确设计语言【免费下载链接】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本文以 design-systems/figma/DESIGN-ko.md 为骨架结合仓库内 tokens.css、components.html、components.manifest.json 等实际交付物展开。读者将掌握如何复刻 Figma 式黑白画廊设计语言的完整规则可变字体权重停靠点、负字距体系、pill/圆形几何、虚线焦点以及这套 Design System 2.0 包在 OpenDesign 中作为 Agent 可消费设计契约的落地方式——包括 token 结构、Tailwind v4 映射、组件清单与预览页的用法。在 OpenDesign 的 design-systems 目录中每个品牌目录都是一个可被 Agent 直接消费的设计系统包。figma包收录了 Figma 官网上极具辨识度的视觉语言——它是一套自我设计的设计工具的界面界面壳层严格黑白色彩只存在于产品内容中。本文从 DESIGN 文档出发逐层拆解其设计决策并用仓库中的 token 与组件源码验证每一处规则。1. 视觉主题与氛围黑白画廊 彩色展品Figma 的设计系统核心是一个有趣的二元结构界面壳层chrome严格黑白——文档中记录检测到的界面颜色只有字面意义上的#000000与#ffffff两种英雄区与产品展示区充满高饱和多色渐变——电光绿、亮黄、深紫、热粉将产品截图当作展品陈列。这套白墙画廊隐喻在 tokens.css 中直接被注释为gallery wall — no surface tint画廊墙无表面色调--surface与--bg均为纯白#ffffff。让 Figma 页面脱颖而出的另一核心是自定义可变字体 figmaSans它提供了绝大多数排版系统不会使用的极端停靠点——320, 330, 340, 450, 480, 540, 700。这意味着标题层级不靠常规 vs 粗体的跳跃而是靠肉眼几乎不可辨但结构上真实存在的微差例如 330 与 340 之间来建立视觉权重。此外还有几项贯穿全文的标志性设计特征figmaMono 等宽字体 宽字距 大写用于技术标签按钮采用 pill50px 圆角或圆形50%几何所有可交互元素使用dashed 2px虚线焦点轮廓呼应 Figma 编辑器里的选择手柄全局启用 OpenTypekern特性正文甚至也使用-0.14px到-0.26px的负字距。2. 颜色体系与角色分工Primary界面主色色值用途纯黑#000000所有文本、所有实心按钮、所有边框——界面唯一的颜色纯白#ffffff所有背景、白色按钮、深色表面上的文字——二进制的另一半在 tokens.css 中可以看到这一原则被忠实地 token 化--fg: #000000; --fg-2: #000000; /* 黑白系统无次级墨色层 */ --accent: #000000; /* 在严格黑白系统中黑色本身就是强调色 */ --accent-on: #ffffff; --accent-hover: rgba(0, 0, 0, 0.85); --accent-active: rgba(0, 0, 0, 0.08); /* glass dark —— 次级按钮背景 */值得注意的 schema 决策--accent强调色直接绑定纯黑而不是某个品牌色。文档注释明确写道 black IS the accent in a monochrome system。Surface 与背景层级纯白#ffffff页面背景与卡片表面--bg/--surface玻璃黑rgba(0, 0, 0, 0.08)辅助圆形按钮、玻璃效果的微妙暗色叠加--accent-active玻璃白rgba(255, 255, 255, 0.16)深色/彩色表面之上按钮的磨砂玻璃叠加。由于系统是纯黑白--surface-warm直接var(--surface)别名见 tokens.css次级文本使用--muted: rgba(0, 0, 0, 0.55)、元信息使用--meta: rgba(0, 0, 0, 0.40)边框则被压到rgba(0, 0, 0, 0.12)/0.06的极低存在感。渐变体系英雄区渐变电光绿、亮黄、深紫、热粉组成的多停靠点渐变是工具创造性潜能的视觉签名产品区块渐变各个产品域Design、Dev Mode、Prototyping 等在展示时可使用各自的色彩主题。3. 排版规则可变字体的精确控制字体族主字体figmaSans回退链figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽/标签figmaMono回退链figmaMono Fallback, SF Mono, menlo。两者均被完整写入 tokens.css 的--font-display/--font-body/--font-mono。完整层级表继承自 DESIGN 文档角色字体字号字重行高字距备注展示 / 英雄标题figmaSans86px (5.38rem)4001.00紧-1.72px最大冲击力极端负字距区块标题figmaSans64px (4rem)4001.10紧-0.96px功能区块标题副标题figmaSans26px (1.63rem)5401.35-0.26px强调的区块文本副标题轻figmaSans26px (1.63rem)3401.35-0.26px轻盈的区块文本功能标题figmaSans24px (1.5rem)7001.45normal粗体卡片标题正文大figmaSans20px (1.25rem)330–4501.30–1.40-0.1px ~ -0.14px描述、导语正文 / 按钮figmaSans16px (1rem)330–4001.40–1.45-0.14px ~ normal标准正文、导航、按钮正文轻figmaSans18px (1.13rem)3201.45-0.26px ~ normal轻盈正文等宽标签figmaMono18px (1.13rem)4001.30紧0.54px大写区块标签等宽小号figmaMono12px (0.75rem)4001.00紧0.6px大写小号标签这套层级在 tokens.css 中对应为--text-xs(12px) 到--text-4xl(86px) 的刻度并配套--leading-tight: 1.00、--tracking-display: -0.02em即 86px 下归一化的 -1.72px。在 components.html 的参考实现中可以看到 h1/h2/h3 与.lead的精确落地例如 64px 区块标题是line-height: 1.10; letter-spacing: -0.015em26px 副标题是line-height: 1.35; letter-spacing: -0.01em; font-weight: 540。排版原则可变字体精度使用 320/330/340/450/480/540 这类非常规停靠点用微差而非剧烈跳变建立层级330 与 340 的差别几乎不可察觉但结构上有意义。以轻为默认绝大多数正文使用 320–340比常规 400 更轻营造与设计工具美学匹配的空气感阅读体验。处处 kern所有文本元素启用 OpenTypekern——components.html 中 body 上写有font-feature-settings: kern注释为 structural, not decorative结构性而非装饰性。负字距为默认正文也使用 -0.1px ~ -0.26px展示文本进一步压缩至 -0.96px / -1.72px。用等宽构建结构figmaMono 大写 正字距0.54px–0.6px构成技术里程碑标签。4. 组件样式pill 与圆形的纪律按钮家族黑色实心pill——主 CTA背景纯黑#000000文字纯白#ffffff图标按钮为圆形50%焦点为 dashed 2px outline最大强调级。白色填充pill——深色/彩色表面上的标准 CTA背景纯白文字纯黑内边距8px 18px 10px非对称垂直圆角 pill50px焦点 dashed 2px outline。玻璃黑——浅色表面上的次级动作背景rgba(0, 0, 0, 0.08)文字纯黑圆形50%。玻璃白——深色/彩色表面上的次级动作背景rgba(255, 255, 255, 0.16)磨砂玻璃文字纯白圆形50%。在 components.html 中.btn基类统一使用border-radius: var(--radius-sm)50px pill.btn-black悬停变rgba(0,0,0,0.85).btn-white带 1pxrgba(0,0,0,0.15)边框且悬停变 4% 黑叠加。焦点则统一是.btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }——这与 USAGE.md 强调的 Dashed focus outlines echoing Figmas editor selection handles 完全一致。卡片与容器背景纯白边框无或最小化圆角6px小容器、8px图片/卡片/对话框阴影微妙至中等的高差效果产品截图作为卡片内容。token 侧对应--radius-md: 8px与--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)见 tokens.css.card类在 components.html 中直接消费这三个 token。导航白色背景上的水平导航黑色 Figma 字标、pill50px产品标签页、黑色文字链接1px 下划线装饰、黑色填充 CTAHover 通过 CSS 变量切换文本颜色。特殊组件产品标签栏水平 pill 形标签50px 半径每个标签代表一个 Figma 产品域Design、Dev Mode、Prototype、Slides激活态加粗强调。参考实现见 components.html 的.tab/.tab.active——激活态为黑底白字background: var(--fg); color: var(--accent-on)非激活态为透明底黑字、字重 480。英雄渐变区全宽多色渐变背景 86px 展示标题白字叠加 渐变内悬浮的产品截图。虚线焦点指示所有交互元素聚焦时使用dashed 2px轮廓呼应编辑器选择手柄——这是一个连接网站 UI 语言与产品 UI 语言的元设计决策。组件层面的完整性由 components.manifest.json 把关该清单统计了 34 个选择器、17 个类、19 个元素并按 groups 组织buttons、inputs、cards、links、icons、typography、layout其中 badges 与 keyboard 两个组present: false——说明该 fixture 刻意不包含这两类组件。5. 布局原则间距系统基本单位8px完整刻度1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px。token 化的间距为--space-1(4px) 到--space-12(48px)见 tokens.css并额外定义了区块纵向节奏--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px——即画廊式的区块呼吸节奏。网格与容器最大容器宽度 1920px--container-max英雄区全宽渐变内容居中产品区块交错展示页脚深色全宽区块响应范围 559px 至 1920px容器边距按断点切换桌面 40px、平板 24px、手机 16px--container-gutter-*。留白哲学画廊式呼吸充裕的留白让每个产品区块都像独立展品以色彩作视觉呼吸渐变英雄与产品展示在单色区块之间提供彩色喘息。圆角刻度层级值用途最小2px小型链接元素微妙6px小容器、分隔线舒适8px卡片、图片、对话框Pill50px标签页按钮、CTA圆形50%图标按钮、圆形元素6. 深度与高差层级处理方式用途平0 级无阴影页面背景、多数文本表面1 级渐变/深色区块上的白色卡片卡片、产品展示高差2 级微妙阴影悬浮卡片、Hover 状态阴影哲学Figma 对阴影极为克制——主要的深度机制是背景对比彩色/深色区块上的白色内容以及产品截图自身的立体感。这解释了为何--elev-flat: none是默认值而--elev-raised只有0 4px 16px rgba(0,0,0,0.08)这么轻的一层见 tokens.css。7. Dos and Donts快速评审清单Do用 figmaSans 的精确可变字重320–540——微差控制本身就是设计界面保持严格黑白——色彩只来自产品内容所有交互元素使用 pill50px与圆形50%几何应用 dashed 2px 焦点轮廓——签名式可访问性模式所有文本启用kern标签使用大写 figmaMono 正字距全局应用负字距-0.1px 到 -1.72px。Dont不要给界面加色——单色板是绝对的不要用标准字重400/500/600/700——必须用可变字体的停靠点320/330/340/450/480/540按钮不要用尖锐直角——只允许 pill 与圆形不要用实线焦点——虚线才是签名正文字重不要超过 450——轻盈美学是核心正文不要用正字距——永远是负值。8. 响应式行为断点名称宽度主要变化小屏手机560px紧凑布局、堆叠平板560–768px小幅调整小桌面768–960px双列布局桌面960–1280px标准布局大桌面1280–1440px扩展超宽1440–1920px最大宽度收缩策略英雄文本86px → 64px → 48px产品标签移动端横向滚动功能区块堆叠为单列页脚多列 → 堆叠。components.html 中对应的实现是两档媒体查询max-width: 1023px与max-width: 639px切换容器边距与区块纵向内边距.hero-grid双列在 1023px 以下降为单列.features-grid三列依次降为双列再降为单列。9. Agent 使用指南把 DESIGN 文档变成可执行契约在 OpenDesign 的体系里这份 DESIGN 文档不是给人看的说明书而是给 Agent 消费的设计契约。USAGE.md 规定了阅读顺序先读 USAGE 理解包契约读 DESIGN.md英文主版理解视觉意图与反模式将 tokens.css 粘贴进首个 artifact 的style块再写组件 CSS用 components.manifest.json 做紧凑的组件清单需要精确选择器/状态时打开 components.html需要视觉核对时查看preview/页面colors.html、typography.html、spacing.html。包结构本身由 manifest.json 声明tokens.css是 token 源design-tokens.json与tailwind-v4.css是派生产物。其中 tailwind-v4.css 展示了如何把 schema token 完整映射进 Tailwind v4 的theme块——--color-accent、--text-4xl、--radius-pill、--shadow-raised等一一对应注释明确要求 Keep tokens.css as the source of truth以 tokens.css 为唯一事实源。快速颜色参考一切界面纯黑 (#000000) 与 纯白 (#ffffff)Glass Darkrgba(0, 0, 0, 0.08)Glass Lightrgba(255, 255, 255, 0.16)。示例组件 Prompt可直接给 Agent 使用在鲜艳的多色渐变绿、黄、紫、粉上创建 hero。标题用 86px figmaSans 字重 400、line-height 1.0、letter-spacing -1.72px白色文字。白色填充 CTA 按钮50px 圆角8px 18px padding。用 pill 形按钮50px 圆角设计产品标签栏。激活态黑底白字非激活态透明底黑字。figmaSans 20px 字重 480。创建区块标签figmaMono 18px大写letter-spacing 0.54px黑色文字。启用 kern。创建正文20px figmaSans 字重 330、line-height 1.40、letter-spacing -0.14px。白底纯黑。迭代五原则Agent 自检精确使用可变字体停靠点320, 330, 340, 450, 480, 540, 700界面永远是黑 白——不要给 chrome 加色焦点用虚线而非实线正文永远负字距等宽标签永远正字距按钮/标签用 pill50px图标按钮用圆形50%。10. 溯源与审计这份包的证据边界source/evidence.md 明确声明本包是基于 OpenDesign 整理的 bundled fixtureDESIGN.md tokens.css components.html派生的 Design System 2.0 回填并不声称对上游品牌官网做了全新抓取。因此在使用时不要声称来自上游原始来源的证据design-tokens.json与tailwind-v4.css是派生输出应通过报告与 token 样式表重新生成而非手工编辑。source/tokens.source.json 提供了逐 token 的审计证据每个 token 都标注了 value、layerA1-identity / A1-structure / A2 / B-slot 分层与tokens.css中的声明行号如--bg→tokens.css:32、--accent→tokens.css:48。这构成了可机器校验的 token 契约任何一处视觉值都能追溯到样式表中的唯一声明。总结Figma 设计系统包是 OpenDesign 中设计纪律如何被编码的典型样本它把黑白绝对主义 可变字体微差 pill 几何 虚线焦点这套极难手工保持一致的美学固化成 56 个 schema token、34 个选择器的组件 fixture 与逐行审计报告。对希望复刻该风格的开发者本文第 3、4、5、9 节提供了可直接照抄的层级表、组件规则与 Agent Prompt对希望理解 OpenDesign 设计系统包架构的读者manifest.json、USAGE.md 与 source/tokens.source.json 展示了从设计文档 → 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
