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
Design System Inspired by Vercel
Category: 开发者工具 前端部署。黑白精准，Geist 字体。
1. Visual Theme & Atmosphere
Vercel 的网站是开发者基础设施"隐于无形"这一命题的视觉论文——一套克制到近乎哲学境界的设计体系。页面以大面积白色（#ffffff）配近黑色（#171717）文字为主调，营造出画廊般的空旷感，每一个元素都以像素为代价争得一席之地。这不是装饰性的极简主义，而是工程原则意义上的极简主义。Geist 设计体系对待界面的方式，如同编译器对待代码——剔除所有多余的标记，直到只剩结构。
定制字体家族 Geist 是整套体系的王冠。Geist Sans 在展示尺寸下采用极强的负字间距（-2.4px 至 -2.88px），所呈现的标题感觉紧凑、急迫、充满工程感——仿佛经过压缩优化的生产代码。在正文尺寸下，字间距有所放松，但几何精准感依然贯穿始终。Geist Mono 作为等宽配套字体，专为代码、终端输出和技术标签而生。两款字体均在全局启用 OpenType "liga"（连字），为排版增添了一层经得起细读的精致感。
Vercel 区别于其他单色设计体系的关键，在于其"阴影即边框"的理念。它并不使用传统 CSS 边框，而是采用 box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)——零偏移、零模糊、1px 扩散的阴影，在不影响盒模型的前提下实现类边框效果。这一技术让边框存在于阴影层，从而实现更平滑的过渡、不会被裁剪的圆角，以及比传统边框更轻盈的视觉重量。整个深度体系建立在多值阴影叠加上，每一层各司其职：一层作边框，一层提供柔和的层次感，一层营造环境深度。
关键特征：
- Geist Sans 在展示尺寸下使用极强负字间距（-2.4px 至 -2.88px）——文字即压缩后的基础设施
- Geist Mono 用于代码和技术标签，全局启用 OpenType
"liga" - 阴影即边框技术：
box-shadow 0px 0px 0px 1px取代全局传统边框 - 多层阴影叠加实现细腻深度（单次声明包含边框 + 层次 + 环境三层）
- 近纯白画布搭配
#171717文字——并非纯黑，形成微妙的对比柔和感 - 工作流专属强调色：Ship 红（
#ff5b4f）、Preview 粉（#de1d8d）、Develop 蓝（#0a72ef） - 焦点环系统使用
hsla(212, 100%, 48%, 1)——饱和蓝色，确保无障碍可访问性 - 胶囊徽章（9999px 圆角）配色调背景，用于状态指示
2. Color Palette & Roles
Primary
- Vercel 黑（
#171717）：主要文字、标题、深色表面背景。并非纯黑——微微的暖调防止视觉刺激。 - 纯白（
#ffffff）：页面背景、卡片表面、深色背景上的按钮文字。 - 真黑（
#000000）：次要用途，--geist-console-text-color-default，用于特定控制台/代码场景。
Workflow Accent Colors
- Ship 红（
#ff5b4f）：--ship-text，"发布到生产"工作流步骤——温暖、紧迫的珊瑚红。 - Preview 粉（
#de1d8d）：--preview-text，预览部署工作流——鲜艳的洋红粉。 - Develop 蓝（
#0a72ef）：--develop-text，开发工作流——明亮、聚焦的蓝色。
Console / Code Colors
- 控制台蓝（
#0070f3）：--geist-console-text-color-blue，语法高亮蓝色。 - 控制台紫（
#7928ca）：--geist-console-text-color-purple，语法高亮紫色。 - 控制台粉（
#eb367f）：--geist-console-text-color-pink，语法高亮粉色。
Interactive
- 链接蓝（
#0072f5）：主要链接颜色，带下划线装饰。 - 焦点蓝（
hsla(212, 100%, 48%, 1)）：--ds-focus-color，交互元素焦点环。 - 环蓝（
rgba(147, 197, 253, 0.5)）：--tw-ring-color，Tailwind 环工具类。
Neutral Scale
- 灰 900（
#171717）：主要文字、标题、导航文字。 - 灰 600（
#4d4d4d）：次要文字、说明文案。 - 灰 500（
#666666）：三级文字、静音链接。 - 灰 400（
#808080）：占位符文字、禁用状态。 - 灰 100（
#ebebeb）：边框、卡片轮廓、分隔线。 - 灰 50（
#fafafa）：微妙表面色调、内阴影高光。
Surface & Overlay
- 遮罩背景（
hsla(0, 0%, 98%, 1)）：--ds-overlay-backdrop-color，模态框/对话框背景。 - 选中文字（
hsla(0, 0%, 95%, 1)）：--geist-selection-text-color，文字选中高亮。 - 徽章蓝背景（
#ebf5ff）：胶囊徽章背景，带色调的蓝色表面。 - 徽章蓝文字（
#0068d6）：胶囊徽章文字，更深的蓝色以保证可读性。
Shadows & Depth
- 边框阴影（
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px）：标志性技法——取代传统边框。 - 微浮层（
rgba(0, 0, 0, 0.04) 0px 2px 2px）：卡片的最小悬浮感。 - 卡片叠层（
rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px）：完整多层卡片阴影。 - 环形边框（
rgb(235, 235, 235) 0px 0px 0px 1px）：标签页和图片的浅灰环形边框。
3. Typography Rules
Font Family
- 主字体：
Geist，备用字体：Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol - 等宽字体：
Geist Mono，备用字体：ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New - OpenType 特性：所有 Geist 文字全局启用
"liga"；特定说明文字启用"tnum"以对齐数字。
Hierarchy
| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
|---|---|---|---|---|---|---|
| 展示大标 | Geist | 48px (3.00rem) | 600 | 1.00–1.17（紧凑） | -2.4px 至 -2.88px | 最大压缩，视觉冲击力强 |
| 区块标题 | Geist | 40px (2.50rem) | 600 | 1.20（紧凑） | -2.4px | 功能区块标题 |
| 大号副标题 | Geist | 32px (2.00rem) | 600 | 1.25（紧凑） | -1.28px | 卡片标题、子区块 |
| 副标题 | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | 较轻的副标题 |
| 卡片标题 | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | 功能卡片 |
| 卡片标题（轻） | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | 次要卡片标题 |
| 大号正文 | Geist | 20px (1.25rem) | 400 | 1.80（宽松） | normal | 介绍性文字、功能描述 |
| 正文 | Geist | 18px (1.13rem) | 400 | 1.56 | normal | 标准阅读文字 |
| 小号正文 | Geist | 16px (1.00rem) | 400 | 1.50 | normal | 标准 UI 文字 |
| 中号正文 | Geist | 16px (1.00rem) | 500 | 1.50 | normal | 导航、强调文字 |
| 半粗正文 | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | 强调标签、激活状态 |
| 按钮/链接 | Geist | 14px (0.88rem) | 500 | 1.43 | normal | 按钮、链接、说明文字 |
| 小号按钮 | Geist | 14px (0.88rem) | 400 | 1.00（紧凑） | normal | 紧凑型按钮 |
| 说明文字 | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | 元数据、标签 |
| 等宽正文 | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | 代码块 |
| 等宽说明 | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | 代码标签 |
| 等宽小号 | Geist Mono | 12px (0.75rem) | 500 | 1.00（紧凑） | normal | text-transform: uppercase，技术标签 |
| 微型徽章 | Geist | 7px (0.44rem) | 700 | 1.00（紧凑） | normal | text-transform: uppercase，极小徽章 |
Principles
- 压缩即身份：Geist Sans 在展示尺寸下使用 -2.4px 至 -2.88px 的字间距——是所有主流设计体系中负字间距最激进的。这使文字呈现出_压缩_感，仿佛为生产环境优化过的代码。字间距随字号减小而逐渐放松：32px 时 -1.28px，24px 时 -0.96px，16px 时 -0.32px，14px 时恢复正常。
- 连字无处不在：每一处 Geist 文字均启用 OpenType
"liga"。连字并非装饰——它是结构性的，创造出更紧密、更高效的字形组合。 - 三种字重，严格分工：400（正文/阅读）、500（UI/交互）、600（标题/强调）。除极小徽章外不使用粗体（700）。这种窄字重范围通过字号和字间距构建层次感，而非依赖字重。
- 等宽即身份：大写的 Geist Mono 搭配
"tnum"或"liga"，充当"开发者控制台"的声音——紧凑的技术标签将营销站与产品连接起来。
4. Component Stylings
Buttons
主要白色按钮（阴影边框）
- Background:
#ffffff - Text:
#171717 - Padding: 0px 6px（极小——由内容决定宽度）
- Radius: 6px（轻微圆角）
- Shadow:
rgb(235, 235, 235) 0px 0px 0px 1px（环形边框） - Hover: 背景切换为
var(--ds-gray-1000)（深色） - Focus:
2px solid var(--ds-focus-color)外轮廓 +var(--ds-focus-ring)阴影 - 用途：标准次要按钮
主要深色按钮（源自 Geist 体系推断）
- Background:
#171717 - Text:
#ffffff - Padding: 8px 16px
- Radius: 6px
- 用途：主要行动按钮（"Start Deploying"、"Get Started"）
胶囊按钮/徽章
- Background:
#ebf5ff（带色调的蓝色） - Text:
#0068d6 - Padding: 0px 10px
- Radius: 9999px（完整胶囊）
- Font: 12px 字重 500
- 用途：状态徽章、标签、功能标注
大号胶囊（导航）
- Background: 透明或
#171717 - Radius: 64px–100px
- 用途：标签页导航、区块选择器
Cards & Containers
- Background:
#ffffff - 边框：通过阴影实现——
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px - Radius: 8px（标准），12px（特色/图片卡片）
- 阴影叠层：
rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px - 图片卡片：
1px solid #ebebeb，顶部 12px 圆角 - Hover：阴影轻微加深
Inputs & Forms
- 单选框：标准样式，焦点时
var(--ds-gray-200)背景 - 焦点阴影：
1px 0 0 0 var(--ds-gray-alpha-600) - 焦点外轮廓：
2px solid var(--ds-focus-color)——统一的蓝色焦点环 - 边框：通过阴影技术实现，而非传统边框
Navigation
- 白色背景上的简洁水平导航，吸顶固定
- Vercel 字标左对齐，262x52px
- 链接：Geist 14px 字重 500，
#171717文字 - 激活状态：字重 600 或下划线
- 行动按钮：深色胶囊按钮（"Start Deploying"、"Contact Sales"）
- 移动端：汉堡菜单折叠
- 产品下拉菜单支持多级展开
Image Treatment
- 产品截图带
1px solid #ebebeb边框 - 顶部圆角图片：
12px 12px 0px 0px圆角 - 仪表板/代码预览截图主导功能区块
- 英雄图片后方带柔和渐变背景（多色粉彩）
Distinctive Components
工作流管线
- 三步水平管线：Develop（开发）→ Preview（预览）→ Ship（发布）
- 每个步骤有专属强调色：蓝色 → 粉色 → 红色
- 通过线条/箭头连接
- Vercel 核心价值主张的视觉隐喻
信任栏/Logo 网格
- 合作公司 Logo（Perplexity、ChatGPT、Cursor 等）以灰度展示
- 横向滚动或网格布局
- 用
#ebebeb边框轻微分隔
指标卡片
- 大号数字展示（如"10x faster"）
- Geist 48px 字重 600 展示指标
- 下方配灰色正文描述
- 阴影边框卡片容器
5. Layout Principles
Spacing System
- 基础单位：8px
- 刻度：1px、2px、3px、4px、5px、6px、8px、10px、12px、14px、16px、32px、36px、40px
- 显著跳跃：从 16px 直接跳到 32px——主刻度中没有 20px 或 24px
Grid & Container
- 内容最大宽度：约 1200px
- 英雄区：居中单列，顶部留有充足 padding
- 功能区：卡片采用 2–3 列网格
- 全宽分隔线使用
border-bottom: 1px solid #171717 - 代码/仪表板截图以全宽或带边框的方式展示
Whitespace Philosophy
- 画廊式空旷感：区块间有大量垂直留白（80px–120px+）。留白本身即设计——它传达出 Vercel 无需证明、无需掩饰的从容。
- 文字紧凑，空间宽阔：标题上极强的负字间距与周围充裕的留白形成对位关系。文字密集，而环绕的空间辽阔。
- 区块节奏：白色区块与白色区块交替——区块间没有颜色变化。分隔依靠边框（阴影边框）和间距来实现。
Border Radius Scale
- 微型（2px）：行内代码片段、小号标签
- 细微（4px）：小型容器
- 标准（6px）：按钮、链接、功能元素
- 舒适（8px）：卡片、列表项
- 图片（12px）：特色卡片、图片容器（顶部圆角）
- 大号（64px）：标签页导航胶囊
- 超大（100px）：大号导航链接
- 完整胶囊（9999px）：徽章、状态胶囊、标签
- 圆形（50%）：菜单切换按钮、头像容器
6. Depth & Elevation
| 层级 | 处理方式 | 用途 |
|---|---|---|
| 平面（Level 0） | 无阴影 | 页面背景、文字块 |
| 环形（Level 1） | rgba(0,0,0,0.08) 0px 0px 0px 1px |
大多数元素的阴影即边框 |
| 浅色环形（Level 1b） | rgb(235,235,235) 0px 0px 0px 1px |
标签页和图片的较浅环形 |
| 微卡片（Level 2） | 环形 + rgba(0,0,0,0.04) 0px 2px 2px |
带最小浮起感的标准卡片 |
| 完整卡片（Level 3） | 环形 + 微浮 + rgba(0,0,0,0.04) 0px 8px 8px -8px + 内层 #fafafa 环 |
特色卡片、高亮面板 |
| 焦点（无障碍） | 2px solid hsla(212, 100%, 48%, 1) 外轮廓 |
所有交互元素的键盘焦点 |
阴影哲学：Vercel 拥有现代 Web 设计中可以说是最精妙的阴影体系。它并非以 Material Design 的传统方式用阴影表达高度，而是通过多值阴影叠加，让每一层承担独特的架构职能：一层制造"边框"（0px 扩散，1px），一层添加环境柔和感（2px 模糊），一层处理远距深度（8px 模糊带负扩散），还有一层内层环（#fafafa）形成微妙的高光，让卡片"由内而外地发光"。这种层叠方式使卡片呈现出被精心构建的质感，而非漂浮感。
Decorative Depth
- 英雄渐变：英雄内容后方柔和的多色粉彩渐变（几乎不可见，营造氛围）
- 区块边框：主要区块之间用
1px solid #171717（完整深色线）分隔 - 无背景色变化——深度完全来自阴影叠加与边框对比
7. Do's and Don'ts
Do
- 在展示尺寸使用带强负字间距的 Geist Sans（48px 时 -2.4px 至 -2.88px）
- 使用阴影即边框（
0px 0px 0px 1px rgba(0,0,0,0.08)）而非传统 CSS 边框 - 在所有 Geist 文字上启用
"liga"——连字是结构性的，不可省略 - 使用三字重体系：400（正文）、500（UI）、600（标题）
- 仅在对应的工作流场景中使用工作流强调色（红/粉/蓝）
- 为卡片使用多层阴影叠加（边框 + 层次 + 环境 + 内层高光）
- 保持色板的消色差调——从
#171717到#ffffff的灰色系就是整个体系 - 主要文字用
#171717而非#000000——微弱的暖调至关重要
Don't
- 不要在 Geist Sans 上使用正字间距——永远是负值或零
- 不要在正文使用字重 700（粗体）——600 是上限，仅用于标题
- 不要在卡片上使用传统 CSS
border——使用阴影边框技术 - 不要在 UI 主体中引入暖色（橙色、黄色、绿色）
- 不要将工作流强调色（Ship 红、Preview 粉、Develop 蓝）用于装饰目的
- 不要使用过重的阴影（不透明度 > 0.1）——该阴影体系的基调是耳语级别
- 不要增大正文字间距——Geist 本就设计为紧排
- 不要在主要行动按钮上使用胶囊圆角（9999px）——胶囊只用于徽章/标签
- 不要省略卡片阴影中的内层
#fafafa环——正是它造就了整套体系的内发光效果
8. Responsive Behavior
Breakpoints
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| 小屏手机 | <400px | 紧凑单列，最小 padding |
| 手机 | 400–600px | 标准移动端，堆叠布局 |
| 小平板 | 600–768px | 开始出现两列网格 |
| 平板 | 768–1024px | 完整卡片网格，扩展 padding |
| 小桌面 | 1024–1200px | 标准桌面布局 |
| 桌面 | 1200–1400px | 完整布局，最大内容宽度 |
| 大屏桌面 | >1400px | 居中，充裕边距 |
Touch Targets
- 按钮使用舒适的 padding（垂直 8px–16px）
- 导航链接 14px，间距充足
- 胶囊徽章水平 padding 10px，满足点击目标需求
- 移动端菜单切换按钮使用 50% 圆角圆形按钮
Collapsing Strategy
- 英雄区：展示字号 48px → 按比例缩小，负字间距等比保持
- 导航：水平链接 + 行动按钮 → 汉堡菜单
- 功能卡片：三列 → 两列 → 单列堆叠
- 代码截图：保持宽高比，可能出现横向滚动
- 信任栏 Logo：网格 → 横向滚动
- 页脚：多列 → 单列堆叠
- 区块间距：80px+ → 移动端缩减至 48px
Image Behavior
- 仪表板截图在各尺寸下保持边框处理
- 英雄渐变在移动端变得更柔和/简化
- 产品截图使用响应式图片，保持一致圆角
- 全宽区块在各端保持边到边的处理方式
9. Agent Prompt Guide
Quick Color Reference
- 主要行动按钮：Vercel 黑（
#171717） - 背景：纯白（
#ffffff） - 标题文字：Vercel 黑（
#171717） - 正文：灰 600（
#4d4d4d） - 边框（阴影）：
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px - 链接：链接蓝（
#0072f5） - 焦点环：焦点蓝（
hsla(212, 100%, 48%, 1)）
Example Component Prompts
- "在白色背景上创建英雄区。标题 48px Geist 字重 600，行高 1.00，字间距 -2.4px，颜色 #171717。副标题 20px Geist 字重 400，行高 1.80，颜色 #4d4d4d。深色行动按钮（#171717，6px 圆角，8px 16px padding）和幽灵按钮（白色，阴影边框 rgba(0,0,0,0.08) 0px 0px 0px 1px，6px 圆角）。"
- "设计一张卡片：白色背景，不使用 CSS border。使用阴影叠层：rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px。圆角 8px。标题 24px Geist 字重 600，字间距 -0.96px。正文 16px 字重 400，#4d4d4d。"
- "创建胶囊徽章：#ebf5ff 背景，#0068d6 文字，9999px 圆角，0px 10px padding，12px Geist 字重 500。"
- "创建导航：白色吸顶头部。Geist 14px 字重 500 的链接，#171717 文字。右对齐深色胶囊行动按钮 'Start Deploying'。底部阴影边框：rgba(0,0,0,0.08) 0px 0px 0px 1px。"
- "设计一个展示三步骤的工作流区块：Develop（文字颜色 #0a72ef）、Preview（#de1d8d）、Ship（#ff5b4f）。每个步骤：14px Geist Mono 大写标签 + 24px Geist 字重 600 标题 + 16px 字重 400 描述，颜色 #4d4d4d。"
Iteration Guide
- 始终用阴影即边框代替 CSS border——
0px 0px 0px 1px rgba(0,0,0,0.08)是基础 - 字间距随字号变化：48px 时 -2.4px，32px 时 -1.28px，24px 时 -0.96px，14px 时恢复正常
- 仅使用三种字重：400（阅读）、500（交互）、600（强调）
- 颜色是功能性的，非装饰性的——工作流颜色（红/粉/蓝）仅标记管线阶段
- 卡片阴影中的内层
#fafafa环是赋予 Vercel 卡片微妙内发光的关键 - 技术标签用 Geist Mono 大写，其余一律用 Geist Sans