admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
19 KiB
19 KiB
受 Shopify 启发的设计系统
Category: 电子商务与零售 电商平台。深色优先的电影感，霓虹绿强调色，超细字重。
1. 视觉主题与氛围
Shopify.com 是一座深色优先的数字剧场——一个将其商业平台以电影首映式的方式呈现的网站。整个体验在近黑色的表面上展开，这些表面带着深邃森林绿的最微弱低语（#02090A、#061A1C、#102620），营造出一种夜间氛围，感觉与其说是一个 SaaS 营销页面，不如说是科技发布会上的一场独家产品揭幕。这种黑暗并不冷酷或企业化——它是奢华体验中温暖包裹的黑暗，就像坐在黑暗礼堂的前排。
排版是当之无愧的主角。NeueHaasGrotesk——一种精致的 Helvetica 后裔——以纪念碑式的尺寸（96px）和难以置信的细字重（330-400）出现，创造出感觉是用光刻就而非用墨水印刷的标题。ss03 OpenType 特性赋予字形独特个性，使 Shopify 的字体与普通 Helvetica 用法区分开来。在展示层之下，Inter Variable 以外科手术般的精准处理正文，使用同样不寻常的可变字重（420、450、550），这些字重存在于传统字重档位之间的空间里。这种精准度传递出一家对每个细节都精益求精的公司的信号。
颜色使用极为克制。主要强调色是 Shopify 霓虹绿（#36F4A4）——一种电子薄荷色，只出现在焦点环和强调高亮上，在深色画布上像生物发光信号一样脉动。更柔和的绿色调（芦荟绿 #C1FBD4、开心果绿 #D4F9E0）提供氛围渲染。白色是深色表面上唯一重要的文字颜色，而基于锌色的中性色阶（#A1A1AA 到 #3F3F46）处理安静信息的层次结构。结果是一种让商业技术感觉属于科幻未来的设计。
Key Characteristics：
- 深色优先设计，带有深邃森林青绿色底调（非纯黑色）
- 超细展示排版（字重 330）以纪念碑式尺寸（96px）创造飘逸存在感
- 霓虹绿（
#36F4A4）作为黑暗中单一的高能强调色 - 完整圆角按钮（9999px 圆角半径）作为主要交互形状
- 分层多级盒阴影创造摄影般的深度感
- 产品截图嵌入深色 UI 环境中，与周围的黑暗融为一体
- 基于锌色的中性色阶处理文字层次——在冷暖之间取得平衡
2. 色彩面板与用途
主色
- Shopify 白（
#FFFFFF）：深色表面上的主要文字，按钮填充，高对比度元素 - Shopify 黑（
#000000）：页面主背景，白色按钮上的文字，最大对比度基础（--color-shade-100）
辅助色与强调色
- 霓虹绿（
#36F4A4）：标志性强调色——焦点环、交互高亮、激活状态指示器。电子感与生物发光感 - 芦荟绿（
#C1FBD4）：装饰性背景、氛围卡片的柔和绿色渲染（--color-aloe-10） - 开心果绿（
#D4F9E0）：细微表面差异化的最浅绿色调（--color-pistachio-10）
表面与背景色
- 虚空黑（
#000000）：根页面背景——真正的黑色以获得最大深度 - 深青绿（
#02090A）：卡片表面、内容容器——带有绿色底调的近黑色 - 深森林绿（
#061A1C）：具有明显绿色特征的区块背景 - 森林绿（
#102620）：提升的深色表面、头部背景——最温暖的深色调 - 深色卡片边框（
#1E2C31）：深色表面上的卡片边框，细微的边界定义
中性色与文字色（锌色阶）
- Shade-30（
#D4D4D8）：最浅中性色，深色上几乎不可见的边框（--color-shade-30） - 静默文字（
#A1A1AA）：次级文字、元数据、描述——安静的声音 - Shade-50（
#71717A）：三级文字、时间戳、最不重要的信息（--color-shade-50） - Shade-60（
#52525B）：禁用文字、装饰性中性色（--color-shade-60） - Shade-70（
#3F3F46）：细微分割线，几乎不可见的 UI 边界（--color-shade-70） - 浅色边框（
#E4E4E7）：浅色表面上的边框（罕用——仅在浅色模态框中）
语义色与强调色
- Link Muted（
#9797A2）：带有下划线装饰的静默链接文字 - Link Sage（
#9DABAD）：青绿色调的静默链接 - Link Lavender（
#BDBDCA）：较浅的链接变体 - Link Mint（
#99B3AD）：主题区块的绿色调链接变体
渐变系统
- 深青绿渲染：从
#102620中心到#02090A边缘的径向渐变——用于产品展示区后方 - 绿色氛围：英雄区块后方细微的绿色调环境渐变，在不使用纯色的情况下创造深度
- 聚光灯：亮度集中区域逐渐消退至黑色——创造发布会风格的演示照明效果
3. 排版规则
字体族
展示字体： NeueHaasGrotesk（精致的 Helvetica 后裔，可变字体）
- 回退字体：Helvetica、Arial、sans-serif
- OpenType 特性：
ss03（风格集 3——独特的字形替代方案） - 可用字重：330、360、400、500、750（可变）
- 用于所有标题、英雄文字和大型展示元素
正文字体： 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
- 用于代码片段、数据标签、技术内容
层次结构
| 角色 | 大小 | 字重 | 行高 | 字距 | 备注 |
|---|---|---|---|---|---|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk，英雄标题，"ss03" |
| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk，强调展示 |
| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk，间距展示 |
| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk，飘逸展示 |
| 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，大写，内联代码 |
原则
Shopify 的排版是可变字体精准度的大师级示范。展示层几乎完全使用 330-400 的字重——羽毛般轻盈的文字，看起来像投影光一样悬浮于深色背景之上。这与大多数 SaaS 网站采用的粗重方式截然相反：别人大声呼喊，Shopify 却在巨大尺度上低语。96px 标题配以 330 字重创造出巨大尺寸与纤细笔画的悖论，既有纪念碑感，又有脆弱感。ss03 OpenType 特性激活了一个风格集，赋予特定字符（可能是 'a'、'g' 和某些数字）更精致的外观，使 Shopify 的排版有别于标准 Helvetica Neue 的用法。Inter Variable 以外科手术般的精准处理正文层，使用 420 和 550 等存在于传统档位之间的字重——每段文字都拥有其所需的准确视觉重量。
4. 组件样式
按钮
主要按钮（白色填充）
- 背景：白色（
#FFFFFF） - 文字：黑色（
#000000） - 边框：2px 透明实线
- 圆角半径：完整圆角（9999px）
- 内边距：12px 26px 12px 16px（不对称——右侧更多内边距以获得视觉平衡）
- 悬停：轻微透明度降低或背景偏移
- 焦点：2px
#36F4A4（霓虹绿）外框 - 过渡：all 200ms ease
次要按钮（幽灵/轮廓）
- 背景：透明
- 文字：白色（
#FFFFFF） - 边框：2px 白色实线（
#FFFFFF） - 圆角半径：完整圆角（9999px）
- 内边距：12px 26px 12px 16px
- 悬停：填充为白色背景配黑色文字
- 焦点：2px
#36F4A4外框
徽章/标签（中性填充）
- 背景：
rgba(255, 255, 255, 0.2)（磨砂玻璃） - 文字：白色（
#FFFFFF） - 边框：无
- 圆角半径：轻微圆角（4px）
- 内边距：12px 16px
- 字体：16px 常规
卡片与容器
- 背景：深色页面上的深青绿（
#02090A） - 边框：1px 实线
#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 - 内嵌白色高亮创造细微的顶部边缘发光效果
- 静止状态：
- 悬停：阴影扩展，卡片可能略微变亮
- 过渡：box-shadow 300ms ease，transform 200ms ease
输入框与表单
- 背景：透明或深森林绿（
#061A1C） - 文字：白色（
#FFFFFF） - 边框：1px 实线
#3F3F46（Shade-70） - 圆角半径：8px
- 内边距：12px 16px
- 焦点：2px 实线
#36F4A4（霓虹绿焦点环） - 占位符：Shade-50（
#71717A） - 过渡：border-color 200ms ease
导航
- 背景：透明（叠加在深色英雄区上），滚动时变为森林绿（
#102620） - 高度：约 64px
- 左侧：Shopify 文字标志（SVG，深色背景上的白色）
- 中/右：18px/500 NeueHaasGrotesk 导航链接，白色，字距 0.72px
- CTA：白色圆角按钮"Start for free"（右侧）
- 次要 CTA：带白色边框的幽灵按钮
- 悬停：链接变为静默文字（
#A1A1AA）或出现下划线 - 移动端：汉堡菜单，全屏深色遮罩层
- 过渡：滚动时背景 300ms ease
图片处理
- 产品截图：嵌入深色 UI 环境中，与周围的黑暗融为一体
- 管理界面预览：展示在带细微卡片边框的深色背景上
- 宽高比：多样——英雄图片较宽（约 16:9），功能截图较灵活
- 所有图片在深色容器内平铺——无亮色边框或边框
- 延迟加载配以深色占位表面
信任指标
- 突出展示统计数据："15+"（年）、"150M+"（买家）
- 数字以 NeueHaasGrotesk 展示级别显示
- 合作伙伴/开发者生态系统专区
- 深色主题的评价评论融入页面流程中
5. 布局原则
间距系统
基础单位：8px
| 标记 | 值 | 用途 |
|---|---|---|
| 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 | 英雄区块内边距，大间距 |
网格与容器
- 最大容器宽度：约 1280px（居中）
- 英雄区：全宽，边到边的深色背景配居中文字
- 功能区块：带文字和产品截图的两列布局
- 统计区块：配大数字的水平布局
- 水平内边距：桌面 64px，平板 32px，移动端 16px
- 网格间距：主要内容块之间 24-32px
留白哲学
Shopify 的留白策略是戏剧性的。区块之间以大片深色空间分隔——80px 到 120px 的纯黑色呼吸空间——创造出演示文稿的节奏，而不是网页的节奏。每个内容块都是主题演讲式滚动中独立的"幻灯片"。在区块内部，间距更紧凑也更有意图，在广阔的虚空中创造焦点密度。宏观层面的空旷与微观层面的精准之间的对比，赋予了网站其电影般的韵律。
圆角半径尺度
| 值 | 应用场景 |
|---|---|
| 4px | 标签、徽章、微型元素 |
| 8px | 标准卡片、输入框、视频容器 |
| 12px | 特色卡片、图片容器、按钮（非圆角胶囊） |
| 20px | 顶部圆角卡片（20px 20px 0 0），模态框头部 |
| 340px | 大型圆角装饰元素 |
| 9999px | 圆角胶囊按钮、圆角胶囊徽章、导航元素 |
6. 深度与层级
| 层级 | 处理方式 | 用途 |
|---|---|---|
| 基础 | 无阴影，深色表面 | 默认页面背景 |
| 细微 | rgba(0,0,0,0.1) 0px 0px 0px 1px + 内嵌白色发光 |
静止卡片 |
| 中等 | 多层：1px 环 + 2px + 4px + 8px 阴影叠加 | 提升卡片，特色区块 |
| 高 | rgba(0,0,0,0.25) 0px 25px 50px -12px |
模态框、下拉框、遮罩层 |
| 焦点 | 0px 0px 0px 2px #36F4A4 |
键盘焦点环（霓虹绿） |
Shopify 的阴影系统异常精密。卡片不使用单一值阴影，而是使用叠加的多层方式：用于边界定义的 1px 环、用于自然光衰减的 2px/4px/8px 渐进模糊，以及模拟顶部照明玻璃表面的精致内嵌白色发光（rgba(255,255,255,0.03)）。在深色背景上，阴影从已经很深的表面继续加深，因此阴影更像"环境遮挡"而不是传统的高度——卡片看起来略微下沉入表面，而不是漂浮在其上。
装饰性深度
- 深青绿渐变：英雄区块和产品展示区后方的环境径向渲染
- 聚光灯效果：从中心亮区消退至黑色的区域，营造发布会式戏剧照明
- 边缘发光：通过内嵌盒阴影在深色卡片上形成细微的亮色边缘
- 绿色氛围光晕：背景渐变中的微弱绿色调，呼应品牌强调色
7. 该做与不该做
该做
- 使用深青绿-黑色表面层次（虚空黑 → 深青绿 → 深森林绿 → 森林绿）来营造深度
- 保持展示排版在 330-400 字重——飘逸的轻盈感是设计的标志
- 将霓虹绿（
#36F4A4）专门用于焦点状态和关键强调高亮 - 为所有主要 CTA 按钮应用 9999px 圆角半径——完整圆角胶囊不可妥协
- 为卡片高度使用多层阴影系统——单一阴影看起来平淡
- 在所有文字中保持
ss03OpenType 特性——这是排版身份的一部分 - 正文使用 Inter Variable，标题使用 NeueHaasGrotesk——不要混淆它们的角色
- 在区块之间创造戏剧性间距（80px+）以获得电影般的节奏
不该做
- 不要在深色背景上将纯黑色（#000000）用于文字——只用白色（#FFFFFF）
- 不要引入暖色（橙色、红色、黄色）——色盘严格限于冷色（绿色、青绿色、中性色）
- 不要为 NeueHaasGrotesk 正文使用高于 500 的字重——重字重会破坏飘逸感
- 不要将绿色强调色应用于大面积区域——霓虹绿只用于小而精准的高亮
- 不要在交互元素上使用尖锐角（0px 圆角）——所有元素都应有圆角
- 不要添加亮色背景——深色主题是根本，不是可选的
- 不要使用单层盒阴影——叠加方式是整个系统
- 不要将正文的行高设置在 1.56 以上——Shopify 的文字相对紧凑
- 不要在同等大小/角色下混用 NeueHaasGrotesk 和 Inter——它们的字重尺度不同
- 不要为标题设置低于 0 的字距——Shopify 标题的字距为中性或正值
8. 响应式行为
断点
| 名称 | 宽度 | 主要变化 |
|---|---|---|
| 移动端 | <640px | 单列，汉堡导航，展示文字缩至 48px，16px 内边距 |
| 平板 | 640-1024px | 两列网格开始，展示文字 70px，32px 内边距 |
| 桌面 | 1024-1440px | 完整布局，展开导航，96px 展示文字，64px 内边距 |
| 大桌面 | >1440px | 最大宽度容器居中，增加区块间距 |
触摸目标
- 最小触摸目标：44x44px（WCAG AAA）
- 圆角胶囊按钮：最低 48px 高度配慷慨的水平内边距
- 导航链接：44px 触摸区域
- 卡片表面：链接时整张卡片可点击
折叠策略
- 导航：水平全链接 → 1024px 以下变汉堡菜单；Logo 和 CTA 按钮保持可见
- 英雄区块：96px 展示文字 → 平板 70px → 移动端 48px；保持单列居中对齐
- 功能区块：文字+图片两列 → 768px 以下叠加为单列
- 统计：水平行 → 移动端叠加为垂直
- 区块内边距：随视口缩小从 64px → 40px → 24px → 16px
- 卡片：网格 → 叠加，移动端保持全宽
图片行为
- 产品截图：在深色容器内响应式显示，保持宽高比
- 英雄图片：所有断点全宽，延迟加载配深色占位符
- 管理 UI 预览：按比例缩放，移动端可能裁剪
- 所有图片使用 CDN（
cdn.shopify.com）配响应式 srcset
9. 智能体提示指南
快速颜色参考
- 主要 CTA：Shopify 白（
#FFFFFF） - 页面背景：虚空黑（
#000000） - 卡片表面：深青绿（
#02090A） - 区块背景：深森林绿（
#061A1C） - 提升背景：森林绿（
#102620） - 强调色：霓虹绿（
#36F4A4） - 正文文字：白色（
#FFFFFF） - 静默文字：静默灰（
#A1A1AA） - 深色边框：深色卡片边框（
#1E2C31）
示例组件提示
- "在真实黑色（#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 白色文字的标签/徽章——漂浮在深色卡片表面上"
迭代指南
使用此设计系统完善已生成的界面时：
- 每次专注于一个组件
- 引用本文档中的具体颜色名称和十六进制代码
- 记住：这是深色优先设计——浅色表面是例外，不是规则
- 展示文字应始终感觉羽毛轻盈（字重 330-400）——如果看起来很重，降低字重
- 霓虹绿（#36F4A4）是珍贵的——只为焦点和强调色节俭使用
- 深色表面层次（黑色 → 深青绿 → 深森林绿 → 森林绿）创造细微深度
- 阴影是多层的——单个
box-shadow值无法捕捉 Shopify 卡片的感觉 ss03OpenType 特性必须在所有文字上激活以保持排版一致性