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 System 2.0 包机制、通过 AgentClaude Code / Codex / DeepSeek Harness 等生成设计与前端工件的开发者与审查者。文章以design-systems/framer/USAGE.md为骨架完整展开该包的使用契约、设计语言、语义 Token、组件夹具与派生文件并结合tokens.css、components.html、components.manifest.json等仓库源码给出可验证的实操细节。读完你可以在自己的 Agent 工作流中正确装配该包、按契约产出风格一致的黑蓝极简界面并理解其背后的校验与派生机制。一、包是什么一份 Agent 可消费的 Framer 风格设计契约在 OpenDesign 的design-systems/目录下每个子目录都是一个可移植的设计系统包portable design-system package。按 design-systems/README.md 的说明从 Design System 界面或受支持的项目创建工作流中选中某个包会把它的设计上下文design context组合进 Agent 提示词从而让编码 Agent 在生成原型、落地页、仪表盘、幻灯片时自动遵循该品牌的视觉语言。Framer 包design-systems/framer/属于 Design Creative 类别其manifest.json声明了完整的包结构USAGE.md面向 Agent 与审查者的使用指南即本文所依据的核心文档DESIGN.md视觉意图、约束与反模式anti-patternstokens.css语义化 Token 样式表单一事实来源components.html独立组件夹具fixture58 个选择器、32 个类、24 个元素components.manifest.json派生的组件/Token 索引design-tokens.json派生的 Design Tokens JSON56 个 Token评分 100tailwind-v4.css派生的 Tailwind v4 映射preview/视觉检查页colors / typography / spacingsource/导入证据与 Token 契约报告。manifest.json同时标注了该包的来源type: bundled来源为OpenDesign curated bundled fixture——即它不是对上游 Framer 官网的实时抓取而是基于仓库内策展的捆绑夹具DESIGN.md、tokens.css、components.html整理而成。这一点对下文使用纪律中的引证边界至关重要。二、阅读顺序Agent 装配该包的标准动作USAGE.md开篇给出了明确的 Read Order这是包契约的入口务必按序执行先读本文件USAGE.md理解包契约再读DESIGN.md掌握视觉意图、约束与反模式把tokens.css粘贴进第一个工件artifact的style块再写组件 CSS用components.manifest.json做紧凑的组件清单查阅当需要精确选择器或状态时打开components.html需要视觉抽查时检查preview/页面。这套顺序隐含了 OpenDesign Design System 2.0 的三层事实关系契约USAGE.md→ 意图DESIGN.md→ 落地tokens.css components.html。其中第 3 步是硬性要求——tokens.css是唯一 Token 事实来源任何组件 CSS 都必须建立在其之上而不是自行定义一套 Token对应下文 Avoid 清单的第 2 条。三、设计语言黑、蓝、压缩排版三要素DESIGN.md用八个章节定义了 Framer 风格的核心视觉身份USAGE.md将其提炼为四条 Highlights这里结合DESIGN.md原文展开1. 纯黑虚空画布Void Black#000000是页面底色DESIGN.md明确要求是绝对的黑absolute void不是暖黑、不是炭灰、不是带棕调的深色。tokens.css中--bg: #000000直接绑定了这一决策注释里写得很直白#0a0a0a或任何近黑微调都会退化成普通深色主题虚空本身才是品牌。与之配套的--surface: #090909Near Black用于抬升的暗色表面。2. GT Walsheim 与极端负字距展示字体使用GT Walsheim Framer Medium字重恒定 500配合极端负字距display hero 在 110px 字号下 letter-spacing 达-5.5px形成被压缩、蓄势待发的标题张力。tokens.css把这一规则 em 相对化--tracking-display: -0.05em——即-5.5px at 110px的等比换算字号缩放时字距按比例跟随DESIGN.md §3 明确 tracking 随字号缩放的原则。DESIGN.md的排版层级表完整定义了 16 个层级从 110px 的 Display Hero行高 0.85一路到 7px 的 Micro Uppercase。3. Framer Blue 唯一强调色#0099ff是全系统唯一的彩色动作链接、边框、焦点环、徽标着色。tokens.css注释强调这是one-accent-color system——主 CTA 反而是纯白实心胶囊#ffffff背景 黑字蓝色只出现在交互性时刻。这条决策在components.html的.btn-primary中得到了编码验证background: #ffffff; color: #000000;。4. 胶囊形按钮交互元素全部使用胶囊形状40px–100px 圆角--radius-pill: 9999px实现了完整胶囊。components.html中.btn { border-radius: var(--radius-pill); }的注释直接引用 DESIGN.mdnever sharp corners。5. 反向阴影系统DESIGN.md§6 定义了三级深度Level 0 纯平、Level 1 蓝色 1px 环rgba(0, 153, 255, 0.15) 0 0 0 1px、Level 3 悬浮0.5px 白色顶边高光 30px 深环境阴影。tokens.css将三者原样编码为--elev-flat、--elev-ring、--elev-raised其中--elev-raised被注释要求逐字复刻、两层都不可删因为它决定了悬浮而非粘贴的质感。四、语义 Token56 个变量的分层与关键决策tokens.css是整个包的 Token 事实来源共声明 56 个变量按design-tokens.json的分层统计分布在四层层数量代表 TokenA1-identity品牌身份8--bg、--fg、--muted、--border、--accent、--font-display、--font-body、--text-3xlA1-structure结构18--text-xs~--text-4xl、--leading-*、--tracking-display、--section-y-*、--container-*A2组件槽位26--accent-hover/active、--success/warn/danger、--space-*、--radius-*、--elev-*、--focus-ring、--motion-*、--ease-standardB-slot别名槽4--surface-warm、--fg-2、--meta、--border-softdesign-tokens.json的 summary 显示56 个 Token 全部有源可溯sourceBackedTokens: 56契约评分 100、评级 excellent、不需要重建recommendRebuild: false。这背后是source/token-contract.report.json——它把每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行如--bg对应tokens.css:86。值得注意的几个为品牌弯曲 schema 约定的决策tokens.css文件头注释逐条记录了依据--border绑定蓝色 alpha 而非实色rgba(0, 153, 255, 0.15)让--elev-ring: 0 0 0 1px var(--border)默认就复现 Framer 标志性的蓝色发丝环--border-soft: rgba(255,255,255,0.06)则用于不应发光的内部行分隔线--surface-warm别名到--surface品牌明确禁止暖色背景DESIGN.md §7 Dont所以没有独立的暖色层前景 4 级斜坡独立绑定--fg纯白→--fg-2Muted Silver#a6a6a6→--mutedGhost White 0.6→--meta0.4保证跨品牌组件在--fg-2/--muted/--meta槽位上解析到 Framer 的真实层级而非塌缩语义色继承 schema 默认--success: #16a34a、--warn: #eab308、--danger: #dc2626——Framer 营销面极少渲染状态唯一声明色就是 Framer Blue字体栈带系统回退GT Walsheim / Inter / Azeret Mono 均未捆绑字体文件栈尾列出-apple-system、system-ui等回退保证未加载自定义字体时工件仍可读与 USAGE.md 中字体需外部链接的边界一致。五、组件夹具与清单从选择器到组件组的证据链components.html是独立的组件参考夹具438 行含 1 个style块components.manifest.json从它和tokens.css派生索引。其 fixture 统计为selectorCount 58、classCount 32、elementCount 24、styleBlockCount 1。组件按 9 个 group 组织每个 group 都携带 selector、class、element 与 tokenReferences 四个维度组 ID说明代表选择器关键 Token 引用buttons按钮与 CTA.btn-primary纯白胶囊、.btn-secondary磨砂玻璃胶囊、:active缩放、:focus-visible焦点环--fginputs表单字段.field input:focus-visible蓝色边框 焦点环、::placeholder--border、--border-soft、--radius-sm、--surface、--metacards卡片与面板.card--elev-ring蓝色 1px 环、.card:hover蓝色环加强 悬浮层--elev-raisedbadges徽标/状态标签.badge-accent蓝色文字 88% 透明蓝底 inset 蓝环、.badge-dot--muted、--radius-pilllinks链接a--accent蓝、a:hover下划线 3px offset--accentkeyboard键盘提示kbdmono、细蓝边框、近黑底--border、--fg-2、--font-monoicons图标槽位.iconsvg 容器无typography排版工具类.eyebrow11px 大写 0.18em 字距、.lead、.body-muted--fg、--fg-2、--tracking-displaylayout布局原语.container、.stack-3~6、.row-between、.features-grid--container-*、--space-*、--border-softToken 卫生检查是这套机制的亮点components.manifest.json的tokens字段给出了declared56、referenced46、unusedDeclared如--accent-hover、--danger、--text-2xl等 9 个、undeclaredReferenced0四组数据。这意味着任何组件里引用了一个 tokens.css 没声明的变量都会在契约检查中暴露保证夹具与 Token 源永远同步。六、派生文件与来源证据只读的缓存层按 design-systems/README.md派生文件是缓存而非竞争性事实来源components.manifest.json由components.htmltokens.css派生design-tokens.json由 token-contract 报告派生必须与tokens.css一致tailwind-v4.css由tokens.css派生。tailwind-v4.css的实现就是这一关系的直接证据文件头注释写着 Derived from tokens.css. Keep tokens.css as the source of truth.随后通过import ./tokens.csstheme { ... }把每个 CSS 变量映射为 Tailwind 主题命名空间如--color-accent: var(--accent)、--shadow-raised: var(--elev-raised)、--spacing-section-desktop: var(--section-y-desktop)。使用 Tailwind v4 的场景可以直接消费这些映射但修改必须回到tokens.css。来源证据位于source/evidence.md与source/token-contract.report.json。evidence.md明确了证据边界本包由策展的捆绑夹具派生不声称对上游品牌仓库/网站的实时抓取报告则把每个 TOKEN_SCHEMA 绑定映射回tokens.css声明行。这与 USAGE.md 的 Avoid 清单第 3 条互为印证不要声称原始上游来源证据。七、使用纪律Do 与 AvoidUSAGE.md给出的 Do / Avoid 是 Agent 与审查者的验收红线逐条展开如下Do必须遵守保持 schema Token 名称原样保证跨品牌切换可靠——这是 151 个包共享同一 TOKEN_SCHEMA定义见 design-systems/_schema/tokens.schema.ts转发自packages/contracts/src/design-systems/token-schema.ts的前提用--accent处理主操作、链接、焦点态和一个明确的视觉焦点元素——蓝色是唯一强调色不许扩散优先复用components.manifest.json中的组件组不要发明新控件把source/文件当作捆绑夹具回填fixture backfill的审计证据。Avoid禁止事项在复制的:rootToken 块之外使用裸 hex 值脱离tokens.css独立重定义 Tailwind 或 design-token 值声称原始上游来源证据——本包基于策展捆绑夹具添加components.html或DESIGN.md中未体现的新组件配方。从DESIGN.md§7 还能补充更细的 Dont禁用暖色暗背景、GT Walsheim 禁用 700 字重Medium 500 就是品牌、不得引入 Framer Blue 之外的强调色、非交互元素不得用大圆角卡片 10–15px只有按钮 40px、不得加装饰性插画、标题不得正字距、不得用重投影、不得在内容区放置浅色背景、系统只用几何无衬线。八、Agent 实操提示词配方与迭代检查DESIGN.md§9 为 Agent 提供了直接可用的提示词配方Quick Color Reference Example Component Prompts摘录并扩展如下注意所有数值都对应到 tokens.css 变量Hero 区纯黑背景 110px 白字 GT Walsheim 标题letter-spacing-5.5px、line-height0.85 100px 圆角纯白胶囊 CTA黑字——对应--text-4xl、--tracking-display、.btn-primary特性卡片黑背景 1px Framer Blue 环阴影rgba(0,153,255,0.15) 12px 圆角 Inter 22px/700 白色标题 #a6a6a6灰体——对应--elev-ring、--radius-md、--text-xl、--fg-2导航栏黑底 Inter 15px 白色链接 磨砂胶囊 CTArgba(255,255,255,0.1)、40px 圆角——对应.btn-secondary产品展示区黑底全宽截图 10px 圆角 双层阴影0.5px 白顶高光 rgba(0,0,0,0.25)30px 环境阴影——对应--elev-raised定价卡片纯黑表面 Framer Blue 选中态边框 白色 24px Inter 粗标题 14px 正文 纯白胶囊 CTA。迭代检查清单DESIGN.md §9 Iteration GuideAgent 自查用一次只打磨一个组件——暗色画布让每个元素都很珍贵始终校验 GT Walsheim 标题的字距——极端负字距不可妥协检查 Framer Blue 只出现在交互元素上——绝不作装饰背景或非链接文字色确保所有按钮都是胶囊形——任何方角立即破坏 Framer 美学测试磨砂玻璃表面严格为rgba(255,255,255,0.1)——过浓像 bug过淡会消失。九、响应式与无障碍基线DESIGN.md§8 定义了断点策略components.html的媒体查询是它的落地实现断点宽度关键变化Mobile809px单列、特性区堆叠、hero 110px→56pxh1字号与-0.04em字距、汉堡导航Tablet809–1199px双列特性开始、h185px、h248px、容器 gutter 16pxDesktop1199px完整布局、110px display hero、gutter 24pxcomponents.html中的.features-grid断点3 列 → 2 列 → 1 列与.form-row1.2fr 1fr → 1fr验证了这套策略。触控目标方面胶囊按钮最小 40px 高 10px 垂直内边距超过 WCAG 44px 最小要求导航链接 15px 文字配宽松内边距移动端 CTA 全宽胶囊。区块节奏按--section-y-desktop: 120px→ tablet 80px → phone 60px 收缩。manifest.json的 craft 字段还建议包应用 color 与 accessibility-baseline 两条工艺约束可作为审查时的补充检查项。十、延伸阅读路径包入口与契约design-systems/framer/USAGE.md视觉意图与反模式design-systems/framer/DESIGN.mdToken 单一事实来源design-systems/framer/tokens.css组件夹具与选择器design-systems/framer/components.html组件/Token 索引design-systems/framer/components.manifest.jsonToken 契约报告与派生 JSONdesign-systems/framer/source/token-contract.report.json、design-systems/framer/design-tokens.jsonTailwind v4 映射design-systems/framer/tailwind-v4.css包结构与清单规范design-systems/README.mdToken schema 契约design-systems/_schema/tokens.schema.ts若需视觉抽查preview/colors.html、preview/typography.html、preview/spacing.html三个页面可分别核对色板、排版阶梯与间距体系system/目录下的index.html、kit.html、kit.dark.html与tokens.default.json则提供系统级展示。赞分享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 设计系统包剖析Bugatti 影院黑极简美学、Token 契约与 Agent 提示词指南OpenDesign 设计系统包剖析Bugatti 影院黑极简美学、Token 契约与 Agent 提示词指南 Bugatti 是 OpenDesign 仓库AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 的 Dithered 设计系统包USAGE 契约、Token 结构与 Agent 实战指南OpenDesign 的 Dithered 设计系统包USAGE 契约、Token 结构与 Agent 实战指南 OpenDesign 以「便携式设计系统包」AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 苹果设计系统包契约指南USAGE.md 驱动的 tokens.css 与组件夹具使用全解OpenDesign 苹果设计系统包契约指南USAGE.md 驱动的 tokens.css 与组件夹具使用全解 本文面向在 OpenDesign 中运行设计系AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考