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 展开。该包以 DESIGN.md含多语言版本如 DESIGN-vi.md、DESIGN-zh.md为规范文本以 tokens.css 为语义 Token 事实来源以 components.html 为可复用的参考组件夹具。读完本文你将掌握如何在 OpenDesign 的 Design System 工作流中完整复刻「Figma 式」视觉语言——从 320~700 的非常规可变字重阶梯、绝对黑白灰的界面 Chrome、50px/50% 的 Pill 与圆形几何到虚线焦点环、负字距排版策略与 Agent Prompt 编写范式。一、包结构与阅读顺序一个便携的设计系统包在 OpenDesign 中每个design-systems/slug/子目录都是一个可移植的设计系统包。根据 design-systems/README.md 的定义一个合格包至少包含三个文件manifest.json稳定发现元数据与来源声明、DESIGN.md面向 Agent 的规范正文、tokens.css编译后的语义 Token 样式表。Figma 包在基础三件套之上还携带了一整套「富包文件」。以 manifest.json 为准Figma 包声明了如下文件契约字段文件作用files.designDESIGN.md面向 Agent 的设计规范正文files.tokenstokens.css语义 Token 样式表唯一事实来源files.designTokensdesign-tokens.json派生 Design Tokens JSONfiles.tailwindtailwind-v4.css派生 Tailwind v4 主题映射files.componentscomponents.html参考组件夹具componentsManifestcomponents.manifest.json组件/Token 派生索引usageUSAGE.mdAgent 阅读顺序与使用约定previewpreview/colors.html、typography.html、spacing.html视觉抽查页面sourceFilessource/evidence.md、source/tokens.source.json、source/token-contract.report.json导入证据与 Token 契约报告按 USAGE.md 推荐的阅读顺序先读USAGE.md理解包契约 → 再读DESIGN.md把握视觉意图与反模式 → 将tokens.css粘贴进产物第一个style块 → 需要精确选择器或状态时查阅components.html与components.manifest.json→ 需要视觉抽查时打开preview/页面。值得注意的事实边界根据 source/evidence.md该包基于 OpenDesign 策展的 bundled fixture 回填而成并非对上游 Figma 官网的重新抓取因此manifest.json中source.type标注为bundled。使用时应避免声称其来自上游一手资料。二、视觉主题与氛围黑白 Chrome 与彩色内容的二元对立原文档用一句话概括了 Figma 营销页的设计哲学「界面 Chrome 严格黑白颜色只存在于产品内容之中」。这一论断在 Token 层得到了精确印证——tokens.css 的第 8~28 行注释中写道--bg: #ffffff; --surface: #ffffff画廊白墙无表面色阶--accent: #000000在单色系统中黑色就是强调色。页面呈现一种耐人寻味的对立界面框架层仅检测到#000000与#ffffff两种颜色而 hero 区与产品展示区却爆发着多色渐变——电光绿、亮黄、深紫、热粉。这暗示着设计系统本身无色产品五颜六色的输出才是主角Figma 的营销页本质上是一面陈列彩色艺术品的白色画廊墙。围绕这一核心原文档总结出八个关键特征它们是理解整套规范的总纲自定义可变字体 figmaSans字重停靠点异常320、330、340、450、480、540、700界面 Chrome 严格黑白——颜色只存在于产品内容figmaMono 用于大写技术标签配宽字距Pill50px与圆形50%按钮几何虚线焦点环呼应 Figma 编辑器中的选择手柄多色渐变 hero绿、黄、紫、粉全局启用 OpenTypekern全文负字距——连正文都在 -0.14px 到 -0.26px。其中「虚线焦点环」是最具识别度的元设计meta-design选择网站 UI 语言直接引用了产品 UI 语言编辑器选择手柄实现了网站与产品之间的视觉互文。三、颜色系统Token 层级的精确落地主色二元对纯黑#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 中这套颜色被绑定为完整的语义 Token任何组件实现都不允许绕过它们写裸色值Token值语义--bg/--surface#ffffff页面背景 / 卡片表面画廊白墙无表面色阶--surface-warmvar(--surface)别名——黑白系统没有暖色层--fg/--fg-2#000000前景 / 次级墨色黑白系统无第二墨色层--mutedrgba(0, 0, 0, 0.55)白底上的次级文字--metargba(0, 0, 0, 0.40)元数据、说明文字--border/--border-softrgba(0, 0, 0, 0.12)/0.06结构所需的最小边框--accent/--accent-on#000000/#ffffff黑色即强调色实心 CTA--accent-hover/--accent-activergba(0, 0, 0, 0.85)/rgba(0, 0, 0, 0.08)悬停压暗 / 玻璃黑次级按钮底色--success/--warn/--danger#16a34a/#eab308/#dc2626语义状态色界面外的状态反馈这些映射同样出现在 design-tokens.json 中该文件对 56 个 Token 逐一记录了值、类型、分层A1-identity / B-slot / A2 / A1-structure与来源行号如--bg指向tokens.css:32综合评分为 100、评级excellent可作为 Token 契约可追溯性的审计证据。四、排版系统可变字重微差即层级字体家族主字体figmaSans回退链figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽 / 标签figmaMono回退链figmaMono Fallback, SF Mono, menlo。Token 层分别绑定为--font-display/--font-body与--font-monotokens.css 第 59~61 行其中 display 与 body 共用 figmaSans 家族仅在使用场景上区分。完整排版层级表原文档核心不可缩水角色字体字号字重行高字距备注Display / HerofigmaSans86px (5.38rem)4001.00紧-1.72px最大冲击力极端字距Section 标题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轻字重正文Mono 标签figmaMono18px (1.13rem)4001.30紧0.54px大写区块标签小号 MonofigmaMono12px (0.75rem)4001.00紧0.6px大写小标签四条排版铁律可变字重精度figmaSans 使用大多数系统从未触及的字重停靠点——320、330、340、450、480、540。层级通过微妙的字重差异而非戏剧性跳变产生330 与 340 的差异几乎不可感知却具有结构性意义。轻量为基底多数正文使用 320–340比常规 400 更轻营造空灵轻盈的阅读体验契合设计工具美学。处处 Kern每个文本元素都启用 OpenTypekern——字距调整不是可选项而是结构性要素。负字距为默认连正文都使用 -0.1px 到 -0.26px 的字距形成全局紧致文本display 文本进一步压缩到 -0.96px 与 -1.72px。Mono 则相反大写 正字距0.54px–0.6px构成技术路标标签。组件层实现证据在 components.html 中这套排版被翻译成可直接复用的 CSS。几个关键实现点全局开启 kernbody { font-feature-settings: kern; }标题与按钮同样声明保证 kerning 贯穿所有文本Display 标题h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); }其中--tracking-display: -0.02em即 86px 下的 -1.72px按 em 归一化Section 标题h2 { line-height: 1.10; letter-spacing: -0.015em; }对应 64px 下的 -0.96px副标题h3 { line-height: 1.35; letter-spacing: -0.01em; font-weight: 540; }对应 26px 下的 -0.26px 与 540 字重Mono 标签.mono-label { font-family: var(--font-mono); font-size: 18px; text-transform: uppercase; letter-spacing: 0.54px; line-height: 1.30; }导语段落.lead { font-size: var(--text-lg); line-height: 1.40; color: var(--muted); font-weight: 330; letter-spacing: -0.007em; }——注意 330 字重与 -0.007em 负字距同时出现正是「轻量为基底 负字距默认」两条铁律的直接体现。五、组件规范Pill 与圆形的几何霸权按钮四态原文档定义了四种按钮其差异完全由背景表面决定几何上则统一于 Pill/圆形按钮背景文字圆角焦点定位纯黑 Pill#000000#ffffff圆形 50%图标按钮虚线 2px最大强调白色 Pill#ffffff#000000Pill 50px虚线 2px深色/彩色表面上的标准 CTA玻璃黑rgba(0, 0, 0, 0.08)纯黑圆形 50%虚线 2px亮色表面上的次级动作玻璃白rgba(255, 255, 255, 0.16)纯白圆形 50%虚线 2px深色/彩色表面上的次级动作白色 Pill 的 padding 为8px 18px 10px——纵向不对称这是 Figma 规范中的一个细节特征用于补偿视觉重心。在 components.html 中对应.btn、.btn-black、.btn-white.btn { border-radius: var(--radius-sm); /* 50px pill */ } .btn-black { background: var(--fg); color: var(--accent-on); } .btn-black:hover { background: rgba(0, 0, 0, 0.85); } .btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }悬停态与 Token 完全对齐btn-black:hover的rgba(0, 0, 0, 0.85)即--accent-hover次级按钮的rgba(0, 0, 0, 0.08)即--accent-active玻璃黑。卡片与容器背景纯白边框无或极简圆角6px小容器、8px图片、卡片、对话框阴影微妙到中等高度的 elevation 效果内容产品截图。Token 层对应--radius-md: 8px、--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)组件层对应.card { border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--elev-raised); }。导航白色背景上的简洁水平导航Logo黑色 Figma wordmark产品标签Pill 形50px标签导航链接黑色文字 1px 下划线CTA黑色 Pill 按钮Hover通过 CSS 变量改变文字颜色。特色组件产品标签栏Product Tab Bar水平 Pill 形标签50px 圆角每个标签代表一个 Figma 产品区Design、Dev Mode、Prototyping 等激活标签高亮。组件层实现为.tab-bar/.tab/.tab.active.tab { padding: 8px 18px; border-radius: var(--radius-sm); font-weight: 480; background: transparent; color: var(--fg); } .tab.active { background: var(--fg); color: var(--accent-on); } .tab:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }注意激活态即「黑底白字」二元对非激活态为「透明底黑字」且字重使用非常规的 480——与 Agent Prompt 指南中的示例完全一致。Hero 渐变区全宽多色渐变背景白色文字叠加 86px display 标题产品截图漂浮在渐变中。虚线焦点指示器所有交互元素 focus 时使用dashed 2px边框引用 Figma 编辑器选择手柄——连接网站与产品的元设计选择。实现上统一为outline: 2px dashed var(--fg); outline-offset: 2px;刻意不使用实线也不用 box-shadow 方案--focus-ring仅作为键盘导航的后备。六、布局系统画廊式节奏与 8px 基座间距系统基本单位8px完整阶梯1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px。Token 层沉淀为--space-1(4px) 到--space-12(48px) 的 8 个命名档位另有--section-y-desktop: 96px/--section-y-tablet: 64px/--section-y-phone: 40px三档区块纵向节奏。Grid 与容器容器最大宽度1920pxHero全宽渐变 居中内容产品区交替展示页脚深色全宽区块响应式范围 559px 到 1920px。Token 层对应--container-max: 1920px以及三档 gutter桌面 40px、平板 24px、手机 16px。留白哲学画廊式节奏宽阔间距让每个产品区像独立展品一样呼吸色块作为视觉呼吸hero 渐变与产品展示在单色界面区之间提供色彩释放。圆角阶梯级别值用途最小2px小链接元素微妙6px小容器、分隔线舒适8px卡片、图片、对话框Pill50px标签按钮、CTA圆形50%图标按钮、圆形元素Token 层--radius-sm: 50px所有交互元素、--radius-md/lg: 8px卡片、--radius-pill: 9999px。七、深度与 Elevation用背景对比而非阴影造深度层级处理用途平面Level 0无阴影页面背景、多数文字表面Level 1渐变/深色区块上的白色卡片卡片、产品展示悬浮Level 2微妙阴影悬浮卡片、hover 状态阴影哲学Figma 克制地使用阴影。主要的深度机制是背景对比彩色/深色区块上的白色内容以及产品截图本身固有的维度感。这一哲学在 Token 层被固化--elev-flat: none、--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08)仅一档阴影、--elev-ring: 0 0 0 1px var(--border)环形描边而非阴影。八、响应式行为从 559px 到 1920px 的六档断点断点名宽度主要变化小屏手机560px紧凑布局、堆叠平板560–768px小幅调整小桌面768–960px双列布局桌面960–1280px标准布局大桌面1280–1440px扩展超宽1440–1920px最大宽度折叠策略Hero 文本 86px → 64px → 48px 阶梯缩小产品标签在手机上横向滚动功能区块堆叠为单列页脚多列 → 堆叠。组件层的响应式证据见 components.html.hero-grid在max-width: 1023px下坍缩为单列.features-grid按1023px三列 → 两列与639px→ 单列两级降档容器 gutter 与区块纵向节奏也按1023px/639px两个媒体查询切换三档 Token 值。九、设计 Tokens 工程化从 CSS 到 JSON 与 Tailwind v4Figma 包的 Token 体系并非孤立 CSS而是一套可被校验、派生与跨品牌复用的工程链路tokens.css唯一事实来源56 个语义 Token 全部声明于:rootdesign-tokens.json派生产物记录每个 Token 的分层A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个、置信度与来源行号综合评分 100 / 评级excellenttailwind-v4.css派生产物通过import ./tokens.css与theme { --color-*: var(--*) }将全部 Token 桥接为 Tailwind v4 主题变量components.manifest.json派生索引记录了 34 个选择器、17 个类、19 个元素并列出全部声明的 56 个 Token 与引用关系source/token-contract.report.json把每个 TOKEN_SCHEMA 绑定回tokens.css的声明行作为契约审计证据。根据 USAGE.md 与 source/evidence.md 的约定派生文件是缓存而非竞争性事实源design-tokens.json与tailwind-v4.css应随时可从 Token 样式表重新生成不应手工编辑使用时避免在复制的:rootToken 块之外使用裸 hex 值也避免独立于tokens.css重新定义 Tailwind 或 design-token 值——这样跨品牌切换design-systems 目录下还有 airbnb、stripe、notion 等 150 个同类包才能保持可靠。十、Agent Prompt 指南把规范变成可执行指令原文档专设一章面向 Agent 的提示词指南这是该设计系统包与 OpenDesign「Agent 即设计引擎」定位衔接的关键接口。颜色速查一切元素「纯黑#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 圆角padding 8px 18px。」「设计一个产品标签栏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 标签字距永远是正值按钮/标签用 Pill50px图标按钮用圆形50%。十一、Dos and Donts可执行的边界清单应当使用 figmaSans 精确可变字重320–540——精细的字重控制本身就是设计保持界面严格黑白——颜色只来自产品内容所有交互元素使用 Pill50px与圆形50%几何应用虚线 2px 焦点环——标志性的无障碍模式全部文本启用kern标签使用 figmaMono 大写 正字距全文应用负字距-0.1px 到 -1.72px。不应不要给界面添加颜色——单色调色板是绝对的不要使用标准字重400、500、600、700——请使用可变字体的独特停靠点320、330、340、450、480、540按钮不要用尖锐直角——只允许 Pill 与圆形几何不要用实线焦点环——虚线才是签名不要将正文字重提高到 450 以上——轻字重美学是核心正文不要使用正字距——永远是负值。十二、如何在自己的 OpenDesign 工作流中使用该包查看直接阅读 design-systems/figma/DESIGN.md 与 tokens.css以及 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页复刻组件以 components.html 为参考夹具所有可见值都应来自tokens.css切勿另起炉灶写裸色值接入 Tailwind v4直接importtailwind-v4.css即可获得bg-fg、text-accent、rounded-pill等主题化工具类校验契约通过 components.manifest.json 核对组件与 Token 覆盖通过 design-tokens.json 核对 Token 分层与来源行号。结合 design-systems/README.md 可知在 OpenDesign 的 Design System 界面或受支持的项目创建流程中选择该包其设计上下文会被组装进 Agent 的提示词中——本文第十节的 Prompt 指南正是 Agent 在执行时逐条遵循的规范契约。掌握「黑白 Chrome 可变字重微差 Pill/圆形几何 虚线焦点」这一组合拳你就能在任何 OpenDesign 项目中稳定复现 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 Figma 设计系统规范解读黑白色壳下的可变字体与 pill 几何实战指南OpenDesign Figma 设计系统规范解读黑白色壳下的可变字体与 pill 几何实战指南 本文基于 design systems/figma/DESIAI 应用人工智能AI 技能设计系统媒体生成Apple 风格设计系统实现指南从 DESIGN 规范到 OpenDesign 可执行 Token 体系Apple 风格设计系统实现指南从 DESIGN 规范到 OpenDesign 可执行 Token 体系 导读 本文以 OpenDesign 仓库内置的 deAI 应用人工智能AI 技能设计系统媒体生成open-design 中的 Figma 设计系统包以 figmaSans 变体字重与黑白极简骨架复现协作设计工具美学open design 中的 Figma 设计系统包以 figmaSans 变体字重与黑白极简骨架复现协作设计工具美学 本指南以 open design 仓库AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考