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-de.md 为绝对主体系统拆解 Open Design 仓库内置的「Figma 灵感设计系统」从双色界面层与多彩产品内容的二元结构、figmaSans 变量字体的非标准字重断点、pill/圆形几何到可落地的 token 绑定tokens.css与可直接投喂给 Agent 的组件 Prompt。读者读完后既能完整理解该设计规范的内在逻辑也能在自建页面、原型或演示文稿中按此规范精准复刻 Figma 风格的界面并借助仓库内的组件清单与预览页进行视觉验收。该设计系统包的完整使用契约见 design-systems/figma/USAGE.md先读包契约 → 再读 DESIGN 文档理解视觉意图与反模式 → 将 tokens.css 粘贴进首个产物的style块 → 按 components.manifest.json 复用组件清单 → 需要精确选择器与状态时打开 components.html需要视觉 sanity check 时查看 preview/ 页面。1. 视觉主题与氛围设计工具自我设计的界面Figma 的界面是「设计工具自己设计了自己」的产物——一套排版精妙的典范定制变量字体 figmaSans 在极细字重 320与粗体字重 700之间调制并在大多数字体系统从未探索的中间值330、340、450、480、540设置断点。这种颗粒化的字重控制让每个文本元素拥有精确校准的视觉重量通过微差异而非「常规 vs 粗体」的钝器来建立层级。页面呈现迷人的二元性界面 Chrome 严格黑白字面上只检测到#000000与#ffffff两种颜色Hero 与产品展示区充满活力电光绿、亮黄、深紫、热粉的多色渐变爆炸式呈现。这种分离意味着设计系统本身是无色的把产品的彩色输出当作主角内容。Figma 的营销页本质上是一面白色画廊墙墙上展示彩色艺术。超越变量字体Figma 最具辨识度的是圆形与胶囊Circle-and-Pill几何按钮使用 50px 圆角pill或 50%图标按钮的完美圆形营造出有机的、类似工具调色板的感觉。虚线焦点指示器dashed 2px是有意的设计决策呼应 Figma 编辑器中的选区手柄——网站的 UI 语言引用产品的 UI 语言形成元设计闭环。核心特征清单定制变量字体 figmaSans非常规字重断点320、330、340、450、480、540、700界面 Chrome 严格黑白——颜色只存在于产品内容中figmaMono 用于大写字距的技术性标签Pill50px与圆形50%按钮几何呼应 Figma 编辑器选区手柄的虚线焦点描边充满活力的多色 Hero 渐变绿、黄、紫、粉OpenTypekern功能全局启用全文负字距——正文低至 -0.14px 至 -0.26px2. 色彩系统与角色绝对单色的 Chrome 层主色二元系统纯黑#000000全部文本、全部实心按钮、全部边框。界面唯一的「颜色」。纯白#ffffff全部背景、白色按钮、深色表面上的文本。二元的另一半。注意Figma 的营销站点在界面层只使用这两种颜色。所有鲜艳颜色只出现在产品截图、Hero 渐变和嵌入内容中。表面与背景纯白#ffffff页面主背景与卡片表面。玻璃黑rgba(0, 0, 0, 0.08)次要圆形按钮与玻璃效果的微妙深色叠加。玻璃白rgba(255, 255, 255, 0.16)深色/彩色表面上的按钮磨砂玻璃叠加。渐变系统Hero 渐变电光绿、亮黄、深紫、热粉的多段渐变是 Hero 区域的视觉签名代表工具的创作可能性。产品区渐变各产品区域Design、Dev Mode、Prototyping可在展示中使用各自独立色彩主题。仓库中的 Token 级证据上述色彩角色并非仅停留在文档描述而是被完整编码在 tokens.css 的:root中。该文件的头部注释给出了品牌身份的三句话总结其中关键的设计决策包括--bg: #ffffff; --surface: #ffffff——画廊墙表面无色调--surface-warm: var(--surface)——黑白系统没有暖色层直接别名--fg: #000000; --muted: rgba(0,0,0,0.55)——次要文本用透明度而非灰色--accent: #000000——在单色系统中黑色本身就是强调色--accent-active: rgba(0, 0, 0, 0.08)——即文档中的「玻璃黑」按钮背景--border: rgba(0, 0, 0, 0.12)——极简边框仅结构性需要处出现语义色--success: #16a34a; --warn: #eab308; --danger: #dc2626仅供数据语义使用不进入界面装饰。配套的 design-tokens.json 以od-design-tokens/v1格式记录了 56 个 token 的契约审计结果56 个 token 全部声明、全部有源可溯分层为A1-identity8、B-slot4、A226、A1-structure18审计评分为 100 分excellent且推荐重建标记为false——意味着该 token 体系与设计文档高度自洽可直接信任复用。3. 排版规则变量字体的微层级艺术字体家族主字体figmaSans回退链figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽 / 标签figmaMono回退链figmaMono Fallback, SF Mono, menlo在 tokens.css 中对应为--font-display/--font-body与--font-mono三个变量。完整排版层级表角色字体字号字重行高字距备注Display / HerofigmaSans86px (5.38rem)4001.00紧-1.72px最大冲击力极端字距区块标题figmaSans64px (4rem)4001.10紧-0.96pxFeature 区块标题副标题figmaSans26px (1.63rem)5401.35-0.26px强调的区块文本副标题细figmaSans26px (1.63rem)3401.35-0.26px轻量级区块文本Feature 标题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轻量级正文Mono 标签figmaMono18px (1.13rem)4001.30紧0.54px大写的区块标签Mono 小号figmaMono12px (0.75rem)4001.00紧0.6px大写微标签在 tokens.css 中字号刻度被归一化为--text-xs: 12px、--text-sm/base: 16px、--text-lg: 20px、--text-xl/2xl: 26px、--text-3xl: 64px、--text-4xl: 86px行高与字距则收敛为--leading-body: 1.40、--leading-tight: 1.00与--tracking-display: -0.02em注释明确标注-0.02em 即 86px 归一化后的 -1.72px。排版原则变量字体精度figmaSans 使用大多数系统从不触碰的字重——320、330、340、450、480、540。层级通过微妙字重差异而非剧烈跳跃建立。330 与 340 的差异几乎不可感知但在结构上意义重大。细体为基底大多数正文使用 320–340比典型的 400 Regular 更轻营造出空灵、通透的阅读体验与设计工具美学匹配。处处 Kern每个文本元素都启用 OpenTypekern功能——kerning 不是可选项而是结构性要求。负字距为默认连正文都使用 -0.1px 至 -0.26px 字距形成全文紧排Display 文本进一步压缩到 -0.96px 与 -1.72px。Mono 用于结构figmaMono 大写加正字距0.54px–0.6px形成技术性的路标标签。4. 组件样式四种按钮与签名式焦点按钮黑色实心Pill背景纯黑#000000文本纯白#ffffff圆角图标按钮为圆形50%焦点虚线 2px 描边用途最大强调白色 Pill背景纯白#ffffff文本纯黑#000000内边距8px 18px 10px垂直方向不对称圆角Pill50px焦点虚线 2px 描边用途深色/彩色表面上的标准 CTA玻璃深色背景rgba(0, 0, 0, 0.08)微妙深色叠加文本纯黑圆角圆形50%焦点虚线 2px 描边用途浅色表面上的次要动作玻璃浅色背景rgba(255, 255, 255, 0.16)磨砂玻璃文本纯白圆角圆形50%焦点虚线 2px 描边用途深色/彩色表面上的次要动作在 token 层面对应关系为--accent黑与--accent-on白承载实心按钮--accent-hover: rgba(0, 0, 0, 0.85)与--accent-active: rgba(0, 0, 0, 0.08)分别承载悬停与玻璃深色态圆角统一收敛为--radius-sm: 50pxpill——所有可交互元素与--radius-md/lg: 8px卡片--radius-pill: 9999px则作为通用胶囊兜底。卡片与容器背景纯白边框无或极简圆角6px小型容器、8px图片、卡片、对话框阴影微妙至中等高度效果内容产品截图作为卡片内容导航白色背景上的干净横向导航Logo黑色 Figma 字标产品 Tabspill 形50pxTab 导航链接黑色文本1px 下划线装饰CTA黑色 Pill 按钮Hover通过 CSS 变量切换文本色特色组件产品 Tab 栏横向排列的 pill 形 Tabs50px 圆角每个 Tab 代表一个 Figma 产品区域Design、Dev Mode、Prototyping 等激活 Tab 高亮Hero 渐变区全宽多色渐变背景86px Display 标题的白色文本叠加产品截图悬浮在渐变之中虚线焦点指示器所有可交互元素在获得焦点时使用dashed 2px描边呼应 Figma 编辑器中的选区手柄连接网站与产品的元设计决策关于焦点tokens.css 的注释特别说明--focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8)仅作为键盘导航的兜底阴影虚线 2px 描边在组件层components.html直接编码不通过 ring 实现——这是复刻该设计系统时最容易踩的坑不要用box-shadowring 代替虚线 outline。5. 布局原则画廊式节奏间距系统基准单位8px刻度1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px在 tokens.css 中主体刻度实现为--space-1: 4px到--space-12: 48px区块纵向节奏单独定义为--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px对应「画廊式留白」的跨断点呼吸感。网格与容器最大容器宽度最高 1920pxHero全宽渐变内容居中产品区交替展示布局页脚深色全宽区域响应范围559px 至 1920px容器在 token 层面对应为--container-max: 1920px加上三级 gutter桌面 40px、平板 24px、手机 16px--container-gutter-*。留白哲学画廊式节奏宽裕的间距让每个产品区像独立展品一样呼吸。彩色区块作为视觉呼吸渐变 Hero 与产品展示在单色界面区块之间提供色彩喘息。圆角刻度极小2px小型链接元素微妙6px小型容器、分隔线舒适8px卡片、图片、对话框Pill50pxTab 按钮、CTA圆形50%图标按钮、圆形元素6. 深度与层级以对比取代阴影层级处理用途平面层级 0无阴影页面背景、多数文本表面层级 1渐变/深色区上的白色卡片卡片、产品展示抬升层级 2微妙阴影悬浮卡片、Hover 状态阴影哲学Figma 克制地使用阴影。主要深度机制是背景对比彩色/深色区块上的白色内容以及产品截图本身的固有三维感。对应 token 为--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)——抬升阴影极轻且--elev-ring优先用 1px 描边而非投影来界定边缘。7. 该做与不该做Dos Donts该做Do使用 figmaSans 的精确变量字重320–540——颗粒化的字重控制本身就是设计界面严格黑白——颜色只来自产品内容所有可交互元素使用 Pill50px与圆形50%几何应用虚线 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最大宽度折叠策略Hero 文本86px → 64px → 48px产品 Tabs移动端横向滚动Feature 区块堆叠为单栏页脚多栏 → 堆叠9. Agent Prompt 指南把规范直接交给生成器快速颜色参考一切纯黑#000000与纯白#ffffff玻璃深色rgba(0, 0, 0, 0.08)玻璃浅色rgba(255, 255, 255, 0.16)组件 Prompt 示例「在充满活力的多色渐变绿、黄、紫、粉上创建 Hero。标题 86px figmaSans 字重 400行高 1.0字距 -1.72px。白色文本。白色 Pill CTA 按钮50px 圆角8px 18px 内边距。」「设计产品 Tab 栏pill 形按钮50px 圆角。激活态黑底白字。未激活态透明底黑字。figmaSans 20px 字重 480。」「构建区块标签figmaMono 18px大写字距 0.54px黑色文本。启用 Kern。」「创建正文 20px figmaSans 字重 330行高 1.40字距 -0.14px。白底纯黑。」迭代指南精确使用变量字重断点320、330、340、450、480、540、700界面永远是黑 白——绝不给 Chrome 加颜色虚线焦点描边不要实线正文字距永远为负Mono 标签字距永远为正按钮/Tab 用 Pill50px图标按钮用圆形50%10. 在 Open Design 仓库中的落地路径该设计系统不是孤立的文档而是 Open Design 设计系统目录体系中的一个标准包其落地资产构成了「规范 → token → 组件 → 预览」的完整证据链规范层DESIGN-de.md德文与 DESIGN.md英文承载视觉意图、约束与反模式包契约见 USAGE.md。Token 层tokens.css 是可直接粘贴进首个产物style块的完整 token 绑定design-tokens.json 提供 56 个 token 的契约审计报告评分 100 / excellenttailwind-v4.css 提供 Tailwind v4 集成视图。组件层components.html 与 components.manifest.json 提供精确选择器与状态清单复用组件组优于发明新控件。预览与审计层preview/colors.html、preview/spacing.html、preview/typography.html 用于视觉 sanity checksource/evidence.md 与 source/token-contract.report.json 作为打包 fixture 回填的审计证据system/ 下的 kit.html / kit.dark.html / tokens.default.json 则提供系统级组合样例与默认 token 快照。按照 USAGE.md 的约束落地时务必保留 schema token 名称以便跨品牌切换可靠、用--accent承载主操作与焦点态、优先复用组件清单中的既有控件、避免在:roottoken 块之外使用裸 hex 值、避免脱离 tokens.css 独立重定义 Tailwind 或设计 token 值——这些纪律正是保证「黑白 Chrome 多彩内容」这一品牌特征在任意生成产物中不失真的关键。赞分享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点击查看免费下载相关推荐open-design 中的 NVIDIA 设计系统解析以 76b900 为信号色的黑绿工业美学与 Agent 可执行规范open design 中的 NVIDIA 设计系统解析以 76b900 为信号色的黑绿工业美学与 Agent 可执行规范 导读本文以 open desigAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统实战以 Cal.com 为范本的灰度极简设计系统规范与 Token 落地指南OpenDesign 设计系统实战以 Cal.com 为范本的灰度极简设计系统规范与 Token 落地指南 类别Productivity SaaS生产AI 应用人工智能AI 技能设计系统媒体生成open-design 中的 Figma 设计系统包以 figmaSans 变体字重与黑白极简骨架复现协作设计工具美学open design 中的 Figma 设计系统包以 figmaSans 变体字重与黑白极简骨架复现协作设计工具美学 本指南以 open design 仓库AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考