AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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 仓库中的 design-systems/figma 设计系统包为研究对象完整拆解 Figma 官网的设计语言严格黑白双色的界面外壳、figmaSans 可变字体的非整数字重停靠、药丸与圆形按钮几何、虚线焦点描边以及从 DESIGN.md 到 tokens.css、components.html 的一整套可落地资产。读完本文你将掌握如何在自己的 Agent 生成物或前端项目中复刻这套「画廊白墙 彩色展品」的设计系统并理解其背后的 Token 分层契约A1/A2/B-slot与机器可验证的实现机制。1. 设计主题与视觉氛围工具设计了它自己1.1 设计系统的自指性Figma 的营销页面是「设计工具设计了它自己」的经典案例。其设计语言的核心张力来自一组刻意制造的对立界面层绝对单色整个应用外壳chrome只出现#000000与#ffffff两种颜色连中途色阶都不存在内容层极度绚丽Hero 区与产品展示区使用电光绿、亮黄、深紫、热粉构成的多色渐变产品截图即「彩色展品」。这种分离在 DESIGN-ar.md 中被概括为Figma 的营销页面本质上是一面白色的画廊墙墙面上悬挂着彩色艺术品。系统本身无色颜色只属于产品内容这是整套 Token 设计的出发点。1.2 核心特征清单原文档列出的关键特征在 DESIGN.md 中有英文对照版本自定义可变字体 figmaSans带非常规字重停靠320、330、340、450、480、540、700界面外壳严格黑白 —— 颜色只存在于产品内容中figmaMono 用于大写字距加宽的技术标签药丸50px与圆形50%按钮几何呼应 Figma 编辑器选区手柄的虚线焦点描边多色明亮的 Hero 渐变绿、黄、紫、粉全局启用 OpenTypekern特性全文负字距 —— 连正文字体都达到 -0.14px 到 -0.26px。1.3 仓库中的资产形态这一设计系统并非停留在描述层。在 design-systems/figma 目录下它被组织成 Design System 2.0 包文件角色DESIGN.md规范的视觉设计散文多语言副本位于 DESIGN-ar.md、DESIGN-zh.md 等tokens.css规范编译的 Token 绑定:root块components.html组件参考夹具展示按钮、标签栏、卡片等manifest.json机器可读的项目清单v1 schemadesign-tokens.json从 tokens.css 派生的 Design Tokens JSONtailwind-v4.css派生的 Tailwind v4theme映射USAGE.mdAgent 使用指南preview/色彩、排版、间距静态预览页目录结构契约由 design-systems/_schema/AGENTS.md 定义每个打包的 Design System 项目必须携带manifest.json、DESIGN.md和tokens.css而manifest.json的形状由scripts/check-design-system-manifests.ts强制校验。2. 颜色系统绝对的黑白二元与玻璃叠加层2.1 主色板Figma 包的主色只有两种纯黑#000000所有文本、所有实心按钮、所有边框 —— 界面唯一的「颜色」纯白#ffffff所有背景、白色按钮、深色表面上的文本。所有鲜亮颜色只出现在产品截图、Hero 渐变与内嵌内容中接口层禁止出现第三种颜色。2.2 表面与玻璃效果Token值用途--surface#ffffff卡片表面画廊墙没有任何色调偏移玻璃黑rgba(0, 0, 0, 0.08)次级圆形按钮的轻微暗色覆盖玻璃白rgba(255, 255, 255, 0.16)深色/彩色表面按钮上的磨砂玻璃覆盖2.3 渐变系统Hero 渐变电光绿 亮黄 深紫 热粉的多停靠渐变是整个 Hero 区的视觉签名代表工具的创作可能性产品区渐变Design、Dev Mode、Prototyping 等独立产品区可各自使用不同的色彩主题。2.4 Token 层面的决策依据在 tokens.css 的:root中黑白二元被编码为一系列结构决策--bg: #ffffff; --surface: #ffffff; /* gallery wall — no surface tint */ --surface-warm: var(--surface); /* BW 系统中不存在暖色层直接取别名 */ --fg: #000000; --fg-2: #000000; /* 黑白系统没有次级墨色层 */ --muted: rgba(0, 0, 0, 0.55); /* 白色上的次级文本 */ --meta: rgba(0, 0, 0, 0.40); /* 元数据、说明文字 */ --border: rgba(0, 0, 0, 0.12); /* 仅在结构需要处使用 */ --border-soft: rgba(0, 0, 0, 0.06); --accent: #000000; /* 黑白系统中黑色就是强调色 */ --accent-on: #ffffff; --accent-hover: rgba(0, 0, 0, 0.85); --accent-active: rgba(0, 0, 0, 0.08); /* glass dark —— 次级按钮背景 */这里的核心洞见是--accent: #000000在绝对单色系统中黑色本身就是强调色实心黑色按钮即最高强调层级。--surface-warm与--fg-2这两个 B-slot 层级的 Token 通过var(--surface)/var(--fg)别名折叠collapse符合 design-systems/_schema/AGENTS.md 中「品牌无独立意见时复制别名」的契约。3. 排版系统可变字体的微观字重军备竞赛3.1 字体族主字体figmaSans回退链figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽/标签figmaMono回退链figmaMono Fallback, SF Mono, menlo。3.2 完整层级表角色字体字号字重行高字距备注Display / HerofigmaSans86px (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大写小标记3.3 排版五原则可变字体精度figmaSans 使用了大多数字体系统从不触碰的字重 —— 320、330、340、450、480、540。层级通过微观字重差异而非戏剧性跳跃建立330 与 340 的差异几乎不可感知但具有结构意义轻量为基底大部分正文使用 320–340比常规的 400「常规」更轻营造空灵、通透的阅读体验处处开 kern每个文本元素都启用 OpenTypekern特性 —— 字距调整不是可选项而是结构性的负字距为默认连正文都使用 -0.1px 到 -0.26px 的字距展示文本进一步压缩到 -0.96px 与 -1.72px等宽字体承载结构figmaMono 大写 正字距0.54px–0.6px构成技术路标标签。3.4 源码级实现components.html 给出了具体实现body上全局声明font-feature-settings: kern标题字号与字距通过 Token 绑定h1 { font-size: var(--text-4xl); /* 86px */ letter-spacing: var(--tracking-display); /* -0.02em即 86px 下 -1.72px */ } h2 { font-size: var(--text-3xl); /* 64px */ line-height: 1.10; letter-spacing: -0.015em; /* 约 -0.96px */ } h3 { font-size: var(--text-xl); /* 26px */ line-height: 1.35; letter-spacing: -0.01em; /* 约 -0.26px */ font-weight: 540; } .lead { font-size: var(--text-lg); /* 20px */ line-height: 1.40; font-weight: 330; letter-spacing: -0.007em; /* 约 -0.14px */ } .mono-label { font-family: var(--font-mono); font-size: 18px; text-transform: uppercase; letter-spacing: 0.54px; /* 等宽标签为正字距 */ }注意letter-spacing在组件中以 em 归一化表达Token 层则用--tracking-display: -0.02em直接声明与 DESIGN 文档中 -1.72px / 86px 的绝对像素值等价。4. 组件设计药丸与圆形的几何法则4.1 按钮四态黑色实心药丸背景纯黑#000000文本纯白#ffffff图标按钮圆角为圆形50%焦点2px 虚线描边最高强调度。白色药丸背景纯白文本纯黑内边距8px 18px 10px非对称垂直方向圆角药丸50px焦点2px 虚线描边深色/彩色表面上的标准 CTA。玻璃黑背景rgba(0, 0, 0, 0.08)文本纯黑圆角圆形50%焦点2px 虚线描边浅色表面上的次级操作。玻璃白背景rgba(255, 255, 255, 0.16)磨砂玻璃文本纯白圆角圆形50%焦点2px 虚线描边深色/彩色表面上的次级操作。components.html 中的实现--radius-sm: 50px是全部交互元素的药丸半径.btn { padding: 10px 20px; border-radius: var(--radius-sm); /* 50px pill */ font-feature-settings: kern; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; } .btn-black { background: var(--fg); color: var(--accent-on); } .btn-black:hover { background: rgba(0, 0, 0, 0.85); }4.2 卡片与容器背景纯白无边框或极简边框圆角6px小容器、8px图片、卡片、对话框阴影微妙到中等高度卡片内容以产品截图为主。4.3 导航白色背景上的干净横向导航黑色 Figma 字标产品标签药丸形50px标签导航链接黑色文本 1px 下划线CTA黑色药丸按钮悬停通过 CSS 变量改变文本颜色。4.4 特色组件产品标签栏Product Tab Bar横向药丸形标签50px 圆角每个标签代表一个产品区Design、Dev Mode、Prototyping 等激活标签高亮。组件实现中.tab.active { background: var(--fg); color: var(--accent-on); }未激活标签透明底黑字、字重 480。Hero 渐变区全宽多色渐变背景其上覆盖 86px 白色展示标题产品截图悬浮于渐变内。虚线焦点指示器所有交互元素聚焦时使用dashed 2px描边 —— 这是对 Figma 编辑器选区手柄的元设计呼应也是 USAGE.md 明确列出的品牌签名可访问性模式。5. 布局原则画廊节奏与 8px 间距体系5.1 间距系统基础单位8px完整刻度1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px。Token 化后在 tokens.css 中体现为--space-1到--space-124/8/12/16/20/24/32/48px以及章节垂直节奏--section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 40px;5.2 网格与容器容器最大宽度1920pxToken--container-max: 1920pxHero全宽渐变 居中内容产品区交替展示页脚全宽深色区响应范围 559px 到 1920px响应式 gutter桌面 40px、平板 24px、手机 16px。5.3 留白哲学画廊式节奏慷慨的间距让每个产品区像独立展品一样呼吸彩色区作为视觉呼吸渐变 Hero 与产品展示在单色界面区之间提供色彩喘息。5.4 圆角刻度级别值用途极简2px小链接元素轻微6px小容器、分隔线舒适8px卡片、图片、对话框药丸50px标签按钮、CTA圆形50%图标按钮、圆形元素6. 深度与高度靠背景对比而非阴影层级处理用途平面0 级无阴影页面背景、多数文本表面1 级渐变/深色区上的白色卡片卡片、产品展示抬升2 级轻微阴影浮动卡片、悬停态Token 层面对应--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)。阴影哲学Figma 克制地使用阴影。主要的深度机制是背景对比白色内容置于彩色/深色区和产品截图自身的固有立体感 —— 这解释了为什么--elev-flat是默认值以及为什么卡片在渐变/深色区上「浮现」而不依赖投影。7. Dos 与 Donts风格红线清单必须做用 figmaSans 的精确可变字重320–540—— 微观字重控制本身就是设计界面保持严格黑白 —— 颜色只能来自产品内容所有交互元素使用药丸50px与圆形50%几何应用 2px 虚线焦点描边 —— 签名式可访问性模式所有文本启用kern标签使用 figmaMono 大写 正字距全文应用负字距-0.1px 到 -1.72px。禁止做不给界面加颜色 —— 单色板是绝对的不用标准字重400、500、600、700—— 用可变字体的独特停靠320、330、340、450、480、540按钮不用尖角 —— 只有药丸和圆形几何不用实线焦点描边 —— 虚线才是签名不把正文字重提到 450 以上 —— 轻量美学是核心正文不用正字距 —— 它永远是负的。USAGE.md 还补充了包使用层面的约束保持 schema Token 名称不变以保证跨品牌切换可靠--accent只用于主操作、链接、焦点态与一个明确的焦点元素避免在:rootToken 块之外使用裸十六进制值避免绕过 tokens.css 独立重定义 Tailwind 或 design-token 值。8. 响应式行为五档断点与折叠策略8.1 断点表名称宽度主要变化小屏手机560px紧凑、堆叠布局平板560–768px轻微调整小桌面768–960px两栏布局桌面960–1280px标准布局大桌面1280–1440px扩展超宽1440–1920px最大宽度8.2 折叠策略Hero 文本86px → 64px → 48px 逐级收缩产品标签手机上横向滚动特性区堆叠为单栏页脚多栏 → 堆叠。components.html 中响应式通过两档媒体查询实现1023px 与 639px 断点hero-grid在 1023px 以下变为单栏features-grid从三栏依次降为两栏、单栏容器 gutter 与章节间距同步切换。9. Agent 提示词指南让生成结果直接命中风格9.1 快速颜色参考一切「纯黑#000000」与「纯白#ffffff」玻璃黑rgba(0, 0, 0, 0.08)玻璃白rgba(255, 255, 255, 0.16)。9.2 组件提示词示例可直接复用Hero「创建一个位于多色渐变上的 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 的正文。纯黑文本置于白色背景上。」9.3 迭代清单精确使用可变字重停靠320、330、340、450、480、540、700界面永远是黑 白 —— 绝不往外壳加颜色虚线焦点描边而非实线正文字距永远为负等宽标签字距永远为正按钮/标签用药丸50px图标按钮用圆形50%。10. 包内机制Token 分层契约与派生资产10.1 从 DESIGN.md 到可执行 Token本设计系统遵循 design-systems/_schema/AGENTS.md 定义的四层 Token 契约层谁决定值若省略本包示例A1-identity品牌校验失败--bg、--fg、--accent、--font-displayA1-structure品牌校验失败字号刻度、--container-max、--section-y-*A2品牌带回退校验失败--motion-fast、--success、--space-4、--font-monoB-slot品牌或 schema 建议别名校验失败--fg-2 → var(--fg)、--surface-warm → var(--surface)Figma 包在 design-tokens.json 中的契约报告显示56 个 Token 全部声明、全部有源码支撑、A1 层 26 个、A2 层 26 个、B-slot 4 个得分 100、评级 excellent。每个 Token 都带sources字段回溯到tokens.css的具体行号如--bg指向tokens.css:32。10.2 派生资产与使用顺序tailwind-v4.css 是派生文件通过theme将--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*等映射为 Tailwind 工具类其头部明确声明「Derived from tokens.css. Keep tokens.css as the source of truth」source/evidence.md 说明该包基于 OpenDesign 策展的 bundled fixture 回填不声称抓取过上游品牌官网USAGE.md 给出的推荐阅读顺序为先读 USAGE → 再读 DESIGN.md → 将 tokens.css 粘贴进首个 artifact 的style块 → 用 components.manifest.json 做组件清单 → 需要精确选择器时打开 components.html → 视觉检查时查看 preview/ 页面。这套「文档散文DESIGN 机器校验manifest/guard 可执行 Tokentokens.css 组件夹具components.html」的组合正是 OpenDesign 将设计风格沉淀为可被 Agent 稳定复用的包的通用范式而 Figma 包则是「内容彩色、外壳黑白」这一设计理念最纯粹的实现样本。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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 设计系统实战Duolingo 风格化设计系统完整拆解与落地指南OpenDesign 设计系统实战Duolingo 风格化设计系统完整拆解与落地指南 本文基于 OpenDesign 仓库中 design systems/dAI 应用人工智能AI 技能设计系统媒体生成在 OpenDesign 中复刻 Duolingo 式游戏化设计系统从视觉语言到 Token 落地的完整指南在 OpenDesign 中复刻 Duolingo 式游戏化设计系统从视觉语言到 Token 落地的完整指南 本指南以 design systems/duolAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统实战Airbnb 旅行电商设计语言的完整复刻指南OpenDesign 设计系统实战Airbnb 旅行电商设计语言的完整复刻指南 本文以 OpenDesign 仓库中 design systems/airbnAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考