企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本文以仓库 design-systems/shopify/DESIGN-ko.md 为骨架，结合同目录下 tokens.css、components.html、components.manifest.json、design-tokens.json 等实现与契约文件展开。读者可以从中掌握：Shopify 风格"暗色优先 + 超轻量显示字体 + 霓虹绿点缀"的完整视觉语言、可复制的 CSS 变量 token 体系、组件级样式配方，以及如何把该设计系统交给 AI 编码 Agent 进行忠实还原的提示词策略。

在 open-design 仓库的 design-systems 目录中，每个子目录都是一个结构化的设计系统包。shopify包（manifest.json，schemaVersion 为od-design-system-project/v1，类别为 E-Commerce & Retail）将 Shopify 官网的视觉语言固化为"设计文档（DESIGN）+ 令牌（tokens.css / design-tokens.json）+ 组件夹具（components.html）+ 清单（components.manifest.json）"四件套，并附带 USAGE.md 说明 Agent 的阅读顺序。本篇文章即基于韩文版规格 DESIGN-ko.md 展开，并对照仓库中的真实实现逐条验证。

1. 视觉主题与氛围：把电商页面当作电影首映礼

Shopify 风格的核心不是"深色模式"，而是暗色优先（dark-first）的数字剧场：把电商平台网站编排得像一场科技发布会（keynote）的独家产品揭幕。整个体验发生在带有极淡森林绿调的近黑色表面上（#02090A、#061A1C、#102620），营造出"坐在暗场影院第一排"的奢华夜晚氛围，而不是冷冰冰的企业感。

字体是绝对的主角：NeueHaasGrotesk（Helvetica 的优雅后继者）以纪念碑式的 96px 尺寸与难以置信的细字重（330–400）出现，让标题像是"用光刻出来的，而不是用墨水印出来的"；ss03OpenType 特性给字形带来独特个性，与普通 Helvetica 用法区分开。在显示层之下，Inter Variable 以外科手术般的精度处理正文，使用同样反常的可变字重（420、450、550）——这些字重存在于传统字重档位之间的空白地带。

颜色被极度克制地使用：唯一的高能强调色是 Shopify 霓虹绿（#36F4A4），只在焦点环与强调高亮中出现，像生物荧光信号一样在暗色画布上脉动；更柔和的绿色调（芦荟#C1FBD4、开心果#D4F9E0）提供氛围感过渡；白色是暗色表面上唯一重要的文字颜色；锌基中性色阶（#A1A1AA到#3F3F46）负责安静的信息层级。

关键特征速览：

• 深森林青绿底色的暗色优先设计（非纯黑）
• 96px 纪念碑级尺寸 + 330 字重的超轻显示字体，制造空灵存在感
• 霓虹绿（#36F4A4）作为对抗黑暗的唯一高能强调色
• 全胶囊按钮（9999px 圆角）作为主要交互形态
• 多层 box-shadow 制造摄影级景深
• 产品截图内嵌于暗色 UI 语境，与周围黑暗融为一体
• 锌基中性色阶平衡冷暖

2. 颜色调色板与角色（含 Token 映射）

原文档按"主色 / 次级与强调 / 表面与背景 / 中性文本（锌色阶）/ 语义与链接 / 渐变系统"六个维度组织调色板。仓库中的 tokens.css 把这套语义精确落为 CSS 变量，并遵循 open-design 的TOKEN_SCHEMA契约分层（见 packages/contracts/src/design-systems/token-schema.ts，由 design-systems/_schema/tokens.schema.ts 转发导出）。

2.1 主色

2.2 次级与强调色

需要特别说明：--accent只用于焦点与强调，永不填充大面积表面。tokens.css 为此配套定义了--accent-on: #000000（霓虹绿上的黑字，保证对比度）、--accent-hover: #2de097（悬停加深），以及基于color-mix(in oklab, var(--accent), black 14%)的--accent-active激活态。

2.3 表面与背景色（暗色层级）

2.4 中性色与文本（锌色阶）

2.5 语义与链接色

2.6 渐变系统

• 深青水洗（Dark Teal Wash）：以#102620为中心、向#02090A边缘扩散的径向渐变——用于产品展示区之后；
• 绿色氛围（Green Atmospheric）：Hero 区块背后微妙的绿色调环境渐变，不做纯色填充也能形成深度；
• 聚光灯（Spotlight）：聚焦的明亮区域向黑色渐隐——营造 keynote 风格的舞台灯光。

3. 字体排印规则

3.1 字体家族

显示字体：NeueHaasGrotesk（Helvetica 的优雅后继者，可变字体）

• 回退栈：Helvetica、Arial、sans-serif
• OpenType 特性：ss03（样式集 3——独特字形替代）
• 可用字重：330、360、400、500、750（可变）
• 用于所有标题、Hero 文本、大型展示元素

正文字体：Inter Variable

• 回退栈：Helvetica、Arial、sans-serif
• OpenType 特性：ss03
• 可用字重：400、420、450、500、550（可变）
• 用于正文、链接、按钮、UI 元素

等宽字体：ui-monospace

• 回退栈：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
• 用于代码片段、数据标签、技术内容

在 tokens.css 中，这三套栈分别映射为--font-display、--font-body、--font-mono。ss03特性在 components.html 中通过body { font-feature-settings: "ss03"; }及标题、按钮上的同名声明全局启用——这是品牌排印身份的一部分，不是可选项。

3.2 完整字体层级表（原文档全量保留）

tokens.css 将关键档位映射为--text-xs(12px) /--text-sm(14px) /--text-base(18px) /--text-lg(20px) /--text-xl(32px) /--text-2xl(48px) /--text-3xl(70px) /--text-4xl(96px)，并配套--leading-tight: 1.00、--leading-body: 1.56、--tracking-display: 0em三个排印控制变量。

3.3 原则

Shopify 的排印是可变字体精度的杰作。显示层几乎全部由 330–400 字重构成——像投影的光一样浮在暗色背景上，羽毛般轻盈，这与多数 SaaS 站点"粗重厚实"的做法完全相反：别人在喊叫的地方，Shopify 用巨大的尺寸低语。330 字重的 96px 标题制造了"巨大尺寸 × 纤细笔画"的悖论——既纪念碑式又细腻。ss03会替换特定字形（可能包括 'a'、'g' 及某些数字）为更优雅的样式，从而与标准 Helvetica Neue 用法区分。Inter Variable 则负责正文层，使用 420、550 等介于传统档位之间的字重，让每段文字都获得恰好所需的视觉重量。

4. 组件样式配方

仓库 components.html 是这些配方的可运行实现（"Every visible value comes from tokens.css"），components.manifest.json 则给出了组件群的契约级清单：buttons、inputs、cards、links、icons、typography、layout 七个群组（badges 与 keyboard 标记为present: false）。

4.1 按钮

主按钮（白色填充）

• 背景：白（#FFFFFF）；文本：黑（#000000）
• 边框：2px solid transparent
• 圆角：全胶囊（9999px），对应--radius-sm
• 内边距：12px 26px 12px 16px（不对称——为视觉平衡右侧留更多空间）
• 悬停：轻微降低不透明度（实现为opacity: 0.9）
• 焦点：2px#36F4A4霓虹绿轮廓环（--focus-ring: 0 0 0 2px #36f4a4）
• 过渡：all 200ms ease（--motion-base+--ease-standard）

次按钮（幽灵/描边）

• 背景：透明；文本：白（#FFFFFF）
• 边框：2px solid 白；圆角：全胶囊（9999px）
• 内边距：12px 26px 12px 16px
• 悬停：白底黑字填充反转；焦点：2px#36F4A4轮廓

徽章/标签（中性填充）

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

实现层面对应.btn、.btn-primary、.btn-ghost三个类，统一使用--font-display、--text-base、--space-2（图标间距），并通过.btn:focus-visible { box-shadow: var(--focus-ring) }承接键盘焦点。

4.2 卡片与容器

• 背景：深青#02090A（--surface）；边框：1px solid#1E2C31（--border）——近乎不可见的边界
• 圆角：标准卡 8px（--radius-md）、特荐卡 12px（--radius-lg）、顶部圆角卡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
  • 内嵌白色高光产生微妙的顶部边缘光晕
• 悬停：阴影扩散、卡片可轻微提亮；过渡：box-shadow 300ms ease, transform 200ms ease

在 tokens.css 中这套多层阴影被固化为--elev-raised单变量，卡片类.card通过box-shadow: var(--elev-raised)引用。

4.3 输入与表单

• 背景：透明或暗森林#061A1C（--surface-warm）；文本：白
• 边框：1px solid#3F3F46（--border-soft/Shade-70）；圆角：8px（--radius-md）
• 内边距：12px 16px
• 焦点：2px solid#36F4A4（霓虹绿焦点环，实现为border-color: var(--accent)+box-shadow: var(--focus-ring)）
• 占位符：Shade-50#71717A（--meta）；过渡：border-color 200ms ease

4.4 导航

• 背景：透明（覆盖在暗色 Hero 上），滚动后变为森林#102620
• 高度：约 64px
• 左侧：Shopify 字标 Logo（SVG，暗底白色）
• 中/右侧：18px/500 NeueHaasGrotesk 导航链接、白色、字距 0.72px
• CTA：白色填充 "Start for free"（右侧）；次级 CTA：白边幽灵按钮
• 悬停：链接变为弱化文本#A1A1AA或生成下划线
• 移动端：汉堡菜单、全屏暗色遮罩；过渡：滚动时背景 300ms ease

4.5 图片处理

• 产品截图：内嵌于暗色 UI 语境，与周围黑暗融为一体
• 管理界面预览：带微妙卡片边框、置于暗色背景
• 宽高比：多样——Hero 图偏宽（约 16:9），特写图灵活
• 所有图片紧贴暗色容器放置——无亮色边框或外框
• 暗色占位表面 + 懒加载

4.6 信任指标

• 醒目大数字：「15+」（年）、「150M+」（买家）——见 components.html 的.stat-number（--text-3xl+ 750 字重 +--font-display）
• 合作伙伴/开发者生态圈呼出区块
• 融入页面流程的暗色主题推荐语

5. 布局原则

5.1 间距系统（基础单位 8px）

tokens.css 将其映射为--space-1至--space-12（28px 对应--space-6，64px 对应--space-12），并额外定义了响应式区块节奏变量：--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px。

5.2 网格与容器

• 最大容器宽度：约 1280px（居中），即--container-max
• Hero：全宽、边缘到边缘的暗色背景 + 居中文本
• 特荐区块：文本与产品截图的 2 列布局（.hero-grid，1023px 以下折叠为单列）
• 统计区块：大数字的横向布局（.stats-grid，639px 以下单列）
• 水平内边距：桌面 64px（--container-gutter-desktop）、平板 32px、移动 16px
• 网格间距：主要内容块之间 24–32px

5.3 留白哲学

Shopify 的留白策略是戏剧化的：区块之间用 80–120px 的纯黑呼吸空间分隔，制造出"演示节奏"而非网页节奏——每个内容块都是 keynote 式滚动中的独立"幻灯片"。区块内部间距更紧凑且刻意，形成"广阔虚空中的焦点密度"。宏观留白与微观精密的对比赋予站点电影般的韵律。

5.4 圆角刻度

6. 深度与高度（阴影系统）

Shopify 的阴影系统非常讲究：不使用单一值阴影，而是累积式多层方案——1px 环定义边界、2px/4px/8px 渐进模糊模拟自然光的衰减、细腻的内嵌白光（rgba(255,255,255,0.03)）模拟顶部照亮的玻璃表面。在暗色背景上，阴影在本来就暗的表面上变得更暗，因此它更接近"环境光遮蔽（ambient occlusion）"而非传统高度——卡片看起来不是浮起，而是微微沉入表面。

装饰性深度

• 深青渐变：Hero 区块与产品展示背后的环境径向水洗
• 聚光灯效果：中心明亮、向黑渐隐，制造 keynote 戏剧性灯光
• 边缘光晕：通过内嵌 box-shadow 在暗色卡片上形成微妙的亮色边缘
• 绿色氛围光晕：呼应品牌强调色的背景渐变中的淡绿调

7. 该做与不该做（Do & Don't）

该做

• 用深青-黑表面层级（虚空 → 深青 → 暗森林 → 森林）营造深度
• 显示字体保持 330–400 字重——空灵轻盈是设计签名
• 霓虹绿（#36F4A4）只用于焦点状态与核心强调高亮
• 所有主 CTA 按钮使用 9999px 圆角——全胶囊不可妥协
• 卡片高度使用多层阴影系统——单层阴影显得扁平
• 所有文本保持ss03OpenType 特性——它是排印身份的一部分
• 正文用 Inter Variable、标题用 NeueHaasGrotesk——不要混用角色
• 区块之间留出戏剧性间距（80px+）以制造电影节奏

不该做

• 暗底文本不使用纯黑（#000000）——只用白色（#FFFFFF）
• 不引入暖色（橙、红、黄）——调色板严格限定冷色系（绿、青、中性）
• NeueHaasGrotesk 正文不使用 500 以上字重——厚重会破坏空灵感
• 不在大面积表面使用绿色强调——霓虹绿只用于小而精准的高亮
• 交互元素不使用尖角（0px 圆角）——一切都要圆润
• 不添加浅色背景——暗色主题是根本性的，不是可选项
• 不使用单层 box-shadow——累积式方案才是系统
• 正文字行高不超过 1.56——Shopify 文本相对紧凑
• 同尺寸/同角色下不混用 NeueHaasGrotesk 与 Inter——它们的字重刻度不同
• 标题不使用负字距——Shopify 标题字距中性或为正

8. 响应式行为

8.1 断点

组件夹具中的实际媒体查询为max-width: 1023px（容器内边距切到--container-gutter-tablet、区块切到--section-y-tablet）与max-width: 639px（切到--container-gutter-phone、--section-y-phone）。

8.2 触摸目标

• 最小触摸目标：44×44px（WCAG AAA）
• 胶囊按钮：至少 48px 高 + 充裕水平内边距
• 导航链接：44px 触摸区域
• 卡片表面：若可点击则整卡可点

8.3 折叠策略

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

8.4 图片行为

• 产品截图：暗色容器内响应式，保持宽高比
• Hero 图：所有断点全宽，暗色占位懒加载
• 管理 UI 预览：等比缩放，移动端可裁切
• 所有图片使用 CDN 与响应式 srcset

9. Agent 提示词指南

该设计系统专为 AI 编码 Agent 的忠实还原而设计，这也是它在 open-design 中作为"设计系统包"存在的根本目的。以下内容直接取自原文档，可直接复制使用。

9.1 快速颜色参考

• 主 CTA：Shopify 白（#FFFFFF）
• 页面背景：虚空黑（#000000）
• 卡片表面：深青（#02090A）
• 区块背景：暗森林（#061A1C）
• 抬升背景：森林（#102620）
• 强调色：霓虹绿（#36F4A4）
• 正文文本：白（#FFFFFF）
• 弱化文本：Muted（#A1A1AA）
• 暗色边框：暗卡片边框（#1E2C31）

9.2 示例组件提示词

• "创建一个 Hero 区块：真黑（#000000）背景，96px/330 的 NeueHaasGrotesk 白色标题，20px/500 的 #A1A1AA 副标题，两个胶囊按钮（白色填充 9999px 圆角 + 2px 白边幽灵）"
• "设计一张特荐卡：深青（#02090A）表面，1px #1E2C31 边框，12px 圆角，多层阴影（1px 环 + 2px/4px/8px 模糊、10% 黑），内含 32px/360 白色标题与 18px/400 的 #A1A1AA 正文"
• "构建统计区块：暗森林（#061A1C）上，96px/750 白色数字（NeueHaasGrotesk），16px/400 的 #A1A1AA 说明标签，统计块之间 64px 充裕间距"
• "创建粘性导航：透明背景（滚动后变 #102620），左侧白色 Shopify Logo，18px/500 白色导航链接（0.72px 字距），右侧白色填充 'Start for free' 按钮"
• "设计一个标签/徽章：rgba(255,255,255,0.2) 磨砂玻璃背景，4px 圆角，12px 16px 内边距，16px 白色文本——悬浮在暗色卡片表面之上"

9.3 迭代工作指南

用本设计系统改进既有画面时：

1. 一次只聚焦一个组件
2. 引用本文档中的具体颜色名称与十六进制码
3. 记住：这是暗色优先设计——浅色表面是例外而非规则
4. 显示文本必须始终感觉轻盈（字重 330–400）——若显厚重就降低字重
5. 霓虹绿（#36F4A4）很珍贵——只在焦点与强调处节约使用
6. 暗色表面层级（黑 → 深青 → 暗森林 → 森林）制造微妙深度
7. 阴影是多层的——单一box-shadow值无法复现 Shopify 卡片质感
8. ss03OpenType 特性应在所有文本中启用以保持排印一致性

10. 在 open-design 中落地：从规格到可运行包

10.1 包结构与阅读顺序

shopify包的目录结构如下：

design-systems/shopify/ ├── DESIGN.md / DESIGN-ko.md 等 20 个语言版本 # 视觉意图、约束、反模式 ├── USAGE.md # Agent 阅读契约 ├── manifest.json # 包元数据（od-design-system-project/v1） ├── tokens.css # 唯一事实来源：CSS 变量令牌 ├── design-tokens.json # TOKEN_SCHEMA 契约的 JSON 化产物 ├── tailwind-v4.css # Tailwind v4 主题桥接（派生产物） ├── components.html # 可运行组件夹具 ├── components.manifest.json # 组件/选择器/令牌引用清单 ├── preview/ # colors / typography / spacing 可视化预览 ├── source/ # 审计证据（evidence.md、token-contract.report.json） └── system/ # index.html、kit.html、kit.dark.html、tokens.default.json

USAGE.md 规定的阅读顺序是：先读 USAGE 理解包契约 → 读 DESIGN.md 理解视觉意图与反模式 → 把tokens.css粘入首个产物<style>块 → 用components.manifest.json做组件盘点，需要精确选择器/状态时打开components.html→ 需要目视检查时查看preview/页面。

10.2 令牌契约与质量保障

open-design 的设计系统包受 tokens.schema.ts（转发自 packages/contracts/src/design-systems/token-schema.ts）约束。design-tokens.json 是契约报告：共 56 个令牌、56 个全部声明、56 个全部有源码背书（source-backed），按 A1-identity / A1-structure / A2 / B-slot 分层，评分 100、评级 excellent。components.manifest.json 进一步做了交叉审计：35 个选择器、15 个类、22 个元素，且undeclaredReferenced: []（组件中引用的每个令牌都在 tokens.css 中声明过），证明"所有可见值都来自 tokens.css"这一承诺成立。

注意一个边界：根据 source/evidence.md 与 design-tokens.json 中逐条的 reason，本包基于 open-design 策划的内置夹具（curated bundled fixture）派生，并未对上游品牌官网进行重新抓取。引用本包时不应声称其拥有原始上游来源证据，也不要在 components.html 或 DESIGN.md 之外自行添加新的组件配方。

10.3 两种消费方式

纯 CSS 变量方式：直接以 tokens.css 为唯一事实来源，将其:root块复制进首个<style>块，之后所有组件样式只引用变量、避免出现裸十六进制值（USAGE.md 明确要求：避免在复制的:root令牌块之外使用裸 hex）。组件夹具 components.html 展示了这一实践的完整示例——从body的font-feature-settings: "ss03"到.btn-primary的background: var(--fg); color: var(--bg)。

Tailwind v4 方式：若使用 Tailwind v4，可导入 tailwind-v4.css。它通过@import "./tokens.css"保持 tokens.css 为唯一事实来源，并在@theme块中将品牌令牌桥接为 Tailwind 工具类（如bg-bg、text-fg、text-muted、bg-surface、border-border、rounded-pill、shadow-raised等），同时注意不要在 tokens.css 之外独立重定义 Tailwind 或 design-token 值。

跨品牌切换的可靠性：USAGE.md 强调"原样保留 schema 令牌名称，跨品牌切换才能保持可靠"——这正是 open-design 多设计系统（airbnb、stripe、notion 等一百余个品牌包，见 design-systems/README.md）共享同一 TOKEN_SCHEMA 契约的原因。--accent用于主操作、链接、焦点状态；复用 components.manifest.json 中的组件群，而不是发明新控件。

结语

Shopify 风格设计系统的精髓可以浓缩为一句话：用巨大的尺寸低声细语，用极致的克制制造奢华。暗色优先的四级表面层级、330 字重的 96px 空灵显示字体、只出现在焦点环上的霓虹绿、不可妥协的 9999px 胶囊按钮，共同构成了一套高度可辨识、可复现的视觉语言。而在 open-design 中，这套语言不止于一份设计文档——tokens.css、components.html、components.manifest.json、design-tokens.json 共同把它变成"文档 + 令牌 + 组件夹具 + 契约报告"四层可审计、可执行、可交给 Agent 直接消费的设计系统资产。无论你是想手动复刻一个 Shopify 风格落地页，还是想让编码 Agent 严格遵循品牌规范产出界面，本包（DESIGN.md 及各语言版本）都是一份开箱即用的参考标准。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成