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点击查看免费下载导读本文以 design-systems/figma/DESIGN-pt-br.md 为骨架系统拆解 Open Design 仓库中内置的「Figma 风格设计系统Design System 2.0」从严格黑白界面 彩色产品内容的双层视觉哲学、figmaSans 可变字体的非常规字重档位到胶囊50px/圆形50%按钮几何与虚线焦点轮廓的实现细节。同时结合仓库中的 tokens.css、components.html、design-tokens.json、tailwind-v4.css 等配套文件给出可直接复制运行的 CSS 变量、组件选择器与 Agent 提示词模板。读完本文你将掌握这套系统从设计原则到 Token 落地、再到组件复用的完整链路能够直接用于 Open Design 的网页原型、落地页与产品界面生成。1. 视觉主题与氛围设计工具设计了自己Figma 的界面本身就是设计工具设计了自己的教科书级案例。其营销站点呈现一种迷人的二元性界面外壳Chrome严格黑白字面意义上只检测到#000000与#ffffff两种颜色Hero 与产品展示区彩色爆发电光绿、亮黄、深紫、热粉等多彩渐变铺满整个首屏。这种分离意味着设计系统本身是无色的产品彩色的输出物截图、渐变、内嵌设计才是主角。Figma 的营销页面本质上是一面白色画廊墙墙上挂满了彩色艺术品。而让 Figma 区别于其他系统的除了可变字体还有圆形与胶囊几何按钮使用 50px 圆角胶囊或 50%正圆用于图标按钮营造出有机的工具调色盘手感dashed 2px虚线焦点轮廓则是对 Figma 编辑器内选区手柄的刻意致敬——网站的 UI 语言在引用产品的 UI 语言这是一种元设计选择。在仓库的 components.html 中这一画廊墙比喻被直接编码为注释--surface: #ffffff (gallery wall — no surface tint)而 DESIGN.md英文主文档葡萄牙语版为其翻译开篇即点明这一核心理念。关键特征速览特征说明自定义可变字体 figmaSans非常规字重档位320、330、340、450、480、540、700严格黑白界面外壳颜色只存在于产品内容截图、渐变、内嵌设计figmaMono全大写技术标签宽字距letter-spacing 正值胶囊50px/ 圆形50%几何所有可交互元素的统一形态语言虚线焦点轮廓dashed 2px呼应 Figma 编辑器选区手柄多彩 Hero 渐变绿色、黄色、紫色、粉色OpenTypekern全局开启连字距调整都是结构性的全局负字距连正文都是 -0.14px 至 -0.26px2. 颜色体系与角色分配二元色的绝对统治2.1 主色只保留两个纯色纯黑#000000所有文字、所有实心按钮、所有边框——界面唯一的颜色。纯白#ffffff所有背景、白色按钮、深色表面上的文字——二元的另一半。注意Figma 营销站点仅用这两个颜色承载界面层所有鲜艳颜色只出现在产品截图、Hero 渐变与内嵌内容中。2.2 表面与背景含透明叠加层Token值用途纯白#ffffff页面主背景、卡片表面玻璃黑rgba(0, 0, 0, 0.08)次级圆形按钮的微妙深色叠加、玻璃效果玻璃白rgba(255, 255, 255, 0.16)深色/彩色表面上的按钮磨砂玻璃叠加在 tokens.css 中这一二元性被完整落地为 Token第 32–51 行:root { /* ─── Surface ─── */ --bg: #ffffff; --surface: #ffffff; /* gallery wall — no surface tint */ --surface-warm: var(--surface); /* no warm tier in BW system */ /* ─── Foreground ─── */ --fg: #000000; --fg-2: #000000; /* BW — no secondary ink tier */ --muted: rgba(0, 0, 0, 0.55); /* secondary text on white */ --meta: rgba(0, 0, 0, 0.40); /* metadata, captions */ /* ─── Border ─── */ --border: rgba(0, 0, 0, 0.12); /* minimal — only where structurally needed */ --border-soft: rgba(0, 0, 0, 0.06); /* ─── Accent ─── */ /* In a strictly BW system, black IS the accent (solid CTA). */ --accent: #000000; --accent-on: #ffffff; --accent-hover: rgba(0, 0, 0, 0.85); --accent-active: rgba(0, 0, 0, 0.08); /* glass dark — secondary button bg */ }值得一提的 Schema 决策在纯黑白系统中--accent直接等于黑色黑色就是强调色hover 与 active 通过玻璃色叠加实现--surface-warm只是--surface的别名因为黑白系统没有暖色层级。仓库还保留了语义色 Token--success: #16a34a、--warn: #eab308、--danger: #dc2626供产品内容层使用。2.3 渐变体系Hero 渐变多色渐变签名——电光绿、亮黄、深紫、热粉代表工具的创作可能性产品分区渐变Design、Dev Mode、Prototyping 等产品区域可在各自展示区内使用独立色彩主题。渐变只存在于内容层永远不进入界面外壳这是本系统的硬约束。3. 排版规则可变字体的微差即设计3.1 字体族主字体figmaSans回退链为figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽/标签字体figmaMono回退链为figmaMono Fallback, SF Mono, menlo。对应 Tokentokens.css 第 59–61 行--font-display: figmaSans, figmaSans Fallback, SF Pro Display, system-ui, Helvetica, sans-serif; --font-body: figmaSans, figmaSans Fallback, SF Pro Display, system-ui, Helvetica, sans-serif; --font-mono: figmaMono, figmaMono Fallback, SF Mono, Menlo, ui-monospace, monospace;3.2 层级体系完整规格表角色字体字号字重行高字距备注Display / HerofigmaSans86px5.38rem4001.00紧凑-1.72px最大冲击力、极致 tracking区块标题figmaSans64px4rem4001.10紧凑-0.96px功能区块标题副标题figmaSans26px1.63rem5401.35-0.26px强调的区块文字轻量副标题figmaSans26px1.63rem3401.35-0.26px轻字重的区块文字功能标题figmaSans24px1.5rem7001.45normal卡片粗体标题大号正文figmaSans20px1.25rem330–4501.30–1.40-0.1px 至 -0.14px描述、导语正文 / 按钮figmaSans16px1rem330–4001.40–1.45-0.14px 至 normal标准正文、导航、按钮轻量正文figmaSans18px1.13rem3201.45-0.26px 至 normal轻字重正文等宽标签figmaMono18px1.13rem4001.30紧凑0.54px全大写区块标签小号等宽figmaMono12px0.75rem4001.00紧凑0.6px全大写微型标签3.3 排版原则可变字体精度figmaSans 使用大多数系统从不触碰的字重——320、330、340、450、480、540。层级通过微差而非常规 vs 粗体的粗暴跳跃建立。330 与 340 的差异几乎不可感知但在结构上意义重大轻盈为基大部分正文使用 320–340比常规 400 更轻营造空灵、通透的阅读体验与设计工具美学契合处处 kern每个文本元素都开启 OpenTypekern特性——字距调整不是可选项而是结构性的。在 components.html 的body与所有标题、按钮样式中均通过font-feature-settings: kern强制声明默认负 tracking连正文都使用 -0.1px 至 -0.26px 的字距形成全局紧凑文本展示文本进一步压缩到 -0.96px 与 -1.72px等宽字体承载结构figmaMono 全大写 正字距0.54px–0.6px制造技术路标式标签。3.4 Token 层的排版落地tokens.css 第 66–81 行把上述层级收敛为可直接消费的尺寸 Token--text-xs: 12px; /* mono small — uppercase tiny labels */ --text-sm: 16px; /* body / button */ --text-base: 16px; /* body baseline */ --text-lg: 20px; /* body large — descriptions */ --text-xl: 26px; /* sub-heading */ --text-2xl: 26px; /* sub-heading (same tier, weight varies) */ --text-3xl: 64px; /* section heading */ --text-4xl: 86px; /* display / hero */ --leading-body: 1.40; --leading-tight: 1.00; --tracking-display: -0.02em; /* -1.72px / 86px normalized */注意--tracking-display以 em 归一化表达确保在不同字号下等比缩放这是可变字体系统精确控制 tracking 的关键手法。4. 组件样式胶囊与圆的绝对统治4.1 按钮四态体系纯黑实心胶囊背景纯黑#000000文字纯白#ffffff圆角图标按钮用 50%正圆焦点虚线 2px 轮廓最高强调白色胶囊背景纯白#ffffff文字纯黑#000000Padding8px 18px 10px垂直不对称圆角胶囊50px焦点虚线 2px 轮廓深色/彩色表面上的标准 CTA深色玻璃背景rgba(0, 0, 0, 0.08)文字纯黑圆角50%正圆焦点虚线 2px 轮廓浅色表面上的次级动作浅色玻璃背景rgba(255, 255, 255, 0.16)磨砂玻璃文字纯白圆角50%正圆焦点虚线 2px 轮廓深色/彩色表面上的次级动作4.2 源码级按钮实现在 components.html 第 170–199 行按钮被实现为.btn基类 .btn-black/.btn-white修饰类.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; border-radius: var(--radius-sm); /* 50px pill */ font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; font-feature-settings: kern; line-height: 1; cursor: pointer; border: none; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); text-decoration: none; } /* Figma focus: dashed 2px outline — the editor selection handle echo. */ .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); } .btn-white { background: var(--bg); color: var(--fg); border: 1px solid rgba(0, 0, 0, 0.15); } .btn-white:hover { background: rgba(0, 0, 0, 0.04); }实现要点按钮不设border-radius之外的尖角hover 通过玻璃色叠加rgba(0,0,0,0.85)/rgba(0,0,0,0.04)而非换色实现焦点用outline: 2px dashed而不是box-shadow ring——这正是 Figma 的签名式可访问性模式对应 tokens.css 第 111–114 行的注释--focus-ring仅作为键盘导航的兜底阴影。4.3 卡片与容器背景纯白边框无或极简圆角6px小容器、8px图片、卡片、对话框阴影细微至中等高度效果卡片内容以产品截图为载体源码实现components.html 第 224–229 行.card { background: var(--bg); border-radius: var(--radius-md); /* 8px */ padding: var(--space-6); /* 24px */ box-shadow: var(--elev-raised); /* 0 4px 16px rgba(0,0,0,0.08) */ }4.4 导航与产品 Tab 栏白色背景上的干净水平导航Logo 为黑色 Figma wordmark产品 Tab 以胶囊50px形态承载链接为黑字 1px 下划线装饰CTA 为黑色胶囊按钮hover 通过 CSS 变量切换文字颜色产品 Tab 栏是标志性组件水平胶囊50pxTab 条每个 Tab 代表一个产品区域Design、Dev Mode、Prototyping 等激活态高亮。源码实现components.html 第 202–221 行.tab-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; } .tab { padding: 8px 18px; border-radius: var(--radius-sm); /* 50px pill */ font-size: var(--text-base); font-weight: 480; /* figmaSans 非常规档位 */ cursor: pointer; border: none; background: transparent; color: var(--fg); font-feature-settings: kern; transition: background-color var(--motion-fast) var(--ease-standard); } .tab:hover { background: rgba(0, 0, 0, 0.06); } .tab.active { background: var(--fg); color: var(--accent-on); } .tab:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }4.5 其他标志性组件Hero 渐变区全宽多彩渐变背景白色文字叠 86px 展示标题产品截图悬浮于渐变之中虚线焦点指示器所有可交互元素统一使用dashed 2px轮廓——引用 Figma 编辑器选区手柄的元设计选择将网站与产品连接起来。仓库的 components.manifest.json 提供了组件的机器可读清单34 个选择器、17 个类、19 个元素并将它们归入 buttons、inputs、cards、links、icons、typography、layout 等分组便于 Agent 在生成组件前先复用既有组件组见 USAGE.md 的 Do 清单。5. 布局原则画廊节奏与留白哲学5.1 间距体系基础单位8px完整刻度1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50pxToken 化后的间距tokens.css 第 84–96 行覆盖了主要层级并补充了区块纵向节奏 Token--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* Section rhythm — gallery-like pacing between product sections. */ --section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 40px;5.2 网格与容器容器最大宽度1920pxHero全宽渐变 内容居中产品区块交替展示vitrine页脚全宽深色区块响应式范围 559px 至 1920px容器与区块在组件层落地components.html 第 103–117 行.container { max-width: var(--container-max); /* 1920px */ margin-inline: auto; padding-inline: var(--container-gutter-desktop); /* 40px */ } section { padding-block: var(--section-y-desktop); } section section { border-top: 1px solid var(--border); } media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } /* 24px */ section { padding-block: var(--section-y-tablet); } } media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } /* 16px */ section { padding-block: var(--section-y-phone); } }5.3 留白哲学画廊节奏慷慨的间距让每个产品区块都像独立的展览彩色区块作为视觉呼吸Hero 渐变与产品展示区在单色界面区块之间提供色彩喘息。5.4 圆角刻度完整版档位值用途最小2px小链接元素微妙6px小容器、分隔线舒适8px卡片、图片、对话框胶囊50pxTab 按钮、CTA圆形50%图标按钮、圆形元素Token 对应关系--radius-sm: 50px胶囊所有可交互元素、--radius-md: 8px卡片、--radius-pill: 9999px。6. 深度与高度以背景对比替代阴影层级处理方式用途平面0 级无阴影页面背景、大部分文字表面1 级渐变/深色区块中的白色卡片卡片、产品展示抬升2 级细微阴影悬浮卡片、hover 状态阴影哲学Figma 极简使用阴影。主要深度机制是背景对比彩色/深色区块中的白色内容与产品截图自身的固有立体感。Token 化落地tokens.css 第 106–114 行--elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08); --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);7. 组件清单与机器可读契约这套设计系统不只是给人看的规范还是给 Agent 消费的机器可读资产。仓库的 manifest.json 以od-design-system-project/v1Schema 声明了包的完整构成design: DESIGN.md视觉意图与反模式tokens: tokens.cssToken 唯一事实源designTokens: design-tokens.jsonTOKEN_SCHEMA 契约导出tailwind: tailwind-v4.cssTailwind v4 适配层components: components.html参考组件usage: USAGE.mdAgent 使用顺序7.1 Token 契约报告design-tokens.json 展示了完整的 Token 审计结果共 56 个 Token全部有源码支撑sourceBackedTokens: 56契约评分为 100grade: excellent并按层级分布A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个。每个 Token 都记录了来源声明行如--bg→tokens.css:32。source/token-contract.report.json 则把每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行。需要注意根据 source/evidence.md本包是基于OpenDesign 策展的内置 fixturebundled fixture推导而来并未声称对上游 Figma 品牌仓库做重新抓取。文章与 Agent 使用时应避免声称原始上游来源证据。7.2 Tailwind v4 适配层tailwind-v4.css 是 token 的派生输出将tokens.css的变量桥接进 Tailwind v4 的theme使bg-accent、text-4xl、rounded-pill等工具类直接可用import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-accent-on: var(--accent-on); --font-display: var(--font-display); --font-sans: var(--font-body); --font-mono: var(--font-mono); --text-4xl: var(--text-4xl); /* 86px display */ --tracking-display: var(--tracking-display); --radius-sm: var(--radius-sm); /* 50px pill */ --radius-pill: var(--radius-pill); /* 9999px */ --shadow-raised: var(--elev-raised); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); /* ……其余见源文件 */ }同时 system/tokens.default.json 提供了面向运行时组件的精简 TokencolorPrimary: #000000、borderRadius: 8等。8. 响应式行为8.1 断点表名称宽度主要变化小屏手机560px紧凑布局、堆叠平板560–768px小幅调整小屏桌面768–960px双列布局桌面960–1280px标准布局大屏桌面1280–1440px扩展布局超宽屏1440–1920px最大宽度8.2 折叠策略Hero 文本86px → 64px → 48px产品 Tab移动端水平滚动功能区块堆叠为单列页脚多列 → 堆叠组件层已实现两个关键响应式行为components.html 第 232–245 行.hero-grid在 1023px 以下折叠为单列.features-grid从三列 → 双列1023px→ 单列639px逐级坍缩。9. Agent 提示词指南把设计系统变成可执行指令9.1 颜色快速参考一切界面纯黑#000000 纯白#ffffff深色玻璃rgba(0, 0, 0, 0.08)浅色玻璃rgba(255, 255, 255, 0.16)9.2 组件提示词示例创建 Hero多彩渐变背景绿、黄、紫、粉。标题 86px figmaSans weight 400、line-height 1.0、letter-spacing -1.72px。白色文字。白色胶囊 CTA 按钮圆角 50px、padding 8px 18px。设计产品 Tab 栏胶囊形按钮圆角 50px。激活态黑底白字。非激活态透明底黑字。figmaSans 20px weight 480。构建区块标签figmaMono 18px、全大写、letter-spacing 0.54px、黑色文字。开启 kern。创建正文20px figmaSans weight 330、line-height 1.40、letter-spacing -0.14px。纯黑文字置于白色背景。9.3 迭代检查清单精确使用可变字体字重档位320、330、340、450、480、540、700界面永远是黑 白——绝不向 Chrome 层加颜色焦点轮廓用虚线不用实线正文字距永远为负等宽标签字距永远为正按钮/Tab 用胶囊50px图标按钮用圆形50%9.4 Agent 使用顺序来自 USAGE.md按 USAGE.md 的规定Agent 与审查者应遵循先读 USAGE.md 理解包契约再读 DESIGN.md或对应语言版本理解视觉意图、约束与反模式将 tokens.css 粘贴进第一个 artifact 的style块再编写组件 CSS用 components.manifest.json 做紧凑组件盘点需要精确选择器或状态时打开 components.html需要视觉抽查时检查preview/目录下的 colors.html、typography.html、spacing.html。Do保留 Schema Token 名以支持跨品牌切换用--accent承载主操作、链接与焦点态优先复用components.manifest.json中的组件组将source/文件视为 fixture 回填的审计证据。Avoid不在复制的:rootToken 块之外使用裸 hex 值不脱离tokens.css独立重定义 Tailwind/design-token 值不声称持有原始上游来源证据本包基于策展的内置 fixture不新增components.html或DESIGN.md中不存在的组件配方。10. 把设计系统接入 Open Design 生成链路在 Open Design 仓库中本设计系统隶属于design-systems/目录下的数百个品牌包之一Airbnb、Stripe、Notion、Vercel 等每个包遵循统一的od-design-system-project/v1Schema。跨品牌切换的可靠性正建立在 Token 命名契约TOKEN_SCHEMA之上——只要保留 Schema Token 名Agent 就能在渲染同一组件时无缝切换品牌皮肤。实际接入路径纯 CSS 场景直接把 tokens.css 的:root块复制进style组件样式参考 components.html 的.btn、.tab、.card、.mono-label等选择器Tailwind v4 场景import ./tokens.css后引入 tailwind-v4.css 的theme桥接即可使用bg-accent、rounded-pill、tracking-display等工具类Agent 生成场景将第 9 节提示词模板与 DESIGN.md 的 Do/Avoid 清单一并注入上下文约束模型输出符合 Figma 视觉契约的 HTML/CSS。结语Figma 设计系统的本质可以浓缩为一句话把设计系统的表达欲全部让渡给内容界面只保留最克制的二元结构再用可变字体的微差与胶囊几何做出最精确的层级控制。本文基于 DESIGN-pt-br.md 的完整骨架结合仓库中的 Token 契约、组件实现与使用规范还原了这套系统从理念到代码的完整落地路径。无论你是要生成 Figma 风格落地页、训练设计 Agent 的视觉约束还是研究黑白外壳 彩色内容这一设计范式仓库中的 tokens.css、components.html 与预览页都是可以直接取用的权威参考。赞分享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 Figma 设计系统规范解读黑白色壳下的可变字体与 pill 几何实战指南OpenDesign Figma 设计系统规范解读黑白色壳下的可变字体与 pill 几何实战指南 本文基于 design systems/figma/DESIAI 应用人工智能AI 技能设计系统媒体生成open-design 中的 Figma 设计系统包以 figmaSans 变体字重与黑白极简骨架复现协作设计工具美学open design 中的 Figma 设计系统包以 figmaSans 变体字重与黑白极简骨架复现协作设计工具美学 本指南以 open design 仓库AI 应用人工智能AI 技能设计系统媒体生成Open Design 中的 Apple 风格设计系统从 SF Pro 排版到 980px 胶囊 CTA 的完整落地指南Open Design 中的 Apple 风格设计系统从 SF Pro 排版到 980px 胶囊 CTA 的完整落地指南 本指南以 Open Design 仓AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考