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点击查看免费下载Flat 是 OpenDesign 内置的 Modern Minimal 类设计系统包主打二维极简主义鲜艳但不喧闹的色彩、干净的排版、完全去除 3D 效果的扁平层级。本指南以 design-systems/flat/DESIGN.md 为核心结合同目录下已提交的tokens.css、design-tokens.json、tailwind-v4.css与components.html等配套产物完整讲解 Flat 的视觉规范、语义化 token 分层、Tailwind v4 桥接方式与组件落地规则让 Agent 或前端开发者可以直接在真实项目中复现这一风格。1. Flat 是什么视觉主题与设计基调Flat 属于 OpenDesign 设计系统目录design-systems/下的 Modern Minimal 品类其核心定位在 DESIGN.md 中被概括为Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.即二维极简 明快色彩 无 3D 效果目标是打造快速、易用的企业级界面。对应的包元数据design-systems/flat/manifest.json将其归类为Visual style视觉风格minimal极简、enterprise企业级Color stance色彩立场primary主色、neutral中性、success成功、warning警告、danger危险五类语义色Design intent设计意图保持输出对该风格家族的可识别性同时不牺牲可用性与可读性在 OpenDesign 中design-systems/下的每个子目录都是一个可移植的设计系统包结构约定如下见 design-systems/README.mddesign-systems/slug/ ├── manifest.json # 稳定的发现元数据、来源与包内文件声明 ├── DESIGN.md # 面向 Agent 的规范化设计散文本指南主体 └── tokens.css # 规范化编译后的语义 token 样式表其中manifest.json负责发现与来源DESIGN.md是 Agent 阅读的设计意图tokens.css是真正可运行的编译产物。Flat 包在此基础上还额外提供了tailwind-v4.css、design-tokens.json、components.html、components.manifest.json、preview/预览页与source/审计证据详见后文第 8、9 节。2. 色彩规范语义色 Token 与使用优先级DESIGN.md 第 2 节给出了 Flat 的完整调色板标记为 Token from style foundations语义色值用途Primary主色#F2673CCTA 强调色Secondary次色#8B5CF6辅助强调Success成功#16A34A成功状态Warning警告#D97706警告状态Danger危险#DC2626错误/危险状态Surface表面#FFFFFF大面积背景与卡片Text文本#111827正文文字Neutral中性#FFFFFF由 surface 派生用于官方格式兼容使用优先级约束CTA 强调优先使用 Primary#F2673C大面积背景与卡片使用 Surface#FFFFFF正文保持在 Text#111827上以保证可读性对比度。需要说明的是DESIGN.md 记录的是风格意图层的色彩定义而包内已提交、真正会被组件引用的编译产物 design-systems/flat/tokens.css 中--accent解析为#2563eb蓝--bg为#f5f8ff浅蓝底这是由 curated bundled fixture 打包的语义 token 实现。根据 design-systems/flat/USAGE.md 的约定tokens.css是 Token 的唯一事实来源实现时应以:root块中的--accent等变量为准而不是在组件 CSS 里硬编码 DESIGN.md 中的裸色值这也是第 9 节 anti-patterns 明令禁止的行为。components.html的实际渲染也印证了这一点——按钮、聚焦环等均使用var(--accent)。3. 字体排印字阶、字族与字重DESIGN.md 第 3 节定义的排版骨架Scale字阶12 / 14 / 16 / 20 / 24 / 32Families字族primary Interdisplay Intermono JetBrains MonoWeights字重100 900 全量排版原则标题headings要承载风格个性正文body则优先保证可扫描性与对比度。对应到编译后的 tokens.css实际字阶被扩展并映射为 CSS 变量--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 36px; --text-3xl: 54px; --text-4xl: 76px; --leading-body: 1.52; /* 正文行高 */ --leading-tight: 1.06; /* 标题行高 */ --tracking-display: -0.025em; /* 标题字距收紧 */ --font-display: Inter, system-ui, sans-serif; --font-body: Inter, system-ui, sans-serif; --font-mono: SF Mono, ui-monospace, Menlo, monospace;注意DESIGN.md 中的 Scale20在 token 层由--text-lg: 18px近似承担token 层是最终生效值。参考组件 components.html 中标题的实际用法是font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display)正文则落在var(--font-body)var(--leading-body)上h1权重为 760、h2/h3为 700字号分别对应--text-4xl、--text-3xl、--text-xl。4. 间距与栅格4 的倍数字阶DESIGN.md 第 4 节规定Spacing scale间距刻度4 / 8 / 12 / 16 / 24 / 32各区块与组件之间保持一致的垂直节奏vertical rhythm列与模块对齐到可预测的栅格避免临时性的偏移量编译产物将这一刻度完整落为--space-*变量tokens.css--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;并补充了栅格相关的容器变量--container-max: 1180px内容最大宽度、--container-gutter-desktop: 36px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px三档响应式边距以及按断点区分的区块纵向留白--section-y-desktop: 96px/--section-y-tablet: 68px/--section-y-phone: 48px。在 components.html 中可以看到对应实现.container使用max-width: var(--container-max); margin-inline: auto并在1023px与639px两个断点切换 gutter 与 section 留白.stack * *用margin-block-start: var(--space-4)保证堆叠元素的垂直节奏。5. 布局与构图内容块优先DESIGN.md 第 5 节给出三条构图纪律优先使用内部内边距一致consistent internal padding的清晰内容块层级关系保持直观标题headline→ 支持文本support text→ 主操作primary action先用留白whitespace分离内容区域而不是急着加边框或阴影。这与第 4 节的少装饰、多留白一脉相承。参考 components.html 的.hero网格grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr)、.actions按钮组、.metric-grid三列指标卡等都遵循面板 一致 padding--space-5 细分隔线--border-soft的组合方式超过 860px 断点后各网格坍缩为单列保持移动端可用。6. 组件规范按钮、输入框与卡片DESIGN.md 第 6 节覆盖三类核心组件Buttons按钮主操作使用#F2673Ctoken 层即--accent次操作保持中性Inputs输入框强 focus-visible 状态、清晰的 label、可预期的错误提示Cards/sections卡片/区块全页使用一致的圆角、间距与层级elevation策略。包内的 components.manifest.json 对 components.html 做了机器可读的组件盘点可识别出 9 个组件组其中实际存在 7 组组件组状态关键选择器依赖的 Tokenbuttons按钮/CTA存在.btn、.btn-primary、.btn-secondary、:focus-visible--accent、--accent-on、--border、--elev-ring、--radius-md、--motion-fast、--ease-standardinputs表单控件存在.field、input、input:focus、label--border、--radius-sm、--space-2/4/5、--surfacecards卡片/面板存在.panel、.panel-head、.card-row、.tile--border、--elev-raised、--radius-lg、--surfacebadges徽标/状态存在.status、.status::before--meta、--success、--radius-pilllinks链接存在a—typography排版存在h1/h2/h3、.eyebrow、.lead--text-4xl/3xl/xl/lg、--fg-2layout布局原语存在.container、section--container-*、--section-y-*keyboard键盘提示不存在——icons图标槽位不存在——关键实现细节components.html按钮.btn最小高度 44px触控友好、圆角--radius-md、700 权重小字号.btn-primary背景var(--accent)、前景var(--accent-on)hover 使用var(--accent-hover)由color-mix(in oklab, var(--accent), black 8%)派生并translateY(-1px).btn-secondary白底 --border描边 --elev-ring细环聚焦统一走box-shadow: var(--focus-ring)。输入框input最小高度 46px、圆角--radius-sm、白底:focus时边框切换为var(--accent)并套用--focus-ring外发光label用--fg-2 700 字重。卡片.panel采用color-mix(in oklab, var(--surface), transparent 4%)背景 --border描边 --radius-lg--elev-raised唯一一处大阴影0 20px 52px rgba(16,24,40,0.11)与 Flat 的无深度基调形成克制的对比.mini-card与.tile则以--surface-warm/--surface 细描边区分层级。manifest 中tokens.unusedDeclared列出的--danger、--warn、--elev-flat、--motion-base、--space-1、--space-12等 token 在参考组件中未被引用属于已声明、待业务场景使用的预留变量新增组件时可优先消耗它们。7. 动效与交互短促、克制、以主色为信号DESIGN.md 第 7 节的动效纪律用微妙的过渡动画强调 Primary主色作为交互信号默认采用短促、有目的的过渡150–250ms与稳定缓动hover、focus-visible、active、disabled、loading 五种状态必须显式存在。token 层对应实现tokens.css--motion-fast: 150ms; --motion-base: 240ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);在 components.html 中.btn的 transition 覆盖background-color / border-color / color / transform / box-shadow五项统一使用var(--motion-fast) var(--ease-standard):focus-visible与input:focus共享同一条--focus-ring蓝色外发光保证焦点、悬停、状态共用同一套系统信号——这正是 manifest 中 Motion states 组件卡的描述。动效时长 150/240ms 落在 DESIGN.md 规定的 150–250ms 区间内。8. 语气与品牌克制、自信、面向产品DESIGN.md 第 8 节约束文案copy语气Tone 与视觉风格一致简洁、自信、产品化concise, confident, product-specific微文案microcopy保持行动导向避免空泛套话标题保留风格个性但 UI 标签保持字面直白literal and clear。参考 components.html 的实际文案如 No-shadow panels, clear color blocks, and simple direct interaction states.、Focus, hover, and status states share the same system signal.均是一句话点明设计主张的短句而按钮、指标标签Signal quality、Active flows、Response time则完全是直白的业务词汇——这正是 DESIGN.md 语气规范的落地样例。9. 反模式清单Flat 的禁区DESIGN.md 第 9 节明确四条禁令不得引入调色板之外的色彩——已有 token 能解决的问题就不要新造颜色不得用同一字号/字重铺平层级——否则标题与正文失去对比不得添加损害可读性与可访问性的装饰效果阴影堆叠、强渐变、拟物质感等不得在同一界面混用互不相关的视觉隐喻如同时出现扁平卡片与拟物按钮。这些约束在 USAGE.md 中进一步操作化为三条工程纪律保留 schema token 名称不变确保跨品牌切换cross-brand switching稳定使用--accent承担主操作、链接、聚焦态与唯一视觉焦点新增控件前先复用components.manifest.json中已有的组件组避免重复造轮子不要在tokens.css之外用裸 hex 值重新定义 Tailwind 或 design-token 的值。10. 工程化落地tokens.css 的 Token 分层与派生产物Flat 包的工程核心是 design-systems/flat/tokens.css它在单个:root块中声明了56 个 CSS 自定义属性并按 TOKEN_SCHEMA 契约划分为四层见 design-systems/flat/design-tokens.json 与 design-systems/flat/source/token-contract.report.json两份报告的摘要完全一致分层含义数量示例A1-identity品牌身份层色彩/字体主干8--bg、--surface、--fg、--muted、--accent、--font-display、--font-bodyA1-structure结构层字号、行高、容器、区块留白18--text-*、--leading-*、--container-*、--section-y-*A2派生/行为层hover、状态、圆角、动效、阴影26--accent-hover、--success、--space-*、--radius-*、--elev-*、--motion-*B-slot插槽层业务可覆写的中性位4--surface-warm、--fg-2、--meta审计报告给出该包score: 100、grade: excellent、recommendRebuild: false56 个声明 token 全部有tokens.css源码行号背书sourceBackedTokens: 56逐条sources: [tokens.css:7]式映射其中 26 个 A1 层 token 为源码直接声明、另 26 个为派生回填fallback无别名 token。注意 source/evidence.md 明确声明该包基于 OpenDesign 精选的内置 fixturecurated bundled fixture回填未对上游品牌仓库/站点做全新抓取因此不应声称拥有上游原始来源证据。Tailwind v4 桥接design-systems/flat/tailwind-v4.css 将tokens.css的变量映射进 Tailwind v4 的theme命名空间头部注释明确Derived from tokens.css. Keep tokens.css as the source of truth.派生自 tokens.css请以 tokens.css 为唯一事实来源import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-surface: var(--surface); --color-accent: var(--accent); --color-success: var(--success); --color-warn: var(--warn); --color-danger: var(--danger); --font-sans: var(--font-body); --font-mono: var(--font-mono); --text-2xl: var(--text-2xl); --spacing-1: var(--space-1); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); --shadow-focus-ring: var(--focus-ring); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); /* ...共 56 项一一映射... */ }映射后即可在 JSX/HTML 中使用bg-accent、text-fg-2、shadow-focus-ring、duration-fast、ease-standard、rounded-pill、spacing-section-desktop等 Tailwind 工具类且所有值最终仍解析回tokens.css的 CSS 变量做到一处定义、两端生效。预览与审计资产包内还包含可视化验证与审计配套预览页design-systems/flat/preview/colors.html、design-systems/flat/preview/typography.html、design-systems/flat/preview/spacing.html对应 manifest 中preview.pages的 colors / typography / spacing 三个角色用于对色彩、排版、间距做视觉 sanity check系统样张design-systems/flat/system/index.html、design-systems/flat/system/kit.html及深色变体kit.dark.html、design-systems/flat/system/tokens.default.json审计证据source/evidence.mdsource/token-contract.report.jsonsource/tokens.source.json按 USAGE.md 约定应视为bundled fixture 回填的审计证据design-tokens.json与tailwind-v4.css属于派生产物应通过报告与 token 样式表重新生成而非手工编辑。11. 在 OpenDesign 中的使用流程结合 USAGE.md 与 design-systems/README.md在 OpenDesign 项目中使用 Flat 的推荐路径读取包契约先读 design-systems/flat/USAGE.md 理解包的结构与约定再读 design-systems/flat/DESIGN.md 掌握视觉意图、约束与反模式注入 Token将 design-systems/flat/tokens.css 的:root块粘贴到首个 artifact 的style块最前面之后所有组件 CSS 一律通过var(--*)引用禁止在块外出现裸 hex 值盘点组件用 design-systems/flat/components.manifest.json 快速确认可复用组件组需要精确选择器或状态定义时再打开 design-systems/flat/components.html视觉校验需要时打开 design-systems/flat/preview/ 下的 colors / typography / spacing 三个预览页做一致性检查与框架桥接Tailwind v4 用户直接引入 design-systems/flat/tailwind-v4.css即可获得全部映射好的工具类保持 token 命名严格保留 schema token 名称--accent、--surface、--fg等这是跨品牌切换可靠性的前提——OpenDesign 的 design-systems 目录下还有 150 余个同类包统一的 token 契约让同一套组件在不同品牌包之间平滑换肤。另外在 OpenDesign 运行时层面design-systems 目录会在每次/api/design-systems请求时被扫描选择 Flat 包会把其设计上下文DESIGN.md tokens.css组合进 Agent 提示词修改包内容后刷新 Design System 界面即可生效无需重启 daemon见 design-systems/README.md。12. 小结Flat 的完整工作流可以概括为一条单向链路DESIGN.md 定义风格意图 → tokens.css 固化为 56 个语义 token → design-tokens.json / token-contract.report.json 提供可审计的契约 → tailwind-v4.css 桥接框架工具类 → components.html 提供参考实现 → preview/ 与 system/ 提供视觉验证。无论你是 Agent 还是前端工程师只要遵循token 为唯一事实来源、四层分层不混淆、反模式清单不触碰、组件组优先复用这四条纪律就能稳定产出符合 Flat 风格、且可无障碍切换其他 OpenDesign 品牌包的界面。赞分享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 中 Expo 设计系统包的使用指南从 DESIGN.md 到 tokens.css 的完整落地实践OpenDesign 中 Expo 设计系统包的使用指南从 DESIGN.md 到 tokens.css 的完整落地实践 在 OpenDesign 的 desAI 应用人工智能AI 技能设计系统媒体生成以 OpenDesign 设计系统包还原 Apple 风格界面DESIGN.md 全量解读与 tokens.css 落地实战以 OpenDesign 设计系统包还原 Apple 风格界面DESIGN.md 全量解读与 tokens.css 落地实战 本篇技术指南以 OpenDesiAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 粗野主义Brutalism设计系统实现指南从 DESIGN.md 设计意图到 tokens.css 工程化落地OpenDesign 粗野主义Brutalism设计系统实现指南从 DESIGN.md 设计意图到 tokens.css 工程化落地 粗野主义设计系统是AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
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点击查看免费下载Flat 是 OpenDesign 内置的 Modern Minimal 类设计系统包主打二维极简主义鲜艳但不喧闹的色彩、干净的排版、完全去除 3D 效果的扁平层级。本指南以 design-systems/flat/DESIGN.md 为核心结合同目录下已提交的tokens.css、design-tokens.json、tailwind-v4.css与components.html等配套产物完整讲解 Flat 的视觉规范、语义化 token 分层、Tailwind v4 桥接方式与组件落地规则让 Agent 或前端开发者可以直接在真实项目中复现这一风格。1. Flat 是什么视觉主题与设计基调Flat 属于 OpenDesign 设计系统目录design-systems/下的 Modern Minimal 品类其核心定位在 DESIGN.md 中被概括为Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.即二维极简 明快色彩 无 3D 效果目标是打造快速、易用的企业级界面。对应的包元数据design-systems/flat/manifest.json将其归类为Visual style视觉风格minimal极简、enterprise企业级Color stance色彩立场primary主色、neutral中性、success成功、warning警告、danger危险五类语义色Design intent设计意图保持输出对该风格家族的可识别性同时不牺牲可用性与可读性在 OpenDesign 中design-systems/下的每个子目录都是一个可移植的设计系统包结构约定如下见 design-systems/README.mddesign-systems/slug/ ├── manifest.json # 稳定的发现元数据、来源与包内文件声明 ├── DESIGN.md # 面向 Agent 的规范化设计散文本指南主体 └── tokens.css # 规范化编译后的语义 token 样式表其中manifest.json负责发现与来源DESIGN.md是 Agent 阅读的设计意图tokens.css是真正可运行的编译产物。Flat 包在此基础上还额外提供了tailwind-v4.css、design-tokens.json、components.html、components.manifest.json、preview/预览页与source/审计证据详见后文第 8、9 节。2. 色彩规范语义色 Token 与使用优先级DESIGN.md 第 2 节给出了 Flat 的完整调色板标记为 Token from style foundations语义色值用途Primary主色#F2673CCTA 强调色Secondary次色#8B5CF6辅助强调Success成功#16A34A成功状态Warning警告#D97706警告状态Danger危险#DC2626错误/危险状态Surface表面#FFFFFF大面积背景与卡片Text文本#111827正文文字Neutral中性#FFFFFF由 surface 派生用于官方格式兼容使用优先级约束CTA 强调优先使用 Primary#F2673C大面积背景与卡片使用 Surface#FFFFFF正文保持在 Text#111827上以保证可读性对比度。需要说明的是DESIGN.md 记录的是风格意图层的色彩定义而包内已提交、真正会被组件引用的编译产物 design-systems/flat/tokens.css 中--accent解析为#2563eb蓝--bg为#f5f8ff浅蓝底这是由 curated bundled fixture 打包的语义 token 实现。根据 design-systems/flat/USAGE.md 的约定tokens.css是 Token 的唯一事实来源实现时应以:root块中的--accent等变量为准而不是在组件 CSS 里硬编码 DESIGN.md 中的裸色值这也是第 9 节 anti-patterns 明令禁止的行为。components.html的实际渲染也印证了这一点——按钮、聚焦环等均使用var(--accent)。3. 字体排印字阶、字族与字重DESIGN.md 第 3 节定义的排版骨架Scale字阶12 / 14 / 16 / 20 / 24 / 32Families字族primary Interdisplay Intermono JetBrains MonoWeights字重100 900 全量排版原则标题headings要承载风格个性正文body则优先保证可扫描性与对比度。对应到编译后的 tokens.css实际字阶被扩展并映射为 CSS 变量--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 36px; --text-3xl: 54px; --text-4xl: 76px; --leading-body: 1.52; /* 正文行高 */ --leading-tight: 1.06; /* 标题行高 */ --tracking-display: -0.025em; /* 标题字距收紧 */ --font-display: Inter, system-ui, sans-serif; --font-body: Inter, system-ui, sans-serif; --font-mono: SF Mono, ui-monospace, Menlo, monospace;注意DESIGN.md 中的 Scale20在 token 层由--text-lg: 18px近似承担token 层是最终生效值。参考组件 components.html 中标题的实际用法是font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display)正文则落在var(--font-body)var(--leading-body)上h1权重为 760、h2/h3为 700字号分别对应--text-4xl、--text-3xl、--text-xl。4. 间距与栅格4 的倍数字阶DESIGN.md 第 4 节规定Spacing scale间距刻度4 / 8 / 12 / 16 / 24 / 32各区块与组件之间保持一致的垂直节奏vertical rhythm列与模块对齐到可预测的栅格避免临时性的偏移量编译产物将这一刻度完整落为--space-*变量tokens.css--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;并补充了栅格相关的容器变量--container-max: 1180px内容最大宽度、--container-gutter-desktop: 36px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px三档响应式边距以及按断点区分的区块纵向留白--section-y-desktop: 96px/--section-y-tablet: 68px/--section-y-phone: 48px。在 components.html 中可以看到对应实现.container使用max-width: var(--container-max); margin-inline: auto并在1023px与639px两个断点切换 gutter 与 section 留白.stack * *用margin-block-start: var(--space-4)保证堆叠元素的垂直节奏。5. 布局与构图内容块优先DESIGN.md 第 5 节给出三条构图纪律优先使用内部内边距一致consistent internal padding的清晰内容块层级关系保持直观标题headline→ 支持文本support text→ 主操作primary action先用留白whitespace分离内容区域而不是急着加边框或阴影。这与第 4 节的少装饰、多留白一脉相承。参考 components.html 的.hero网格grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr)、.actions按钮组、.metric-grid三列指标卡等都遵循面板 一致 padding--space-5 细分隔线--border-soft的组合方式超过 860px 断点后各网格坍缩为单列保持移动端可用。6. 组件规范按钮、输入框与卡片DESIGN.md 第 6 节覆盖三类核心组件Buttons按钮主操作使用#F2673Ctoken 层即--accent次操作保持中性Inputs输入框强 focus-visible 状态、清晰的 label、可预期的错误提示Cards/sections卡片/区块全页使用一致的圆角、间距与层级elevation策略。包内的 components.manifest.json 对 components.html 做了机器可读的组件盘点可识别出 9 个组件组其中实际存在 7 组组件组状态关键选择器依赖的 Tokenbuttons按钮/CTA存在.btn、.btn-primary、.btn-secondary、:focus-visible--accent、--accent-on、--border、--elev-ring、--radius-md、--motion-fast、--ease-standardinputs表单控件存在.field、input、input:focus、label--border、--radius-sm、--space-2/4/5、--surfacecards卡片/面板存在.panel、.panel-head、.card-row、.tile--border、--elev-raised、--radius-lg、--surfacebadges徽标/状态存在.status、.status::before--meta、--success、--radius-pilllinks链接存在a—typography排版存在h1/h2/h3、.eyebrow、.lead--text-4xl/3xl/xl/lg、--fg-2layout布局原语存在.container、section--container-*、--section-y-*keyboard键盘提示不存在——icons图标槽位不存在——关键实现细节components.html按钮.btn最小高度 44px触控友好、圆角--radius-md、700 权重小字号.btn-primary背景var(--accent)、前景var(--accent-on)hover 使用var(--accent-hover)由color-mix(in oklab, var(--accent), black 8%)派生并translateY(-1px).btn-secondary白底 --border描边 --elev-ring细环聚焦统一走box-shadow: var(--focus-ring)。输入框input最小高度 46px、圆角--radius-sm、白底:focus时边框切换为var(--accent)并套用--focus-ring外发光label用--fg-2 700 字重。卡片.panel采用color-mix(in oklab, var(--surface), transparent 4%)背景 --border描边 --radius-lg--elev-raised唯一一处大阴影0 20px 52px rgba(16,24,40,0.11)与 Flat 的无深度基调形成克制的对比.mini-card与.tile则以--surface-warm/--surface 细描边区分层级。manifest 中tokens.unusedDeclared列出的--danger、--warn、--elev-flat、--motion-base、--space-1、--space-12等 token 在参考组件中未被引用属于已声明、待业务场景使用的预留变量新增组件时可优先消耗它们。7. 动效与交互短促、克制、以主色为信号DESIGN.md 第 7 节的动效纪律用微妙的过渡动画强调 Primary主色作为交互信号默认采用短促、有目的的过渡150–250ms与稳定缓动hover、focus-visible、active、disabled、loading 五种状态必须显式存在。token 层对应实现tokens.css--motion-fast: 150ms; --motion-base: 240ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);在 components.html 中.btn的 transition 覆盖background-color / border-color / color / transform / box-shadow五项统一使用var(--motion-fast) var(--ease-standard):focus-visible与input:focus共享同一条--focus-ring蓝色外发光保证焦点、悬停、状态共用同一套系统信号——这正是 manifest 中 Motion states 组件卡的描述。动效时长 150/240ms 落在 DESIGN.md 规定的 150–250ms 区间内。8. 语气与品牌克制、自信、面向产品DESIGN.md 第 8 节约束文案copy语气Tone 与视觉风格一致简洁、自信、产品化concise, confident, product-specific微文案microcopy保持行动导向避免空泛套话标题保留风格个性但 UI 标签保持字面直白literal and clear。参考 components.html 的实际文案如 No-shadow panels, clear color blocks, and simple direct interaction states.、Focus, hover, and status states share the same system signal.均是一句话点明设计主张的短句而按钮、指标标签Signal quality、Active flows、Response time则完全是直白的业务词汇——这正是 DESIGN.md 语气规范的落地样例。9. 反模式清单Flat 的禁区DESIGN.md 第 9 节明确四条禁令不得引入调色板之外的色彩——已有 token 能解决的问题就不要新造颜色不得用同一字号/字重铺平层级——否则标题与正文失去对比不得添加损害可读性与可访问性的装饰效果阴影堆叠、强渐变、拟物质感等不得在同一界面混用互不相关的视觉隐喻如同时出现扁平卡片与拟物按钮。这些约束在 USAGE.md 中进一步操作化为三条工程纪律保留 schema token 名称不变确保跨品牌切换cross-brand switching稳定使用--accent承担主操作、链接、聚焦态与唯一视觉焦点新增控件前先复用components.manifest.json中已有的组件组避免重复造轮子不要在tokens.css之外用裸 hex 值重新定义 Tailwind 或 design-token 的值。10. 工程化落地tokens.css 的 Token 分层与派生产物Flat 包的工程核心是 design-systems/flat/tokens.css它在单个:root块中声明了56 个 CSS 自定义属性并按 TOKEN_SCHEMA 契约划分为四层见 design-systems/flat/design-tokens.json 与 design-systems/flat/source/token-contract.report.json两份报告的摘要完全一致分层含义数量示例A1-identity品牌身份层色彩/字体主干8--bg、--surface、--fg、--muted、--accent、--font-display、--font-bodyA1-structure结构层字号、行高、容器、区块留白18--text-*、--leading-*、--container-*、--section-y-*A2派生/行为层hover、状态、圆角、动效、阴影26--accent-hover、--success、--space-*、--radius-*、--elev-*、--motion-*B-slot插槽层业务可覆写的中性位4--surface-warm、--fg-2、--meta审计报告给出该包score: 100、grade: excellent、recommendRebuild: false56 个声明 token 全部有tokens.css源码行号背书sourceBackedTokens: 56逐条sources: [tokens.css:7]式映射其中 26 个 A1 层 token 为源码直接声明、另 26 个为派生回填fallback无别名 token。注意 source/evidence.md 明确声明该包基于 OpenDesign 精选的内置 fixturecurated bundled fixture回填未对上游品牌仓库/站点做全新抓取因此不应声称拥有上游原始来源证据。Tailwind v4 桥接design-systems/flat/tailwind-v4.css 将tokens.css的变量映射进 Tailwind v4 的theme命名空间头部注释明确Derived from tokens.css. Keep tokens.css as the source of truth.派生自 tokens.css请以 tokens.css 为唯一事实来源import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-surface: var(--surface); --color-accent: var(--accent); --color-success: var(--success); --color-warn: var(--warn); --color-danger: var(--danger); --font-sans: var(--font-body); --font-mono: var(--font-mono); --text-2xl: var(--text-2xl); --spacing-1: var(--space-1); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); --shadow-focus-ring: var(--focus-ring); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); /* ...共 56 项一一映射... */ }映射后即可在 JSX/HTML 中使用bg-accent、text-fg-2、shadow-focus-ring、duration-fast、ease-standard、rounded-pill、spacing-section-desktop等 Tailwind 工具类且所有值最终仍解析回tokens.css的 CSS 变量做到一处定义、两端生效。预览与审计资产包内还包含可视化验证与审计配套预览页design-systems/flat/preview/colors.html、design-systems/flat/preview/typography.html、design-systems/flat/preview/spacing.html对应 manifest 中preview.pages的 colors / typography / spacing 三个角色用于对色彩、排版、间距做视觉 sanity check系统样张design-systems/flat/system/index.html、design-systems/flat/system/kit.html及深色变体kit.dark.html、design-systems/flat/system/tokens.default.json审计证据source/evidence.mdsource/token-contract.report.jsonsource/tokens.source.json按 USAGE.md 约定应视为bundled fixture 回填的审计证据design-tokens.json与tailwind-v4.css属于派生产物应通过报告与 token 样式表重新生成而非手工编辑。11. 在 OpenDesign 中的使用流程结合 USAGE.md 与 design-systems/README.md在 OpenDesign 项目中使用 Flat 的推荐路径读取包契约先读 design-systems/flat/USAGE.md 理解包的结构与约定再读 design-systems/flat/DESIGN.md 掌握视觉意图、约束与反模式注入 Token将 design-systems/flat/tokens.css 的:root块粘贴到首个 artifact 的style块最前面之后所有组件 CSS 一律通过var(--*)引用禁止在块外出现裸 hex 值盘点组件用 design-systems/flat/components.manifest.json 快速确认可复用组件组需要精确选择器或状态定义时再打开 design-systems/flat/components.html视觉校验需要时打开 design-systems/flat/preview/ 下的 colors / typography / spacing 三个预览页做一致性检查与框架桥接Tailwind v4 用户直接引入 design-systems/flat/tailwind-v4.css即可获得全部映射好的工具类保持 token 命名严格保留 schema token 名称--accent、--surface、--fg等这是跨品牌切换可靠性的前提——OpenDesign 的 design-systems 目录下还有 150 余个同类包统一的 token 契约让同一套组件在不同品牌包之间平滑换肤。另外在 OpenDesign 运行时层面design-systems 目录会在每次/api/design-systems请求时被扫描选择 Flat 包会把其设计上下文DESIGN.md tokens.css组合进 Agent 提示词修改包内容后刷新 Design System 界面即可生效无需重启 daemon见 design-systems/README.md。12. 小结Flat 的完整工作流可以概括为一条单向链路DESIGN.md 定义风格意图 → tokens.css 固化为 56 个语义 token → design-tokens.json / token-contract.report.json 提供可审计的契约 → tailwind-v4.css 桥接框架工具类 → components.html 提供参考实现 → preview/ 与 system/ 提供视觉验证。无论你是 Agent 还是前端工程师只要遵循token 为唯一事实来源、四层分层不混淆、反模式清单不触碰、组件组优先复用这四条纪律就能稳定产出符合 Flat 风格、且可无障碍切换其他 OpenDesign 品牌包的界面。赞分享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 中 Expo 设计系统包的使用指南从 DESIGN.md 到 tokens.css 的完整落地实践OpenDesign 中 Expo 设计系统包的使用指南从 DESIGN.md 到 tokens.css 的完整落地实践 在 OpenDesign 的 desAI 应用人工智能AI 技能设计系统媒体生成以 OpenDesign 设计系统包还原 Apple 风格界面DESIGN.md 全量解读与 tokens.css 落地实战以 OpenDesign 设计系统包还原 Apple 风格界面DESIGN.md 全量解读与 tokens.css 落地实战 本篇技术指南以 OpenDesiAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 粗野主义Brutalism设计系统实现指南从 DESIGN.md 设计意图到 tokens.css 工程化落地OpenDesign 粗野主义Brutalism设计系统实现指南从 DESIGN.md 设计意图到 tokens.css 工程化落地 粗野主义设计系统是AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
