- 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.
本指南以 Open Design 仓库内置的设计系统包
design-systems/shopify/中的规范文档（DESIGN.md及其波兰语版本DESIGN-pl.md）为核心，完整拆解这套"暗色优先、影院式、霓虹绿点缀、超轻字重"的电商设计语言：从视觉氛围、色彩令牌、可变字体排版，到组件样式、布局间距、阴影层级、响应式策略，再到面向 Agent 的提示词工程指南。读完你不仅能照单复刻一个 Shopify 风格电商界面，还能掌握该包在 Open Design 中的文件组织方式（tokens.css、components.html、manifest.json等），以及如何把它作为设计上下文注入你的编码 Agent。
在 Open Design 仓库的design-systems/目录下，每个子目录都是一个可移植的设计系统包（Design System 2.0）。选择某个包后，其设计上下文会被组合进 Agent 提示词，驱动 Claude Code、Codex、Cursor、DeepSeek Harness、OpenCode 等 20+ CLI 生成符合品牌约束的页面。Shopify 包 是其中"E-Commerce & Retail"品类的代表：一套把电商平台包装成科技发布会现场级的暗色影院风格。仓库中的 DESIGN-pl.md 是该规范的多语言版本之一（另有 DESIGN.md 英文原版及德、法、日、中、俄等二十余种语言版本），内容与英文版一一对应。
1. 视觉主题与氛围：暗色数字剧场
Shopify.com 的核心气质被定义为"dark-first digital theatre"（暗色优先的数字剧场）——页面不是典型的 SaaS 营销页，而是一场在技术发布会上进行的独家产品揭幕。整个体验铺陈在近黑色的表面上，表面携带着极淡的深森林绿气息（#02090A、#061A1C、#102620），营造出夜间的氛围。
这套暗色并非"冰冷的企业黑"，而是带有温度感的奢华暗色，如同坐在灯光熄灭的影院第一排。仓库中 tokens.css 的开头注释用三句话概括了这一品牌内核：
- 黑暗即剧场—— 深森林青色表面（非纯黑）：
#000000根背景、#02090A卡片、#061A1C区块、#102620抬升表面，构成夜场 keynote 氛围； - 排版即明星—— NeueHaasGrotesk 可变字体以 96px 巨幅与 330–400 超轻字重出现，配合 OpenType
ss03；Inter Variable 以 420/450/550 等非常规字重处理正文，整体如光刻般精致； - 霓虹绿即唯一高能——
#36F4A4只用于焦点环与强调高亮，暗色画布上白色是唯一有意义的文字颜色。
关键特征清单（规范原文继承）
- 深色优先设计，带深森林青底色（非纯黑）
- 超轻 display 排版（字重 330）配纪念碑式尺度（96px），营造空灵存在感
- 霓虹绿（
#36F4A4）是暗色背景上唯一的高能量强调色 - 全胶囊按钮（9999px 圆角）作为主要交互形状
- 多层、多级 box-shadow 营造照片级景深
- 产品截图嵌入与之匹配的暗色 UI 上下文中
- 基于锌（zinc）的中性色阶承载文本层级，冷暖平衡
2. 色彩调色板与角色：克制的冷色体系
颜色被以"极度克制"的方式使用。规范将颜色分为五组，每一组在 tokens.css 中都有对应的 CSS 变量绑定（下文括号内标注）。
2.1 基础色（Primary）
| 名称 | 色值 | 角色 | Token |
|---|---|---|---|
| Shopify 白 | #FFFFFF | 暗色表面上的主文本、按钮填充、高对比元素 | --fg/--fg-2 |
| Shopify 黑 | #000000 | 页面主背景、白底按钮上的文字、最大对比基准 | --bg |
2.2 次级与强调色（Secondary & Accent）
| 名称 | 色值 | 角色 | Token |
|---|---|---|---|
| 霓虹绿 Neon Green | #36F4A4 | 标志性强调——焦点环、交互高亮、激活状态指示，电光感、生物荧光感 | --accent |
| 芦荟绿 Aloe | #C1FBD4 | 装饰性背景上的柔和绿色 wash，氛围卡片 | --color-aloe-10（规范引用名） |
| 开心果绿 Pistachio | #D4F9E0 | 最浅的绿色调，用于微妙的表面区分 | --color-pistachio-10（规范引用名） |
在 tokens.css 中，霓虹绿被明确标记为"珍贵资源"：--accent只用于焦点环和关键强调高亮，绝不填充大表面；配套定义了--accent-on: #000000（霓虹绿上的黑色文字保证对比度）、--accent-hover: #2de097（悬停时略深的霓虹绿）以及--accent-active: color-mix(in oklab, var(--accent), black 14%)（激活态，用 OKLab 色彩空间混合 14% 黑色）。
2.3 表面与背景（Surface & Background）
| 名称 | 色值 | 角色 | Token |
|---|---|---|---|
| Void 虚空 | #000000 | 页面根背景——追求最大深度的纯黑 | --bg |
| 深青色 Deep Teal | #02090A | 卡片表面、内容容器——近黑带绿色底调 | --surface |
| 暗森林 Dark Forest | #061A1C | 区块背景，带明显绿色性格 | --surface-warm |
| 森林 Forest | #102620 | 抬升的暗色表面、页头背景——最暖的暗色调 | 内联引用 |
| 暗卡片边框 Dark Card Border | #1E2C31 | 暗色表面上的卡片边框，微妙边界定义 | --border |
这套由 Void → Deep Teal → Dark Forest → Forest 构成的"暗色表面层级"，是整个设计系统建立深度感知的基石，也是第 7 节"Do's"中反复强调的第一条规则。
2.4 中性色与文本（Zinc 锌色阶）
| 名称 | 色值 | 角色 | Token |
|---|---|---|---|
| Shade-30 | #D4D4D8 | 最浅中性色，暗色上几乎不可见的边框 | --color-shade-30（规范引用名） |
| 弱化文本 Muted | #A1A1AA | 次级文本、元数据、描述——"安静的声音" | --muted |
| Shade-50 | #71717A | 三级文本、时间戳、最不重要信息 | --meta |
| Shade-60 | #52525B | 禁用文本、装饰性中性色 | --color-shade-60（规范引用名） |
| Shade-70 | #3F3F46 | 微妙分隔线、几乎不可见的 UI 边界 | --border-soft |
| 浅色边框 Light Border | #E4E4E7 | 浅色表面上的边框（罕见——仅用于浅色模式弹窗） | 内联引用 |
2.5 语义与链接色
- 弱化链接 Link Muted（
#9797A2）：带下划线装饰的弱化链接文本 - 鼠尾草链接 Link Sage（
#9DABAD）：带青色调的弱化链接 - 薰衣草链接 Link Lavender（
#BDBDCA）：更亮的链接变体 - 薄荷链接 Link Mint（
#99B3AD）：带绿色调、用于主题化区块的链接变体
此外 tokens.css 还声明了语义状态色：--success: #36f4a4（成功即霓虹绿）、--warn: #eab308、--danger: #dc2626。
2.6 渐变系统
- 深青色 wash：从中心
#102620到边缘#02090A的径向渐变——用于产品展示后方 - 绿色氛围：hero 区块后方的淡绿色环境渐变，无需纯色即可制造深度
- 聚光灯：聚焦的亮区渐隐至黑色——营造 keynote 式舞台灯光
3. 排版规则：可变字体精度大师课
规范直言"排版是无可争议的明星"。这套字体的独特性在于在传统字重挡位之间的空隙中取值。
3.1 字体家族
| 层级 | 字体 | 回退栈 | OpenType | 可用字重 |
|---|---|---|---|---|
| Display | NeueHaasGrotesk（Helvetica 的精致后裔，可变字体） | Helvetica, Arial, sans-serif | ss03 | 330, 360, 400, 500, 750 |
| 正文 | Inter Variable | Helvetica, Arial, sans-serif | ss03 | 400, 420, 450, 500, 550 |
| 等宽 | ui-monospace | SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New | — | — |
tokens.css 中对应的字体令牌为--font-display、--font-body、--font-mono，回退栈与规范完全一致。ss03是所有文本的硬性要求——它在body、h1-h3、.btn、.stat-number等选择器上都通过font-feature-settings: "ss03"显式激活（见 components.html），因为它"是排版身份的一部分"。
3.2 完整字号层级表（规范原文完整继承）
| 角色 | 字号 | 字重 | 行高 | 字距 | 说明 |
|---|---|---|---|---|---|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk，hero 标题，"ss03" |
| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk，强调 display |
| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk，加宽 display |
| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk，空灵 display |
| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk，区块标题 |
| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk，子区块 |
| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk，功能标题 |
| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk，卡片标题 |
| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk，小标题 |
| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk，次要标题 |
| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter，引导段落 |
| Body | 18px | 400 | 1.56 | — | Inter-Variable，标准正文 |
| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable，强调正文 |
| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk，紧凑正文 |
| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable，轻微强调 |
| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk，CTA 文本 |
| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk，导航项 |
| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter，元数据 |
| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable，强调说明 |
| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk，宽距标签 |
| Micro | 13px | 500 | 1.50 | -0.13px | Inter，紧缩小文本 |
| Label | 12px | 400 | 1.20 | 0.72px | Inter，大写标签 |
| Code | 16px | 400 | 1.50 | — | ui-monospace，大写，代码块 |
| Code Small | 12px | 400 | 1.33 | — | ui-monospace，大写，行内代码 |
tokens.css 将这一层级的主干映射为结构令牌：--text-xs: 12px→--text-4xl: 96px共 9 档，配合--leading-body: 1.56、--leading-tight: 1.00、--tracking-display: 0em。值得注意的实现细节：在 components.html 中，h1（96px）与h2（70px）使用共享的--leading-tight: 1.00，而h3（32px Heading 4）单独覆盖为line-height: 1.14; letter-spacing: 0.32px; font-weight: 360——印证了"更小的 display 字号需要正向字距与更宽行高"的规则。
3.3 原则
- Display 层几乎只活在 330–400 字重区间——羽毛般轻盈的文本像投射的光线悬浮在暗色背景之上，与大多数 SaaS 网站的粗重风格截然相反："别人在喊叫，Shopify 在轻声细语地放大规模"。
- 96px + 字重 330 构成了"巨大尺寸 × 纤细笔画"的悖论：既纪念碑式又脆弱易碎。
ss03激活的样式集赋予特定字符（很可能是 'a'、'g' 及部分数字）更精致的形态，将 Shopify 排版与通用 Helvetica Neue 区分开来。- Inter Variable 用 420、550 这类传统挡位之间的字重处理正文——每段文字都获得恰好所需的视觉重量。
4. 组件样式：胶囊、磨砂与暗容器
4.1 按钮
主按钮（白色填充）
- 背景：白
#FFFFFF；文本：黑#000000 - 边框：2px solid transparent
- 圆角：全胶囊（9999px）
- 内边距：
12px 26px 12px 16px（不对称——右侧更多空间用于视觉平衡） - Hover：轻微降低不透明度或背景微变
- Focus：2px
#36F4A4（霓虹绿）轮廓环 - 过渡：
all 200ms ease
次按钮（ghost / 描边）
- 背景：transparent；文本：白
#FFFFFF - 边框：2px solid 白；圆角：全胶囊（9999px）
- 内边距：
12px 26px 12px 16px - Hover：填充为白色背景 + 黑色文字
- Focus：2px
#36F4A4轮廓
Badge / Tag（中性填充）
- 背景：
rgba(255, 255, 255, 0.2)（磨砂玻璃） - 文本：白；边框：无；圆角：4px 微圆角
- 内边距：
12px 16px；字体：16px 常规
components.html 中的实现完全对应：.btn使用padding: 12px 26px 12px 16px; border-radius: var(--radius-sm)（--radius-sm即 9999px 全胶囊），.btn:focus-visible通过box-shadow: var(--focus-ring)呈现霓虹绿焦点环，.btn-primary:hover { opacity: 0.9 }，.btn-ghost:hover翻转为白底黑字。按钮类引用的令牌组合（据 components.manifest.json 的 buttons 组）包括--bg、--fg、--font-display、--radius-sm、--motion-base、--ease-standard等。
4.2 卡片与容器
- 背景：深青色
#02090A（暗色页面） - 边框：1px solid
#1E2C31——几乎不可见的边界 - 圆角：标准卡 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，并在注释中强调"阴影在暗色表面上是环境光遮蔽（ambient occlusion）而非传统抬升"。.card选择器即消费--surface（背景）、--border（边框）、--radius-md（8px 圆角）、--elev-raised（阴影）与--space-6（内边距）。
4.3 输入框与表单
- 背景：transparent 或暗森林
#061A1C（--surface-warm） - 文本：白；边框：1px solid
#3F3F46（Shade-70 /--border-soft） - 圆角：8px；内边距：
12px 16px - Focus：2px solid
#36F4A4霓虹绿焦点环 - Placeholder：Shade-50（
#71717A/--meta） - 过渡：
border-color 200ms ease（实现中为--motion-fast150ms +box-shadow）
4.4 导航
- 背景：transparent（覆盖在暗色 hero 上），滚动后变为森林
#102620 - 高度：约 64px
- 左侧：Shopify 字标 logo（SVG，暗底白色）
- 中/右侧：18px/500 NeueHaasGrotesk 白色导航链接，字距 0.72px
- CTA：右侧白色胶囊按钮"Start for free"；次级 CTA：白边 ghost 按钮
- Hover：链接变为弱化文本
#A1A1AA或加下划线 - 移动端：汉堡菜单 + 全屏暗色遮罩
- 过渡：滚动时
background 300ms ease
4.5 图片处理
- 产品截图：嵌入与周围黑暗匹配的暗色 UI 上下文
- 后台界面预览：展示在暗色背景上，带微妙卡片边框
- 宽高比：多变——hero 图宽幅（约 16:9），功能图灵活
- 所有图片在暗色容器内齐平放置——无亮边框或相框
- 懒加载配暗色占位表面
4.6 信任指标
- 醒目展示统计数字："15+"（年）、"150M+"（买家）
- 数字以 NeueHaasGrotesk display 尺度呈现
- 合作伙伴/开发者生态专区
- 暗色主题的客户证言融入页面流
在 components.html 的参考 fixture 中，hero 区域正是这样落地的：<span class="stat-number">150M+</span>与15+使用--font-display、font-size: var(--text-3xl)（70px）、font-weight: 750、line-height: 1.00。
5. 布局原则：剧院式留白
5.1 间距系统
基础单位：8px。规范给出 10 档令牌，tokens.css 映射了其中 8 档（--space-1至--space-12）：
| Token | 值 | 用途 |
|---|---|---|
| space-1 | 4px | 紧凑行内间隙 |
| space-2 | 8px | 基础单位、图标间隙 |
| space-3 | 12px | 卡片内边距、紧凑外边距 |
| space-4 | 16px | 标准元素内边距 |
| space-5 | 24px | 卡片间隙、区块内边距 |
| space-6 | 28px | 中等区块间距 |
| space-7 | 32px | 区块分隔 |
| space-8 | 36px | 大内边距 |
| space-9 | 40px | 主要区块内边距 |
| space-10 | 64px | hero 区块内边距、大间隙 |
（tokens.css 中对应--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 28px; --space-8: 36px; --space-12: 64px，并额外提供--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px三档区块纵向节奏。）
5.2 网格与容器
- 容器最大宽度：约 1280px（居中）——
--container-max: 1280px - Hero：全宽、无边距的暗色背景 + 居中文本
- 功能区块：文本 + 产品截图的 2 列布局
- 统计区块：大数字横向排列
- 水平内边距：桌面 64px、平板 32px、移动端 16px（即
--container-gutter-*三档） - 网格间隙：主要内容块之间 24–32px
5.3 留白哲学
"Shopify 的留白策略是戏剧化的。"区块之间由 80px 到 120px 的纯黑呼吸空间分隔，营造出演示文稿而非网页的节奏——每个内容块都是 keynote 式滚动中的独立"幻灯片"。区块内部间距更紧凑、更有目的性，在广袤虚空的映衬下形成焦点密度。宏观层面的空旷与微观层面的精确之间的反差，正是页面电影感节奏的来源。
5.4 圆角比例尺
| 值 | 语境 |
|---|---|
| 4px | 标签、徽章、微元素 |
| 8px | 标准卡片、输入框、视频容器 |
| 12px | 特色卡片、图片容器、按钮（非胶囊） |
| 20px | 顶部圆角卡（20px 20px 0 0）、弹窗头部 |
| 340px | 大型圆角装饰元素 |
| 9999px | 胶囊按钮、胶囊徽章、导航元素 |
6. 深度与抬升：环境光遮蔽式阴影
| 层级 | 处理 | 用途 |
|---|---|---|
| Base 基础 | 无阴影，暗色表面 | 默认页面背景 |
| Subtle 微妙 | rgba(0,0,0,0.1) 0px 0px 0px 1px+ 内嵌白光 | 静止卡片 |
| Medium 中等 | 多层：1px 环 + 2px + 4px + 8px 阴影堆叠 | 抬升卡片、特色区块 |
| High 高 | rgba(0,0,0,0.25) 0px 25px 50px -12px | 弹窗、下拉、遮罩 |
| Focus 焦点 | 0px 0px 0px 2px #36F4A4 | 键盘焦点环（霓虹绿） |
规范对此有精辟的说明：在暗色背景上，阴影是从本已很暗的表面继续变暗，因此阴影更多扮演"环境光遮蔽"而非传统抬升——卡片看起来是微微沉入表面，而不是悬浮其上。对应实现上，--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised（五层堆叠）、--focus-ring: 0 0 0 2px #36f4a4全部在 tokens.css 中声明。
装饰性深度
- 深青色渐变：hero 区块与产品展示后方的环境径向 wash
- 聚光灯效果：居中亮区渐隐至黑，制造 keynote 式舞台照明
- 边缘光晕：通过内嵌 box-shadow 在暗色卡片上制造微亮边缘
- 绿色氛围光晕：背景渐变中极淡的绿色调，呼应品牌强调色
7. 应与不应（Do's and Don'ts）：生成合规界面的铁律
应（Do）
- 使用暗青黑表面层级（Void → 深青色 → 暗森林 → 森林）制造深度
- display 排版保持字重 330–400——空灵轻盈是设计的签名
- 霓虹绿（
#36F4A4）只用于焦点状态与关键强调高亮 - 所有主 CTA 按钮应用 9999px 圆角——全胶囊不可妥协
- 卡片抬升使用多层阴影系统——单层阴影会显得扁平
- 所有文本保持
ss03OpenType 特性——它是排版身份的一部分 - 正文用 Inter Variable、标题用 NeueHaasGrotesk——永不混用角色
- 区块间制造戏剧化间距（80px+）以获得电影节奏
不应（Don't）
- 暗色背景上不要用纯黑
#000000文字——只用白色#FFFFFF - 不要引入暖色（橙、红、黄）——调色板严格偏冷（绿、青、中性）
- NeueHaasGrotesk 正文字重不要超过 500——重字重破坏空灵感
- 不要把绿色强调用于大表面——霓虹绿只用于小而精准的高亮
- 交互元素不要用尖角（0px 圆角）——一切都要圆润
- 不要添加亮色背景——暗色主题是根本，不是可选项
- 不要用单层 box-shadow——堆叠方式才是体系
- 正文行高不要超过 1.56——Shopify 文本相对紧凑
- 不要在相同字号/角色混用 NeueHaasGrotesk 与 Inter——两者字重刻度不同
- 标题的 letter-spacing 不要低于 0——Shopify 标题是中性或正向跟踪
8. 响应式行为：从 96px 到 48px 的折叠策略
8.1 断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| 移动端 | <640px | 单列、汉堡导航、display 文本缩至 48px、内边距 16px |
| 平板 | 640–1024px | 开始 2 列网格、display 文本 70px、内边距 32px |
| 桌面 | 1024–1440px | 完整布局、展开导航、96px display、内边距 64px |
| 大桌面 | >1440px | 居中 max-width 容器、增加区块间距 |
在 components.html 中可以看到断点实现的直接证据：@media (max-width: 1023px)时.container改用--container-gutter-tablet、.hero-grid塌缩为单列；@media (max-width: 639px)时改用--container-gutter-phone、.stats-grid塌缩为单列。
8.2 触控目标
- 最小触控区域：44×44px（WCAG AAA）
- 胶囊按钮：最小高度 48px，配宽裕的水平内边距
- 导航链接：44px 触控区域
- 卡片表面：可点击链接的整卡均可点按
8.3 折叠策略
- 导航：1024px 以下完整水平链接 → 汉堡菜单；logo 与 CTA 按钮保持可见
- Hero 区块：96px display → 平板 70px → 移动端 48px；保持单列居中
- 功能区块：768px 以下 2 列文本+图片 → 堆叠为单列
- 统计：横向行 → 移动端纵向堆叠
- 区块内边距：64px → 40px → 24px → 16px 随视口收窄
- 卡片：网格 → 堆叠，移动端保持全宽
8.4 图片行为
- 产品截图：暗色容器内响应式缩放，保持宽高比
- Hero 图：所有断点全宽，懒加载配暗色占位
- 后台 UI 预览：按比例缩放，移动端可能裁剪
- 所有图片使用 CDN（
cdn.shopify.com）配响应式 srcset
9. Agent 提示词指南：让编码 Agent 复刻这套风格
这是该包在 Open Design 中价值最直接的章节——规范本身就是写给 Agent 看的。
9.1 快速颜色速查表
| 用途 | 值 |
|---|---|
| 主 CTA | Shopify 白#FFFFFF |
| 页面背景 | Void 黑#000000 |
| 卡片表面 | 深青色#02090A |
| 区块背景 | 暗森林#061A1C |
| 抬升背景 | 森林#102620 |
| 强调色 | 霓虹绿#36F4A4 |
| 正文 | 白#FFFFFF |
| 弱化文本 | #A1A1AA |
| 暗色边框 | #1E2C31 |
9.2 示例组件提示词（可直接复用）
- "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 迭代指南（精修既有画面时）
- 一次只聚焦 ONE 个组件
- 引用本文档中具体的颜色名称与十六进制码
- 记住：这是 DARK-FIRST 设计——亮色表面是例外而非规则
- display 文本应始终感觉羽毛般轻盈（字重 330–400）——若显厚重就降低字重
- 霓虹绿（#36F4A4）很珍贵——只用于焦点与强调
- 暗色表面层级（黑 → 深青色 → 暗森林 → 森林）制造微妙深度
- 阴影是多层的——单一
box-shadow值无法传达 Shopify 卡片质感 - 所有文本必须激活
ss03OpenType 特性以保证排版一致性
10. 仓库落地：从规范到可运行的设计系统包
以上规范在 Open Design 仓库中并非孤立文档，而是一个完整的、机器可校验的设计系统包，遵循 design-systems/README.md 描述的 Design System 2.0 结构：
design-systems/shopify/ ├── manifest.json # 包元数据与发现信息（schemaVersion: od-design-system-project/v1） ├── DESIGN.md # Agent 使用的规范正文（含 20+ 语言版本 DESIGN-*.md） ├── USAGE.md # Agent 阅读顺序与使用指南 ├── tokens.css # 编译后的语义令牌样式表（事实源） ├── components.html # 独立组件参考 fixture（35 个选择器、15 个类） ├── components.manifest.json # 派生的组件/令牌索引 ├── design-tokens.json # 派生的 Design Tokens JSON（56 个令牌，评分 100/优秀） ├── tailwind-v4.css # 派生的 Tailwind v4 映射 ├── preview/ # colors / typography / spacing 预览页 └── source/ # 导入证据与令牌契约报告10.1 包契约与元数据
manifest.json 声明了id: "shopify"、category: "E-Commerce & Retail"、importMode: "normalized"，并将craft.suggested指向color与accessibility-baseline两项 craft 约束（对应仓库 craft/color.md 与 craft/accessibility-baseline.md）。依据 design-systems/README.md，包目录 slug 必须与manifest.id一致，DESIGN.md需至少包含七个实质性的 H2 小节（本包恰好九个），且设计决策须与tokens.css保持同步。目录级守卫脚本（pnpm guard）会校验路径安全、派生文件一致性、令牌契约与组件 fixture 完整性。
10.2 令牌契约：56 个令牌，评分 100
design-tokens.json 记录了令牌契约审计结果：56 个令牌全部声明、全部有源文件支撑，得分 100，评级 excellent。分层如下：A1-identity（品牌身份，8 个，含--bg、--surface、--fg、--accent、字体家族）、A1-structure（结构，18 个，含字号/行高/间距/容器）、B-slot（槽位，4 个）、A2（26 个）。source/evidence.md 明确说明：该包源自 Open Design 精选的 bundled fixture（DESIGN.md、tokens.css、components.html），并未声称对上游品牌官网进行了实时抓取——这一"基于 curated fixture 而非原创上游素材"的定位也在 USAGE.md 中被强调为使用边界。
10.3 三种消费方式
- Agent 提示词组合：在 Design System 界面选择该包，或在受支持的建项目流程中选择，其设计上下文（
USAGE.md+tokens.css+ 组件信息 + craft 绑定）会被组合进 Agent 提示词。 - 参考组件直接读取：打开 components.html 即可看到完整可运行的 hero、功能、表单区块，每个可见值均来自
tokens.css；components.manifest.json 提供紧凑的组件清单（buttons / inputs / cards / typography / layout 等分组）。 - CSS 令牌直接引用：将
tokens.css的:root块粘贴进产物第一个<style>块，之后全部使用var(--accent)、var(--surface)、var(--elev-raised)、var(--focus-ring)等语义令牌，避免任何裸 hex 值——这也是 USAGE.md 给出的标准工作流。若项目使用 Tailwind v4，可再引入派生的 tailwind-v4.css，它会通过@theme把全部令牌映射为--color-*、--text-*、--spacing-*、--shadow-*等 Tailwind 主题变量。
10.4 从规范到代码的对照速查
| 规范章节 | 关键值 | 代码落点 |
|---|---|---|
| 表面层级 | #000000/#02090A/#061A1C/#102620 | tokens.css--bg/--surface/--surface-warm |
| 霓虹绿强调 | #36F4A4仅焦点 | --accent+--focus-ring |
| 全胶囊 CTA | 9999px | --radius-sm= 9999px，.btn使用 |
| 多层阴影 | 1px 环 + 2/4/8px 模糊 + 内嵌白光 | --elev-raised，.card使用 |
ss03排版特性 | 全文本激活 | font-feature-settings: "ss03"于 body/标题/按钮 |
| 间距基础 8px | space-1..space-12 | --space-1…--space-12 |
| 断点 | 640 / 1024 / 1440px | components.html 中max-width: 1023px与max-width: 639px媒体查询 |
结语：如何用这套包产出合规界面
这套 Shopify 设计系统给生成式编码工作流的最大启示是：把"克制"写成可校验的约束。霓虹绿被限制在焦点环与强调高亮、字重被限定在 330–400 的 display 区间、阴影必须是五层堆叠、ss03必须全局激活——这些规则既存在于人类可读的DESIGN.md/DESIGN-pl.md中，也以tokens.css的 CSS 变量和components.html的参考实现双重落地，还通过design-tokens.json的契约审计（评分 100）确保派生产物与事实源一致。当你在 Open Design 中选用该包并让 Agent 生成电商落地页时，以上 8 条迭代指南就是逐轮精修的对齐清单：一次只改一个组件、引用具体色值与令牌名、保持暗色优先、时刻追问"阴影是否多层、ss03 是否激活"。将规范文档本身作为提示词的一部分喂给 Agent，是让生成结果稳定贴近品牌气质的最直接手段。
- 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.
相关推荐
OpenDesign 中的 Shopify 设计系统实战：暗色优先的影院式电商界面设计指南
OpenDesign 中的 Shopify 设计系统实战：暗色优先的影院式电商界面设计指南 本文以 OpenDesign 仓库中 design systems/
AI 应用人工智能AI 技能设计系统媒体生成Open Design 的 Shopify 暗色电影感设计系统：从色彩令牌、超轻字体到 Agent 提示词的全方位实现指南
Open Design 的 Shopify 暗色电影感设计系统：从色彩令牌、超轻字体到 Agent 提示词的全方位实现指南 本文以 DESIGN fr.md h
AI 应用人工智能AI 技能设计系统媒体生成Open Design 实战：Nike 风格单色电商设计系统规范与 Token 落地指南
Open Design 实战：Nike 风格单色电商设计系统规范与 Token 落地指南 本文以 Open Design 仓库中 design systems/
AI 应用人工智能AI 技能设计系统媒体生成
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
