企业官网建设流程全解析

Open Design 设计系统实战：Shopify 暗黑影院风设计语言（E-Commerce & Retail）完整拆解

【免费下载链接】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/shopify/DESIGN-nl.md（及英文版 DESIGN.md）为核心，围绕 Open Design 仓库内置的 Shopify 品牌设计系统展开。它定义了一整套"暗黑优先、电影感、超轻字重"的电商营销设计语言：从深森林绿黑色表面层级、96px 超轻 NeueHaasGrotesk 展示字体、唯一的能量色 Neon Green（#36F4A4），到全药丸按钮与多层 box-shadow 深度系统。读完本文，你将掌握该设计系统的全部设计令牌（tokens）、排版阶梯、组件规范与响应式策略，并能在自己的落地页、原型或 Agent 提示词中直接复现这套视觉语言——同时本文会结合仓库内的 tokens.css、tailwind-v4.css、components.manifest.json 与 components.html 给出源码级验证，确保每个结论都可查、可用、可复现。

一、视觉主题与氛围：把电商营销页做成"数字剧场"

1.1 暗黑优先的基调

Shopify 设计系统的第一性原理是dark-first（暗黑优先）。整个体验铺陈在近黑的表面上，这些表面带着极轻微的深森林绿气息（#02090A、#061A1C、#102620），营造出一种"夜场发布会"而非普通 SaaS 营销页的氛围。文档的原话是：这不是冷冰冰的商务黑，而是奢侈品体验那种温暖、包裹式的黑暗——如同坐在暗场影院的第一排。

这一氛围在仓库的令牌文件中被精确落地。tokens.css 的:root块将根背景定义为--bg: #000000（真正的黑色），卡片表面--surface: #02090a（深青色），区块背景--surface-warm: #061a1c（深森林色）。文件的头部注释甚至用三句话概括品牌身份，第一条就是"Darkness as theatre（黑暗即剧场）"——深森林绿表面（而非纯黑）营造夜间 keynote 氛围，像产品发布会一样被"舞台化"。

1.2 排版是绝对主角

设计文档强调，排版是这个系统的"无争议之星"：

• 展示层：NeueHaasGrotesk（Helvetica 的精炼后裔，可变字体），以 96px 的纪念碑式尺度配合 330–400 的"不可能之轻"字重出现，让标题看起来像"用光蚀刻"而非"用墨印刷"；
• ss03OpenType 特性：为字母形状（很可能是 'a'、'g' 及某些数字）提供更具辨识度的替代字形，使 Shopify 的字体区别于通用 Helvetica；
• 正文层：Inter Variable 以手术般的精度处理正文，使用 420、450、550 这些位于传统字重档位之间的非常规可变字重。

在 tokens.css 中，字体家族被绑定为：

--font-display: "NeueHaasGrotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Inter Variable", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

而在 components.html 的body规则中，可以看到ss03是如何被全局启用的（这是品牌规范的一部分）：

body { background: var(--bg); color: var(--muted); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); /* ss03 on all text per brand spec. */ font-feature-settings: "ss03"; -webkit-font-smoothing: antialiased; }

1.3 色彩极度克制

颜色被以极端克制的方式使用。唯一的能量色是Shopify Neon Green（#36F4A4）——一种电光薄荷绿，只出现在焦点环（focus rings）与强调高光上，如同黑暗画布上脉冲的生物荧光信号。柔和的绿色（Aloe#C1FBD4、Pistachio#D4F9E0）仅提供氛围洗色。在暗色表面上，白色是唯一有意义的文字颜色；而基于锌（zinc）的中性色阶（#A1A1AA到#3F3F46）负责"安静信息"的层级。

核心特征清单（原文继承）：

• 暗黑优先设计，带深森林绿-青色底调（非纯黑）
• 超轻展示排版（字重 330）配 96px 纪念碑式尺度，营造空灵存在感
• Neon Green（#36F4A4）作为黑暗中唯一的高能强调色
• 全药丸按钮（9999px 圆角）作为主要交互形态
• 分层、多阶段 box-shadow 打造摄影级深度
• 产品截图嵌入暗色 UI 语境，与周围黑暗融为一体
• 基于锌的中性色阶处理文字层级——在冷暖之间取得平衡

二、颜色调色板与角色分工

2.1 主色（Primary）

2.2 次级与强调色（Secondary & Accent）

在 tokens.css 中，Neon Green 还有一套完整的交互状态链：

--accent: #36f4a4; /* neon green */ --accent-on: #000000; --accent-hover: #2de097; /* slightly darker neon on hover */ --accent-active: color-mix(in oklab, var(--accent), black 14%);

注意--accent-active使用了现代 CSS 的color-mix(in oklab, ...)语法——这是可以在不手算色值的情况下生成激活态的手段。同时--success: #36f4a4复用同一个绿色作为成功状态色，体现了"单一高能强调色"的系统哲学。

2.3 表面与背景（Surface & Background）

这五个值构成了完整的"表面层级"（surface hierarchy）：Void → Deep Teal → Dark Forest → Forest。文档指出，深度正是由这条从黑到暖的渐变链产生的，越靠后的值越"温暖"、越接近前景。在 tokens.css 中对应--bg、--surface、--surface-warm、--border（#1e2c31）四个核心令牌。

2.4 中性色与文字（Zinc 色阶）

令牌文件中的对应关系非常清晰：--muted: #a1a1aa（次要文字）、--meta: #71717a（时间戳/三级信息）、--border-soft: #3f3f46（subtle dividers）。--fg与--fg-2都是白色——文档注释解释："在暗色画布上没有次级墨色分裂"，这是该系统与大多数多级前景色系统的关键区别。

2.5 语义与链接色

2.6 渐变系统

• Dark Teal Wash（暗青洗色）：从#102620中心到#02090A边缘的径向渐变——用于产品展示后方；
• Green Atmospheric（绿色氛围）：hero 区块后方微妙的绿色环境渐变，无纯色也能制造深度；
• Spotlight（聚光灯）：聚焦的亮区渐隐至黑色——打造 keynote 式舞台照明。

三、排版规则：可变字体精度的教科书

3.1 字体家族

3.2 排版阶梯（Hierarchy）完整表

3.3 令牌文件中的排版映射

在 tokens.css 中，这套阶梯被压缩为一条"schema 脊柱"（spine），从展示 XL 一路映射到标签：

--text-xs: 12px; /* label — uppercase, wide-tracked */ --text-sm: 14px; /* caption — metadata */ --text-base: 18px; /* body — standard Inter reading */ --text-lg: 20px; /* body large — lead paragraphs */ --text-xl: 32px; /* heading 4 — card headings */ --text-2xl: 48px; /* heading 3 — feature titles */ --text-3xl: 70px; /* heading 1 — section titles */ --text-4xl: 96px; /* display XL — cinematic hero */ --leading-body: 1.56; --leading-tight: 1.00; --tracking-display: 0em;

这里有一个值得注意的细节：--tracking-display: 0em表明 NeueHaasGrotesk 在 96px 展示尺度下字距保持中性；而更小的 NeueHaas 字号（0.32px–2.4px）的正字距则按 components.html 中的说明以内联方式设置在组件里。同时注意正文字行高被限定在1.56——这与后面 Do's and Don'ts 中"不要把正文字行高设到 1.56 以上"的规则严格对应。

3.4 设计原则解读

文档对这一节有一段非常凝练的总结，值得原样继承并展开：

Shopify 的排版是可变字体精度的大师课。展示层几乎完全生活在 330–400 的字重区间——羽毛般轻的文本仿佛投射的光悬浮在黑暗背景之上。这与多数 SaaS 站点采用粗重字体的做法完全相反：别人在呐喊，Shopify 在宏大尺度上低语。96px 的字号配 330 的字重制造了一种"巨大尺寸 × 纤细笔画"的矛盾体，同时显得纪念碑式与脆弱。ss03激活的风格集让特定字符（很可能 'a'、'g' 与某些数字）更精致，将 Shopify 排版与标准 Helvetica Neue 区分开。Inter Variable 则以 420/550 这类传统档位之间存在的字重处理正文层——每段文字都恰好拥有它需要的视觉重量。

四、组件样式规范

4.1 按钮（Buttons）

主按钮（白色填充）

• 背景：白色（#FFFFFF）
• 文字：黑色（#000000）
• 边框：2px solid transparent
• 圆角：全药丸（9999px）
• 内边距：12px 26px 12px 16px（不对称——右侧留更多空间以达成视觉平衡）
• Hover：轻微降低不透明度或背景偏移
• Focus：2px#36F4A4（Neon Green）轮廓环
• 过渡：all 200ms ease

次按钮（Ghost/描边）

• 背景：transparent
• 文字：白色（#FFFFFF）
• 边框：2px solid 白色（#FFFFFF）
• 圆角：全药丸（9999px）
• 内边距：12px 26px 12px 16px
• Hover：填充为白色背景 + 黑色文字
• Focus：2px#36F4A4轮廓

Badge/Tag（中性填充）

• 背景：rgba(255, 255, 255, 0.2)（磨砂玻璃）
• 文字：白色（#FFFFFF）
• 边框：无
• 圆角：轻微圆角（4px）
• 内边距：12px 16px
• 字体：16px 常规

在 components.manifest.json 的buttons组件组中，可以看到按钮组实际引用的令牌：--bg、--ease-standard、--fg、--font-display、--motion-base、--radius-sm、--space-2、--text-base。其中--radius-sm: 9999px被注释为"full pill for all CTAs per brand identity"——全药丸是不可谈判的品牌身份，这正是"9999px 即 CTA 的标准形态"的令牌级落点。

4.2 卡片与容器（Cards & Containers）

• 背景：暗色页面上的 Deep Teal（#02090A）
• 边框：1px solid#1E2C31（Dark Card Border）——几乎不可见的边界
• 圆角：标准卡 8px、强调卡 12px、顶部圆角卡20px 20px 0 0
• 阴影：多层系统
  • 静止态：rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px+rgba(255,255,255,0.03) 0px 1px 0px inset
  • 内嵌白色高光营造微妙的顶部发光
• Hover：阴影扩大，卡片可轻微提亮
• 过渡：box-shadow 300ms ease、transform 200ms ease

在 tokens.css 中，这套阴影被封装为--elev-raised令牌（1px ring + 2px/4px/8px 渐进模糊 + inset 白色微光），并配合--elev-flat: none（无阴影基底）与--elev-ring: 0 0 0 1px var(--border)（仅描边）构成完整的抬升阶梯。components.manifest.json的cards组确认.card类实际引用了--border、--elev-raised、--radius-md、--surface、--space-6等令牌。

4.3 输入框与表单（Inputs & Forms）

• 背景：transparent 或 Dark Forest（#061A1C）
• 文字：白色（#FFFFFF）
• 边框：1px solid#3F3F46（Shade-70）
• 圆角：8px
• 内边距：12px 16px
• Focus：2px solid#36F4A4（Neon Green 焦点环）
• Placeholder：Shade-50（#71717A）
• 过渡：border-color 200ms ease

4.4 导航（Navigation）

• 背景：transparent（覆盖在暗色 hero 上），滚动时变为 Forest（#102620）
• 高度：约 64px
• 左侧：Shopify 字标 Logo（SVG，暗色底白字）
• 中/右侧：18px/500 NeueHaasGrotesk 导航链接，白色，字距 0.72px
• CTA：右侧白色药丸按钮 "Start for free"
• 次级 CTA：白边 ghost 按钮
• Hover：链接变为 Muted Text（#A1A1AA）或添加下划线
• 移动端：汉堡菜单 + 全屏暗色遮罩
• 过渡：滚动时background 300ms ease

4.5 图片处理（Image Treatment）

• 产品截图：嵌入暗色 UI 语境，与周围黑暗融为一体
• 管理界面预览：展示在暗色背景上，带微妙的卡片边框
• 宽高比：多样——hero 图片偏宽（近似 16:9），功能图灵活
• 所有图片平铺在暗色容器内——无亮边框或相框
• 使用暗色占位表面的懒加载

4.6 信任指标（Trust Indicators）

• 统计数字突出展示："15+"（年）、"150M+"（买家）
• 数字以展示尺度、NeueHaasGrotesk 呈现
• 合作伙伴/开发者生态区
• 融入页面流中的暗色主题客户证言

五、布局原则

5.1 间距系统（Spacing System）

基础单位：8px

在 tokens.css 中实现为--space-1（4px）到--space-12（64px），并额外提供区块节奏令牌--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px——这正是文档所述"剧场化节奏"的可配置落点。

5.2 栅格与容器（Grid & Container）

• 最大容器宽度：约 1280px（居中）
• Hero：全宽、通边暗色背景 + 居中文本
• 功能区块：文字 + 产品截图的 2 列布局
• 统计区块：带大数字的横向布局
• 水平内边距：桌面 64px、平板 32px、移动 16px
• 栅格间距：主要内容块之间 24–32px

对应令牌：--container-max: 1280px、--container-gutter-desktop: 64px、--container-gutter-tablet: 32px、--container-gutter-phone: 16px。在 components.html 中可以看到容器与区块规则如何随断点切换这三个 gutter 值（1023px 以下用 tablet 值、639px 以下用 phone 值），同时section + section用border-top: 1px solid var(--border)作为区块间的微妙分隔。

5.3 留白哲学（Whitespace Philosophy）

Shopify 的留白策略是剧场化的。区块之间由大片黑暗空间分隔——80px 到 120px 的纯黑呼吸区——营造出"演示"而非"网页"的节奏。每个内容块都是 keynote 式滚动中的独立"幻灯片"。区块内部间距更紧凑、更有目的性，在广阔虚空中形成焦点密度。宏观留白与微观精度的对比，正是该网站电影化节律的来源。

5.4 圆角尺度（Border Radius Scale）

令牌实现：--radius-sm: 9999px（全药丸 CTA）、--radius-md: 8px（标准卡/输入框）、--radius-lg: 12px（强调卡）、--radius-pill: 9999px。

六、深度与抬升（Depth & Elevation）

文档对本节的原理阐释非常关键：Shopify 的阴影系统异常精密。与单一阴影值不同，卡片使用堆叠式多层方案：1px ring 界定边界，2px/4px/8px 渐进模糊模拟自然光衰减，再加上rgba(255,255,255,0.03)的精致 inset 白色微光模拟顶部受光的玻璃表面。在暗色背景上，阴影从本已很暗的表面"再变暗"，因此阴影更多充当"环境光遮蔽（ambient occlusion）"而非传统抬升——卡片像是微微沉入表面，而不是悬浮其上。

在 tokens.css 中，这一整套方案被封装为三个抬升令牌（--elev-flat/--elev-ring/--elev-raised）加一个焦点令牌--focus-ring: 0 0 0 2px #36f4a4。

装饰性深度（Decorative Depth）

• 暗青渐变：hero 区块与产品展示后方的环境径向洗色
• 聚光灯效果：聚焦的亮区渐隐至黑色，制造 keynote 式剧场照明
• 边缘辉光：通过 inset box-shadow 在暗卡上营造微妙的浅色边缘
• 绿色氛围光晕：背景渐变中淡淡的绿色调，呼应品牌强调色

七、Do's and Don'ts（黄金守则）

应当（Do）

• 使用暗青黑表面层级（Void → Deep Teal → Dark Forest → Forest）制造深度
• 展示排版保持 330–400 字重——空灵轻盈是这套设计的签名
• Neon Green（#36F4A4）只用于焦点态与关键强调高光
• 所有主 CTA 按钮应用 9999px 圆角——全药丸不可妥协
• 卡抬升使用多层阴影系统——单层阴影看起来很平
• 所有文本保持ss03OpenType 特性——它是排版身份的一部分
• 正文用 Inter Variable、标题用 NeueHaasGrotesk——永不互换角色
• 区块间创造剧场化间距（80px+）以营造电影化节奏

禁忌（Don't）

• 不要在暗色背景上用纯黑（#000000）文字——只用白色（#FFFFFF）
• 不要引入暖色（橙、红、黄）——调色板严格偏冷（绿、青、中性）
• 不要在 NeueHaasGrotesk 正文中使用 500 以上字重——重字重会破坏空灵感
• 不要将绿色强调色用于大表面——Neon Green 只用于小而精确的高光
• 不要在交互元素上用锐角（0px 圆角）——一切都要圆润
• 不要添加亮色背景——暗色主题是根本，不是可选项
• 不要用单层 box-shadow——堆叠方案才是系统
• 不要把正文字行高设到 1.56 以上——Shopify 的文本相对紧凑
• 不要在同一字号/角色混用 NeueHaasGrotesk 和 Inter——它们的字重体系不同
• 不要对标题使用低于 0 的字距——Shopify 标题的字距为中性或正值

八、响应式行为

8.1 断点（Breakpoints）

8.2 触控目标（Touch Targets）

• 最小触控目标：44×44px（WCAG AAA）
• 药丸按钮：最小 48px 高，配充裕的水平内边距
• 导航链接：44px 触控区域
• 卡片表面：整卡可点（凡有链接处）

8.3 折叠策略（Collapsing Strategy）

• 导航：全水平链接 → 1024px 以下汉堡菜单；Logo 与 CTA 按钮保持可见
• Hero 区块：96px 展示 → 平板 70px → 移动 48px；保持单列居中
• 功能区块：2 列文本+图 → 768px 以下堆叠为单列
• 统计：横向行 → 移动端堆叠纵向
• 区块内边距：64px → 40px → 24px → 16px 随视口收窄
• 卡片：栅格 → 堆叠，移动端保持全宽

8.4 图片行为

• 产品截图：在暗色容器内响应式缩放，保持宽高比
• Hero 图片：全断点全宽，带暗色占位的懒加载
• 管理界面预览：按比例缩放，移动端可能裁切
• 所有图片使用 CDN（cdn.shopify.com）配响应式 srcset

九、Agent 提示词指南（落地实操）

这套设计系统的最终价值在于被Agent 直接消费——它本身就是为 AI 编码/设计代理设计的"可执行规范"。以下是原文提供的可直接复用的实操素材。

9.1 快速取色参考（Quick Color Reference）

9.2 示例组件提示词（可直接复制给 Agent）

• "Create a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white border"
• "Design a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring + 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body text"
• "Build a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocks"
• "Create a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill 'Start for free' button right"
• "Design a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface"

9.3 迭代指南（Iteration Guide）

当用此设计系统打磨既有屏幕时：

1. 一次只聚焦一个组件
2. 引用本文档中的具体颜色名与十六进制码
3. 记住：这是DARK-FIRST设计——亮色表面是例外，不是规则
4. 展示文本必须始终有羽毛般轻盈感（字重 330–400）——若看起来厚重，就降低字重
5. Neon Green（#36F4A4）是稀缺品——仅在焦点与强调处少量使用
6. 暗色表面层级（黑 → 深青 → 深森林 → 森林）制造微妙深度
7. 阴影是多层的——单一box-shadow值无法捕捉 Shopify 卡片的质感
8. 所有文本必须启用ss03OpenType 特性以保持排版一致性

十、仓库落地的实现细节与使用方式

这套设计系统在 Open Design 仓库中不仅是一份规范文档，而是以"Design System 2.0 包"的形式完整落地，包内文件结构如下（均在 design-systems/shopify 下）：

• 规范文档：DESIGN.md（英文）、DESIGN-nl.md（荷兰语）及其余 15 种语言版本——视觉意图、约束与反模式
• 设计令牌：tokens.css（真相源，56 个令牌）与派生的 design-tokens.json（结构化令牌契约，评分 100/grade "excellent"）
• Tailwind 绑定：tailwind-v4.css——将全部令牌映射进 Tailwind v4 的@theme块
• 参考组件：components.html（35 个选择器、15 个类、22 个元素）与 components.manifest.json（组件清单：buttons、inputs、cards、links、icons、typography、layout）
• 使用指南：USAGE.md——规定了 OpenDesign Agent 与评审者的读取顺序：先读 USAGE → 再读 DESIGN.md → 将tokens.css粘贴进首个 artifact 的<style>块 → 用 components.manifest.json 查组件清单 → 用 preview 页面做视觉校验
• 审计证据：source/evidence.md 与 source/token-contract.report.json

10.1 令牌契约与 Tailwind 映射

design-tokens.json 的摘要字段给出了量化证据：总计 56 个令牌、56 个已声明、56 个有源码支撑，其中 A1-identity 层 8 个、B-slot 层 4 个、A2 层 26 个、A1-structure 层 18 个，综合评分 100。每个令牌都带有sources字段，精确回指 tokens.css 的声明行号（例如--bg对应tokens.css:36、--elev-raised对应tokens.css:120、--focus-ring对应tokens.css:129）。

如果项目使用 Tailwind v4，则无需手工引用 CSS 变量——tailwind-v4.css 已经通过@theme块将令牌桥接为工具类语义，例如：

@theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-muted: var(--muted); --font-display: var(--font-display); --font-sans: var(--font-body); --text-4xl: var(--text-4xl); --radius-sm: var(--radius-sm); --shadow-raised: var(--elev-raised); --shadow-focus-ring: var(--focus-ring); --container-max: var(--container-max); /* ... 完整映射见文件 */ }

10.2 使用注意事项（来自 USAGE.md 的约束）

• 保留 schema 令牌名不变，以保证跨品牌切换的可靠性（Open Design 仓库内含 100+ 个设计系统包，令牌契约是它们之间互换的基础）
• 主操作、链接、焦点态与唯一焦点元素使用--accent
• 优先复用 components.manifest.json 中的组件组，而不是自创控件
• 避免在拷贝的:root令牌块之外使用裸十六进制值；避免脱离tokens.css独立重定义 Tailwind 或设计令牌值
• 该包基于 OpenDesign 策展的 bundled fixture（见 source/evidence.md），不应声称拥有原始上游源码证据

十一、总结：这套设计语言的三条核心记忆点

1. 黑暗是舞台，不是背景：真正的黑色根背景 + 四级深绿黑表面层级（Void → Deep Teal → Dark Forest → Forest），配合 80–120px 的剧场化区块留白，构成了电影感的节奏骨架；
2. 轻盈是签名，克制是纪律：NeueHaasGrotesk 以 330–400 字重在 96px 尺度上"低语"，Neon Green 只被允许出现在焦点环与精确强调上——系统的力量来自对"少"的坚持；
3. 令牌化落地，Agent 可消费：从 DESIGN.md 的规范，到 tokens.css 的 56 个令牌，再到 tailwind-v4.css 的工具类桥接与 components.html 的参考实现，整条链路开箱即用；而本文第九节的提示词模板，可以直接喂给 Open Design 的 Agent 工作流，让编码代理一键产出符合 Shopify 暗黑影院美学的落地页、仪表盘与幻灯片。

【免费下载链接】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