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-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 渐变绿、黄、紫、粉全局启用 OpenTypekern特性全程负字距——连正文都是 -0.14px 到 -0.26px2. 色彩系统绝对黑白的二元世界2.1 主色Primary角色值用途纯黑 Pure Black#000000所有文本、所有实心按钮、所有边框——界面唯一的颜色纯白 Pure White#ffffff所有背景、白色按钮、深色表面上的文本——二元的另一半注意Figma 营销站只用这两种颜色作为界面层。所有鲜艳颜色只出现在产品截图、hero 渐变与嵌入内容中。2.2 表面与背景Surface BackgroundToken值用途纯白 Pure White#ffffff页面主背景与卡片表面玻璃黑 Glass Blackrgba(0, 0, 0, 0.08)次要圆形按钮的微暗叠加、玻璃效果玻璃白 Glass Whitergba(255, 255, 255, 0.16)深色/彩色表面上的按钮磨砂玻璃叠加2.3 渐变系统Gradient SystemHero 渐变多停靠点鲜艳渐变电光绿、亮黄、深紫、玫粉是 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-identity8 个、B-slot4 个、A226 个、A1-structure18 个契约评分 100、评级 excellent——这意味着黑白二元并非随意命名而是经过契约化校验的 token 体系。3. 排版规则以微差构建层级的可变字体3.1 字体族主字体figmaSans回退链figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽/标签figmaMono回退链figmaMono Fallback, SF Mono, menlo3.2 完整层级表继承原文档逐项保留角色字体字号字重行高字距说明Display / HerofigmaSans86px (5.38rem)4001.00紧凑-1.72px最大冲击力极端 tracking分区标题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特性——字距微调不是可选项而是结构性的在 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、layoutbadges、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、50px5.2 栅格与容器容器最大宽度可达1920pxHero全宽渐变内容居中产品分区交替橱窗Footer全宽深色区响应式范围559px 至 1920px5.3 留白哲学画廊节奏慷慨的间距让每个产品分区像独立展品一样呼吸彩色分区作为视觉呼吸渐变 hero 与产品橱窗在单色界面分区之间提供色彩喘息。5.4 圆角刻度档位取值用途极小2px小型链接元素微妙6px小容器、分隔线舒适8px卡片、图片、对话框药丸50px标签按钮、CTA圆形50%图标按钮、圆形元素在 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. 深度与层级背景对比优先于阴影层级处理方式用途平面Level 0无阴影页面背景、多数文本表面Level 1渐变/深色分区上的白卡片卡片、产品橱窗浮起Level 2轻微阴影悬浮卡片、悬停态阴影哲学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 断点表继承原文档逐项保留名称宽度关键变化小屏手机560px紧凑布局纵向堆叠平板560–768px小幅调整小屏桌面768–960px双列布局桌面960–1280px标准布局大屏桌面1280–1440px加宽超宽1440–1920px最大宽度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. 做与不做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 以上——轻盈美学是核心正文不要使用正字距——它永远是负的。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 迭代指南精确使用可变字体字重档位320、330、340、450、480、540、700界面永远是黑 白——绝不给铬层加颜色虚线焦点轮廓不要实线正文字距永远是负的等宽标签字距永远是正的按钮/标签用药丸50px图标按钮用圆形50%。结语从规范到可验证的包这套 Figma 风格设计系统的价值在于它的自洽性黑白二元的界面层、以微差建立层级的可变字重、药丸/圆形几何与虚线焦点全部被编码进 tokens.css 这一唯一事实源并通过 components.manifest.json 与 design-tokens.json 做契约化校验56 个 token 全部有源、所有被引用 token 均已声明。对于希望复刻黑白色板 彩色内容式产品营销页的开发者与 Agent只需要按照 USAGE.md 的顺序消费包内资产、严格遵循上文第 9 节的做与不做清单即可在 preview/ 预览页与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 技能设计系统媒体生成OpenDesign 中的 Apple 风格设计系统从 DESIGN 文档到 tokens.css 的完整还原指南OpenDesign 中的 Apple 风格设计系统从 DESIGN 文档到 tokens.css 的完整还原指南 导读 本文以 OpenDesign 仓库内AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统指南Apple 风格设计系统的完整实战规范OpenDesign 设计系统指南Apple 风格设计系统的完整实战规范 导读 本文基于 OpenDesign 仓库内置的 design systems/apAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考