Apple 风格设计系统实现指南：从 DESIGN 规范到 OpenDesign 可执行 Token 体系

Apple 风格设计系统实现指南从 DESIGN 规范到 OpenDesign 可执行 Token 体系【免费下载链接】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/apple设计系统包为主线完整解读一套以「Apple 启发」为蓝本的 web 设计语言从二进制章节节奏、SF Pro 排版层级、单一蓝色强调体系到胶囊 CTA 与克制深度原则。文章不仅完整覆盖 DESIGN-id.md 的九大章节规范还深入 tokens.css 的 token 绑定决策与 lint-artifact.ts 的审查规则说明这套品牌语言如何被编译为 Agent 可直接粘贴执行的结构化设计 Token。读完本文你将掌握 Apple 风格界面从「视觉意图 → 设计 Token → 组件实现 → 代码审查」的完整落地链路并可直接在 OpenDesign 的 Design System 界面或项目创建流程中选用该包。一、包结构与它在 OpenDesign 中的角色在 OpenDesign 中每个设计系统都是一个「便携式设计系统包」portable design-system package。据 design-systems/README.md目前捆绑目录包含151 个包每个捆绑包具有相同的最小机器可读结构design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.cssmanifest.json稳定的发现元数据、来源与声明路径apple 包清单DESIGN.md面向 Agent 的规范设计散文本项目另有 18 种语言翻译包括本文章所依据的 DESIGN-id.mdtokens.css编译后的语义 token 样式表是规范的机器可读形态。Apple 包还额外声明了丰富文件design-tokens.json、tailwind-v4.css、components.html、components.manifest.json、USAGE.md、preview/colors、typography、spacing 三页与source/evidence 与 token 契约报告。这些字段是运行时输入而非结构占位符提示词组合会消费USAGE.md、tokens.css、组件信息、导入模式与 craft 绑定包/静态文件 API 只暴露声明过的 preview/source 文件不扩大文件系统边界。manifest.json还声明了该包的 craft 绑定craft: { applies: [], suggested: [color, accessibility-baseline], exemptions: [] }这意味着选用 Apple 包时系统会建议配套 color.md 与 accessibility-baseline.md 两条 craft 约束。目录扫描在每次/api/design-systems请求时执行修改包后刷新 Design System 界面即可无需重启 daemon。命名规范提示目录 slug 必须与manifest.id一致并使用规范化 ASCIIfiles.design固定为DESIGN.md、files.tokens固定为tokens.css运行时 manifest 元数据优先于旧版 Markdown H1 与 Category:约定后者仅作为旧包的兼容回退详见 docs/design-systems.md。二、视觉主题与氛围一套系统、两种齿轮Apple 的 web 语言是一套「精确的编辑系统」在「画廊般的宁静」与「零售密度的信息块」之间切换。视觉基调始终保持克制宽阔的中性画布、安静的界面铬chrome、以及几乎承担全部表达重量的产品摄影。界面被设计为「消失」让硬件、材质与工艺选项成为叙事的绝对前景。文档基于五个被分析的页面apple.com首页、Environment、Store、iPhone 购买流程与配件商店见 DESIGN-id.md 第 2 节引用总结出一致但非单一的节奏营销表面首页与 Environment使用电影化的「黑白章节」商业表面Store 与 Shop 流程引入更紧凑的间距、更多工具控件与更密集的卡片堆叠但不破坏核心品牌语法。结果是一套系统、两种齿轮showcase展示模式与 transaction交易模式。关键特征清单特征说明二进制章节节奏深黑场景#000000与浅中性场域#f5f5f7交替单一蓝色强调族#0071e3、#0066cc、#2997ff专用于动作与链接语义双操作模式电影化展示模块 高密度商业配置器共存于同一系统图像依赖视觉戏剧性几乎全部交给产品图与材质工艺UI 铬保持视觉纤薄紧凑标题度量SF Pro Displaysemibold 紧凑 body/链接排版SF Pro Text药丸/胶囊几何从18px到980px的半径以及圆形控件构成招牌动作语言克制深度对比度与表面分离承担大部分分层工作多页面色块节奏黑色 hero 章节 → 浅中性 merchandising 场域 → 白色实用零售表面 → 深色微表面控件这套「章节节奏」并非营销话术而是被 tokens.css 显式编译成了结构化 token--bg: #ffffff最常见的默认页面背景、--surface: #f5f5f7卡片与特性带的浅灰、以及--surface-warm: #fbfbfdhero 与浅灰带之间的近白亮度过渡层。文件头注释特别强调Apple 的浅色表面阶梯真实存在三级若把--surface-warm折叠为var(--surface)的别名就会抹掉一个真实的品牌特征。三、色彩体系与角色分工3.1 主色角色色值用途绝对黑Absolute Black#000000沉浸式 hero 画布、高戏剧性产品章节、深色 UI 锚点浅苹果灰Pale Apple Gray#f5f5f7特性带、对比块与编辑过渡的主浅色表面近黑墨色Near-Black Ink#1d1d1f浅色画布上的主文本与深色填充控件3.2 次要色与强调色角色色值用途苹果动作蓝Apple Action Blue#0071e3主动作填充与焦点信号品牌强调正文链接蓝Body Link Blue#0066cc内联链接色针对长文可读性优化高亮度链接蓝High-Luminance Link Blue#2997ff深色场景中需要更强对比的亮链接处理3.3 表面与背景角色色值用途纯白画布Pure White Canvas#ffffff零售/产品列表背景、密集交易区石墨表面 A#272729深色卡片与媒体控件上下文层石墨表面 B#262629稍深的深色工具层用于控件分组石墨表面 C#28282b抬升的深色支撑表面石墨表面 D#2a2a2c最深的抬升台阶用于更丰富深色场景中的分离3.4 中性色与文本角色色值用途次级中性灰#6e6e73正文次级文案、辅助描述、三级元数据柔和边框灰#d2d2d7分隔线、微妙描边、低调工具容器中等边框灰#86868b产品配置与过滤器语境中更强的字段描边工具深灰#424245store 语境中的深中性文本/表面交叉色3.5 语义色与强调选择/焦点信号#0071e3在营销与商业语境中共享作为焦点与选中状态信号错误/警告/成功文档明确记录「在提取的表面集合中未一致观察到不同的语义调色板」——这是一个诚实的已知缺口而非缺陷。3.6 渐变系统提取页面以实色表面为绝对主导。视觉丰富度来自摄影与工艺渲染而非持久性 UI 渐变。3.7 Token 绑定中的关键决策源码级tokens.css 的:root块将上述色彩翻译为 lint 强制要求的标准 token 名--bg、--surface、--accent等并记录了七条「非显而易见」的品牌绑定决策--surface-warm绑定真实第三级#fbfbfd而非--surface别名--fg-2、--meta、--border-soft绑定独立值——Apple 的中性文本阶梯是著名的四级近黑墨 → 工具深灰 → 次级中性灰 → 中等边框灰--radius-pill绑定980px而非 9999px——Apple 招牌胶囊 CTA 在公开 CSS 中字面使用 980px这个数字本身就是品牌可辨识细节--accent-hover使用#0077ed变亮约 4%而非变暗——Apple 的蓝色按钮在 hover 时提亮--accent-active则变暗为#0066cc即文档正文链接蓝作为按压色调--tracking-display为-0.015em对应 80px hero 上的 -1.2px--section-y-desktop为 100px比 schema 默认 80px 更慷慨让产品图说话--ease-standard为cubic-bezier(0.28, 0, 0.22, 1)——Apple 过渡「急减速然后稳定从不回弹」。这些决策直接回应了 design-systems/_schema/AGENTS.md 中定义的 token 契约分层A1-identity--bg、--fg、--accent、--font-display品牌决定、缺失即失败、A2品牌决定但带 schema 回退如--motion-fast、--success、B-slot品牌可声明为别名或独立值如--fg-2、--surface-warm。语义色--success: #16a34a、--warn: #eab308、--danger: #dc2626因文档明确「无独立语义调色板」而继承 schema 默认值并约定「无论何种情况占用面积不超过 5%」。四、排版规则4.1 字体家族与分工Display 家族SF Pro Display回退SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serifText 家族SF Pro Text回退链同上分工Display 家族负责 hero/产品标题与 merchandising 标题Text 家族负责导航、控件、标签与密集商业文案。tokens.css 将回退链完整镜像SF Pro Icons → Helvetica Neue → Helvetica → Arial → sans-serif保证非 macOS 客户端渲染时落到最接近的实用替代品mono 栈则由SF Mono领衔Apple 品牌 mono后接 schema 回退。4.2 层级阶梯完整表格角色字号字重行高字距说明Hero Display XL80px6001.00-1.05-1.2pxEnvironment/store hero 级Hero Display L56px6001.07-0.28px首页 hero 时刻Section Display48px500-6001.08-0.144px主要章节标题Product Heading40px6001.10normal产品与活动章节标题Feature Display38px6001.210.152px设备与 merchandising 标注Promo Display32px300-6001.09-1.130.128px 至 0.352px模块级子 heroCard/Product Title28px6001.140.196px瓦片级命名与关键文案Utility Heading24px6001.170.216px / -0.2px配置器与分组内容标题Link/Action Heading21px6001.14-1.380.231px较大的促销链接Subhead19px6001.210.228px紧凑章节引言Body Primary17px4001.47-0.374px标准正文与零售描述Body Emphasis17px6001.24-0.374px强调标签与关键数值Control Label14px400-6001.29-1.47-0.224px按钮、辅助标签、紧凑导航文本Micro UI12px400-6001.00-1.33-0.12px小字、微标签Legal/Meta10px4001.30-1.47-0.08px密集元数据与法律支持文本4.3 原则与字体替代原则跨页面类型连续性同一排版 DNA 贯穿电影化发布页与产品购买流程防止营销/商业的品牌分裂大字号压缩Display 层级使用紧凑 leading 与受控 tracking呈现「机械加工感」与产品优先零售深度的可读密度SF Pro Text 在紧凑性与足够的纵向节奏之间平衡支撑长产品列表与选项矩阵测量过的字重阶梯600 是主导强调字重700 选择性出现300 仅在较大行中用于对比。字体替代注意事项最接近的免费替代是Inter文本密集实现与Inter Tight近似 SF Pro Display 度量用于标题。替换时应将 body 字号行高略微上调0.02 至 0.06并降低负 tracking 强度以保持可读性。Token 化佐证tokens.cssApple 的 body 基线是17px而非 web 常见的 16px因为 SF Pro Text 在 Retina 上按 17 度量调校--text-base重绑为任何其他值都会破坏品牌阅读质感。display 天花板是 80px 的--text-4xl。leading 包络在顶部异常紧凑display 尺寸处于 1.00-1.10而 body 异常透气--leading-body: 1.47远超 web 默认 1.4——两个数字都直接来自规范第 3 节。五、组件样式5.1 按钮主填充动作#0071e3背景、#ffffff文本、8px 半径、紧凑水平内边距常见 8px 15px用于决定性的购买/推进动作深色填充动作#1d1d1f背景、#ffffff文本、8px 半径用于浅色表面需要受控高对比主动作时药丸/胶囊动作家族大型胶囊动作半径18px-56px极端药丸链接980px确立 Apple「柔和而精确」的 CTA 轮廓工具筛选/按钮外壳浅色外壳#fafafc或半透明白配柔和灰边框#d2d2d7/#86868b用于密集配置语境按压行为激活控件通常略微缩小或移动填充以示物理按压确认。5.2 卡片与容器编辑/产品卡片#f5f5f7或白色场域上的浅色卡片极简框架、图像优先构图深色工具卡片石墨阶梯#272729至#2a2a2c用于浮层、媒体控件与深色语境模块配置器面板圆角容器常见 12px-18px边界定义清晰而克制Carousel/Spotlight 模块更大圆角外壳28px-36px用于精选内容通道。5.3 输入与表单零售输入字段半透明或白色背景、深色文本#1d1d1f、边框主导的容器#86868b选择控件圆形/类开关控件几何在产品选择界面频繁出现密度策略表单字段保持视觉安静让设备图像与定价层级保持主导。5.4 导航全球营销导航紧凑深色半透明条 小号链接 克制图标Store/子商店导航层附加工具条、chip 与分段控件用于类目与产品收窄链接层级链接蓝始终是首要交互信号中性文本支撑密集导航集。5.5 图像处理对象优先摄影硬件与配件置于受控实色表面前景高保真工艺渲染反射/材质细节是视觉说服的核心混合取景full-bleed hero 场景与圆角零售卡片、紧裁 merchandising 缩略图共存。5.6 其他特色组件产品配置器矩阵组合 chip、类 radio 控件与上下文价格/摘要块的选项堆栈Carousel 控制点/箭头柔和浮层中的圆形控件词汇Environment 故事面板编辑排版与电影化产品/环境视觉融合的叙事章节。5.7 组件层落地方式在包内组件不仅停留在散文描述还沉淀为可复用资产components.html是独立组件夹具components.manifest.json是由components.htmltokens.css派生的紧凑组件/token 索引manifest.json 将其声明为运行时字段。USAGE.md 给出的读取顺序是先读 USAGE 理解包契约 → 读 DESIGN.md 理解视觉意图与反模式 →在写组件 CSS 前把 tokens.css 粘贴进第一个 artifact 的style块→ 用components.manifest.json做紧凑组件清单涉及精确选择器或状态时打开components.html→ 需要视觉核对时检查preview/页面。六、布局原则6.1 间距系统基础单位实际为8px但系统支持密集微步进以实现精确对齐跨页面高频复用的间距值2、4、6、7、8、9、10、12、14、17、20px营销与零售流程均可见的通用节奏常量8px 单元脚手架 14-20px 工具间隔用于组件内边距与列表间距。tokens.css 采用共享 schema 的 4-8-12-16-20-24-32-48 间距刻度并继承默认值组件内部不匹配 token 的值如 Apple 的 14px/17px 工具间隔保持内联于调用点而非派生额外间距 token。6.2 网格与容器展示页大中央列 宽阔水平呼吸空间 全宽色块章节商业页更紧凑的多列产品/控件网格 频繁模块化堆叠容器行为桌面宽度下受约束的可读核心 慷慨外边距。对应 token--container-max: 1024px将行长保持在 SF Pro Text 舒适量度上限约 80ch17px同时让章节带保持 full-bleedgutter 阶梯 22px桌面/18px平板/16px手机——比默认更紧凑以呼应「宽阔水平呼吸但列纪律化内容」的平衡。6.3 留白哲学场景节奏主要视觉章节使用宽阔上下呼吸空间必要时压缩信息零售页面有意压缩间距在每个 viewport 展示更多可操作信息对比驱动的分离章节过渡更多依赖表面变化而非装饰性分隔线。对应 token--section-y-desktop: 100px、--section-y-tablet: 64px、--section-y-phone: 40px比默认 80/48/32 更宽的包络。6.4 圆角半径刻度半径用途5px微型工具链接/标签与小号外壳8px-12px标准控件与紧凑字段16px-18px卡片、模块框架与商业面板28px-36px更大模块与 spotlight 容器56px / 100px / 980px胶囊、大药丸与招牌细长 CTA50%圆形媒体与选择控件Token 化映射tokens.css--radius-sm → 8px紧凑控件与字段、--radius-md → 12px标准按钮、配置器 chip、--radius-lg → 18px卡片、模块框架、商业面板、--radius-pill → 980pxApple 招牌胶囊 CTA保留字面值而非折叠为 9999px。28-36px spotlight 层与 56px 胶囊子层是组件内部一次性值在出现第二次使用之前不派发 token。七、深度与层级层级处理用途Level 0平坦中性表面#ffffff、#f5f5f7、#000000主要叙事与产品舞台Level 1柔和边框容器#d2d2d7、#86868b过滤器、输入字段、工具卡片Level 2柔和阴影rgba(0,0,0,0.08)至rgba(0,0,0,0.22)如存在高亮卡片与抬升 merchandise 模块Level 3深色表面阶梯#272729→#2a2a2c浮层、媒体控件、深色工具簇可访问性蓝色焦点信号#0071e3键盘与选择强调深度被有意克制Apple 偏爱色调对比、表面阶梯与构图层级而非厚重阴影堆叠。装饰性深度主要来自摄影写实与材质渲染而非合成 UI 效果半透明浮层与类玻璃工具条在导航与控件中提供轻微氛围分层。Token 化佐证三层受控层级--elev-flat: none默认色调对比承担工作、--elev-ring: 0 0 0 1px var(--border)密集零售语境中的边框主导容器、--elev-raised: 0 12px 32px rgba(0,0,0,0.08)Apple 柔和卡片阴影取文档第 6 节「0.08 → 0.22」范围的下界避免 Material 味。没有第四层——那正是 Apple 刻意回避的 Material/neumorphism 堆栈。焦点环--focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%)比 schema 默认 3px 稍大以呈现「刻意的 Apple 光晕」而非通用描边且以 box-shadow 实现、不干扰布局。八、建议与禁忌Dos and Donts应当做使用中性三元组#000000、#f5f5f7、#ffffff作为结构地基将蓝色强调保留给真实的动作与导航语义保持排版紧凑且有意尤其在 display 刻度上为控件与关键动作维护胶囊/圆形几何语言让产品图像承载视觉戏剧性保持铬的谦逊在密集零售语境使用边框主导的容器而非厚重卡片装饰保持展示模块与交易模块的清晰分离同时共享核心 token。切勿做不要引入与 Apple 蓝竞争的宽泛次级强调调色板不要在核心 UI 铬中过度使用阴影、发光效果或装饰性渐变不要混用无关字体家族或随意放松 tracking不要把所有圆角压平为单一半径——Apple 使用有目的的半径层级不要让商业模块被粗边框或嘈杂视觉效果压垮不要移除深/浅章节之间的中性对比节奏不要把营销与购买流程当作两套分离的设计系统。这些禁令在 lint-artifact.ts 中有机器可执行的对应物例如 P1-2raw-hex规则统计首个style块中:root声明之外的#xxxxxx原始十六进制数量超过约 12 个即提示「设计 token 可能未被遵守」并建议「把每个颜色移入 :root token 块用 var() 引用派生色调用 color-mix()」P1-3accent-overuse规则统计渲染 DOMstyle之外中的var(--accent)引用超过 6 次即提示「单屏强调色使用不超过 2 处可见一个 eyebrow 一个 CTA或一个强调卡片 一个标签其余降级为 var(--fg) 或 var(--muted)」——这与文档「保持蓝色稀缺而有目的」的禁令完全一致。九、响应式行为9.1 断点表名称宽度主要变化Small Mobile374px 及以下收紧零售控件、单列产品堆叠Mobile375px-640px单列模块、紧凑动作行、压缩选择器Tablet641px-833px扩展卡片与 1-2 列混合过渡Tablet Wide834px-1023px更稳定的多列 merchandising、更大文本块Desktop1024px-1240px完整零售布局与产品对比结构Desktop Wide1241px-1440px营销 hero 扩展与更宽章节间距Large Desktop1441px最大章节呼吸空间与宽幅编辑构图9.2 触摸目标主/次动作通常以可点按的药丸/按钮几何呈现圆形媒体与选择控件在移动语境中对齐最小可触摸意图密集商业 UI 使用紧凑标签但通过周围形状内边距保持清晰命中区域。9.3 折叠策略营销 hero 排版按离散层级缩小同时保持层级对比产品与商业网格从多列折叠为堆叠卡片选择器可见性持续保持工具导航压缩为更简单的链接/控件分组同时保留关键动作选项/配置簇变为垂直排序在小屏上保持购买流程线性。9.4 图像行为产品图像跨断点保持宽高比与居中hero 视觉在移动端保持主导文本围绕媒体优先级重排零售缩略图通过更紧的裁剪逻辑与更密的卡片堆叠保持可读图像主导的模块在布局密度增加时继续锚定节奏。十、Agent Prompt 指南实战模板10.1 快速色彩参考主动作蓝苹果动作蓝#0071e3内联链接蓝正文链接蓝#0066cc深色章节画布绝对黑#000000浅色章节画布浅苹果灰#f5f5f7浅底主文本近黑墨色#1d1d1f次级文本次级中性灰#6e6e73零售柔和边框柔和边框灰#d2d2d7零售强边框中等边框灰#86868b10.2 组件 Prompt 示例「在黑画布#000000上设计 Apple 风格产品 heroSF Pro Display semibold 标题48-56px、简洁支撑文案、两个胶囊 CTA 分别使用#0071e3与#1d1d1f。」「在白底#ffffff上创建商业配置面板18px 圆角卡片、#86868b边框字段、SF Pro Text 17px 正文、紧凑选项选择器。」「构建交替使用#f5f5f7与白色表面的 merchandising 卡片网格图像优先卡片、克制阴影、14-17px SF Pro Text 元数据。」「生成 carousel 控件簇圆形按钮50% 半径、柔和灰浮层、清晰的画廊导航激活反馈。」「编排混合营销 零售页面节奏深色展示章节 → 浅色特性章节 → 密集产品列表模块同时保持蓝色强调只用于动作与链接。」10.3 迭代指南先锁定中性地基#000000、#f5f5f7、#ffffff再调强调色保持蓝色强调稀缺而有目的——如果一切皆蓝层级就会崩塌按此顺序调排版display 刻度 → body 可读性 → 微标签按组件类别匹配半径字段、卡片、胶囊、圆形而非一刀切圆角从展示区转向商业区时逐步增加密度每次修订后验证产品图像仍是最强的视觉层。10.4 已知缺口诚实的边界声明在提取的页面集中未一致观察到不同的语义状态色error/warning/success部分交互微状态因模块而异未表示为通用系统 token少数零售模块暴露了未出现在全部五个页面中的上下文特定排版覆盖。这些「已知缺口」在 USAGE.md 中也有镜像约束避免在复制的:roottoken 块之外使用原始十六进制值避免独立于tokens.css重新定义 Tailwind 或设计 token 值避免宣称原创上游来源证据本包基于整理的捆绑夹具避免添加components.html或DESIGN.md中未体现的新组件配方。十一、从规范到执行在 OpenDesign 中使用该包的完整链路综合以上各节Apple 设计系统包的端到端使用链路可以总结为选用在 Design System 界面或受支持的项目创建流程中选择 Apple 包其设计上下文会被组合进 Agent 提示词见 design-systems/README.md 顶部说明读取按 USAGE.md 的读取顺序消化包契约USAGE → DESIGN → tokens → components → preview粘贴将 tokens.css 的:root块逐字粘贴到每个 artifact 的首个style此后一律通过var(--name)引用——文件头注释明确说明这是 lint 强制的工作方式因为「Agent 必须把散文式品牌名翻译成--surface、--accent这类标准 token 名而这正是 token 误用发生的地方本文件把品牌一次性预翻译好Agent 复制结构而非发明结构」实现以 components.html 与components.manifest.json为准复用组件组而非发明新控件校验借助preview/colors.html、preview/typography.html、preview/spacing.html做视觉核对依赖 daemon 的 lint-artifact.ts 对产物做 P0必须修复如紫色渐变、AI 默认 indigo 强调、lorem 填充文本/P1应当修复如 raw-hex 超量、accent 过度使用、外部图片 URL/P2锦上添花分级审查审计source/目录下的evidence.md、token-contract.report.json与tokens.source.json是包内容的审计证据design-tokens.json与tailwind-v4.css是派生产物应据报告与 token 样式表重新生成而非手工编辑。整套 token 契约A1/A2/B-slot/C 扩展的四层模型、C → B-slot → A2 的晋升路径、以及「组件内部值不派发 token、一次性值不派发 token、投机值不派发 token」的克制原则由 design-systems/_schema/AGENTS.md 固化运行时契约的权威副本位于packages/contracts/src/design-systems/token-schema.tsdaemon 导入器与仓库守卫共享同一 schema。若你希望自行编写或修改一个设计系统包DESIGN.md不强制九节模板但包质量守卫要求迁移后的包至少包含七个实质性 H2 标题不规定名称、顺序或编号并须与tokens.css保持同步——Apple 包的九个章节视觉主题、色彩、排版、组件、布局、深度、Do/Donts、响应式、Agent Prompt 指南正是这一约定的完整示范。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考