admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2d07b47adde0ca4a04e3af461a1c48e9917cc2d
workbuddy_skills/open-design/design-systems/nvidia/DESIGN-zh.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 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。
2026-10-15 21:17:28 +08:00

297 lines
16 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 灵感源自 NVIDIA 的设计系统
> Category: 媒体与消费者
> GPU 计算。绿黑能量，技术力量美学。
## 1. 视觉主题与氛围
NVIDIA 官网是一种高对比度、技术前沿的体验，通过克制的设计传达出原始的计算力量。页面建立在纯黑（`#000000`）与纯白（`#ffffff`）的基础之上，点缀着 NVIDIA 标志性的绿色（`#76b900`）——这一颜色之精准，堪称品牌指纹。这不是自然界那种葱郁的绿；它是 GPU 渲染光线下那种充满电气感、带着黄绿偏移的绿，介于黄绿色与翠绿色之间，任何技术圈人士见之即知——这是 NVIDIA。
定制字体 NVIDIA-EMEA（备用字体为 Arial 和 Helvetica）构建出简洁、工业感十足的字体排印风格。36px 粗体标题配合紧致的 1.25 行高，形成密集而权威的文字块。这套字体没有硅谷无衬线字体那种几何趣味——它是欧洲风格的，务实且以工程为导向。正文字号在 15–16px 之间，阅读舒适但不奢侈，让人感受到屏幕空间像 GPU 显存一样被精准优化。
NVIDIA 设计区别于其他深色背景科技站点的关键，在于对绿色点缀色的克制运用。`#76b900` 出现在边框（`2px solid #76b900`）、链接下划线（`underline 2px rgb(118, 185, 0)`）和行动号召元素中——但绝不用于主内容区域的背景或大面积填充。绿色是信号，而非表面。配合深度阴影系统（`rgba(0, 0, 0, 0.3) 0px 0px 5px`）和极小圆角（1–2px），整体效果宛如精密工程硬件以像素呈现。
**核心特征：**
- NVIDIA 绿（`#76b900`）作为纯粹点缀——仅用于边框、下划线和交互高亮
- 以黑色（`#000000`）为主导背景，深色区块使用白色（`#ffffff`）文字
- NVIDIA-EMEA 定制字体，备用 Arial/Helvetica——工业感、欧式风格、简洁干净
- 紧致行高（标题 1.25），形成密集而权威的文字块
- 极小圆角（1–2px）——锐利、工程化的直角贯穿全站
- 绿色边框按钮（`2px solid #76b900`）作为主要交互模式
- Font Awesome 6 Pro/Sharp 图标系统，字重 900，图标锐利有力
- 多框架架构（PrimeReact、Fluent UI、Element Plus），支持丰富的交互组件
## 2. 色彩系统与职责
### 主品牌色
- **NVIDIA 绿**（`#76b900`）：标志性色彩——边框、链接下划线、行动号召轮廓、激活指示器。绝不用于大面积填充。
- **纯黑**（`#000000`）：主页面背景、浅色表面上的文字、主导色调。
- **纯白**（`#ffffff`）：深色背景上的文字、浅色区块背景、卡片表面。
### 品牌扩展色板
- **NVIDIA 浅绿**（`#bff230`）：明亮柠檬绿，用于高亮和悬停状态。
- **橙色 400**（`#df6500`）：暖色点缀，用于警告、特色徽章或能源相关场景。
- **黄色 300**（`#ef9100`）：次要暖色点缀，产品类别高亮。
- **黄色 050**（`#feeeb2`）：浅暖色表面，用于标注背景。
### 语义状态色
- **红色 500**（`#e52020`）：错误状态、破坏性操作、严重警告。
- **红色 800**（`#650b0b`）：深红色，用于严重警告背景。
- **绿色 500**（`#3f8500`）：成功状态、正向指示（比品牌绿更深）。
- **蓝色 700**（`#0046a4`）：信息性点缀，链接悬停备选色。
### 装饰色
- **紫色 800**（`#4d1368`）：深紫色，用于渐变末端、高端/AI 语境。
- **紫色 100**（`#f9d4ff`）：浅紫色表面色调。
- **品红 700**（`#8c1c55`）：浓郁点缀，用于特别促销或精选内容。
### 中性色阶
- **灰色 300**（`#a7a7a7`）：弱化文字、禁用标签。
- **灰色 400**（`#898989`）：次要文字、元数据。
- **灰色 500**（`#757575`）：第三层文字、占位符、页脚。
- **灰色边框**（`#5e5e5e`）：淡色边框、分割线。
- **近黑色**（`#1a1a1a`）：深色表面、黑色页面上的卡片背景。
### 交互状态
- **链接默认（深色背景）**（`#ffffff`）：深色背景上的白色链接。
- **链接默认（浅色背景）**（`#000000`）：浅色背景上带绿色下划线的黑色链接。
- **链接悬停**（`#3860be`）：所有链接变体悬停时统一转为蓝色。
- **按钮悬停**（`#1eaedb`）：按钮悬停状态的青色高亮。
- **按钮激活**（`#007fff`）：按钮激活/按下状态的亮蓝色。
- **焦点环**（`#000000 solid 2px`）：键盘焦点的黑色轮廓。
### 阴影与层次
- **卡片阴影**（`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`）：悬浮卡片的柔和环境阴影。
## 3. 字体排印规范
### 字体系列
- **主字体**：`NVIDIA-EMEA`，备用字体：`Arial, Helvetica, sans-serif`
- **图标字体**：`Font Awesome 6 Pro`（实心图标字重 900，常规字重 700）
- **锐化图标**：`Font Awesome 6 Sharp`（细线图标字重 300，常规字重 400）
### 层级
| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
|------|------|------|--------|-------------|----------------|-------|
| 展示主标题 | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25（紧凑） | normal | 最大视觉冲击力的标题 |
| 区块标题 | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25（紧凑） | normal | 区块标题、卡片标题 |
| 副标题 | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75（宽松） | normal | 功能描述、副标题 |
| 卡片标题 | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25（紧凑） | normal | 卡片与模块标题 |
| 大号正文 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67（宽松） | normal | 强调正文、导言段落 |
| 正文 | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | 标准阅读文字 |
| 粗体正文 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | 强调标签、导航项 |
| 小号正文 | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67（宽松） | normal | 次要内容、描述文字 |
| 小号粗体正文 | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | 强调次要内容 |
| 大号按钮 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25（紧凑） | normal | 主要行动号召按钮 |
| 按钮 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25（紧凑） | normal | 标准按钮 |
| 紧凑按钮 | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00（紧凑） | 0.144px | 小型/紧凑按钮 |
| 链接 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | 导航链接 |
| 大写链接 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`，导航标签 |
| 说明文字 | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | 元数据、时间戳 |
| 小号说明文字 | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25（紧凑） | normal | 细则、法律文字 |
| 微型标签 | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`，微型徽章 |
| 微型文字 | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00（紧凑） | normal | 最小 UI 文字 |
### 原则
- **粗体是默认声音**：NVIDIA 大量使用字重 700 用于标题、按钮、链接和标签。400 字重仅留给正文和描述——其余一律粗体，传递自信与权威。
- **紧凑标题，宽松正文**：标题行高统一为 1.25（紧凑），正文则放宽至 1.50–1.67。这种对比在内容块顶部制造视觉密度，在段落中保持舒适可读性。
- **导航使用大写**：链接标签采用 `text-transform: uppercase` 配字重 700，形成一种读起来像硬件规格标签的导航语气。
- **无装饰字间距**：除紧凑按钮（0.144px）外，全站字间距均为 normal。字体本身承载工业气质，无需额外操控。
## 4. 组件样式
### 按钮
**主按钮（绿色边框）**
- Background: `transparent`
- Text: `#000000`
- Padding: 11px 13px
- Border: `2px solid #76b900`
- Radius: 2px
- Font: 16px weight 700
- Hover: background `#1eaedb`, text `#ffffff`
- Active: background `#007fff`, text `#ffffff`, border `1px solid #003eff`, scale(1)
- Focus: background `#1eaedb`, text `#ffffff`, outline `#000000 solid 2px`, opacity 0.9
- 用途：主要行动号召（"了解更多"、"探索解决方案"）
**次要按钮（细绿边框）**
- Background: transparent
- Border: `1px solid #76b900`
- Radius: 2px
- 用途：次要操作、替代行动号召
**紧凑/内联按钮**
- Font: 14.4px weight 700
- Letter-spacing: 0.144px
- Line-height: 1.00
- 用途：内联行动号召、紧凑导航
### 卡片与容器
- Background: `#ffffff`（浅色）或 `#1a1a1a`（深色区块）
- Border: 无（干净边缘）或 `1px solid #5e5e5e`
- Radius: 2px
- Shadow: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`，用于悬浮卡片
- Hover: 阴影加深
- Padding: 内部 16–24px
### 链接
- **深色背景**：`#ffffff`，无下划线，悬停变为 `#3860be`
- **浅色背景**：`#000000` 或 `#1a1a1a`，下划线 `2px solid #76b900`，悬停变为 `#3860be`，下划线消失
- **绿色链接**：`#76b900`，悬停变为 `#3860be`
- **弱化链接**：`#666666`，悬停变为 `#3860be`
### 导航
- 深黑色背景（`#000000`）
- Logo 左对齐，NVIDIA 文字标志醒目
- 链接：NVIDIA-EMEA 14px 字重 700 大写，`#ffffff`
- Hover: 颜色变化，下划线不变
- 产品类别下拉巨型菜单
- 滚动时固定，带背景遮罩
### 图片处理
- 产品/GPU 渲染图作为主视觉，通常全宽展示
- 截图配合淡阴影增加深度感
- 深色主视觉区块叠加绿色渐变
- 圆形头像容器，圆角 50%
### 特色组件
**产品卡片**
- 干净的白色或深色卡片，圆角极小（2px）
- 标题处绿色点缀边框或下划线
- 粗体标题 + 较细描述的搭配模式
- 底部带绿色边框的行动号召
**技术规格表**
- 工业化网格布局
- 交替行背景（微妙灰色切换）
- 粗体标签，常规数值
- 关键指标绿色高亮
**Cookie/同意横幅**
- 固定在底部
- 圆角按钮（2px 圆角）
- 灰色边框处理
## 5. 布局原则
### 间距系统
- 基础单位：8px
- 刻度：1px、2px、3px、4px、5px、6px、7px、8px、9px、10px、11px、12px、13px、15px
- 主要内边距值：8px、11px、13px、16px、24px、32px
- 区块间距：垂直内边距 48–80px
### 网格与容器
- 最大内容宽度：约 1200px（有约束）
- 全宽主视觉区块，文字有约束
- 功能区块：产品卡片使用 2–3 列网格
- 文章/博客内容单列
- 文档使用侧边栏布局
### 留白哲学
- **有目的的密度**：NVIDIA 使用比典型 SaaS 站点更紧密的间距，反映技术内容的密度特性。留白是为了分隔概念，而非创造奢华的空旷感。
- **区块节奏**：深色区块与白色区块交替出现，用背景色（而非仅靠间距）分隔内容块。
- **卡片密度**：产品卡片紧密排列，间距 16–20px，整体呈现目录感而非画廊感。
### 圆角刻度
- 微型（1px）：内联 span、小型元素
- 标准（2px）：按钮、卡片、容器、输入框——几乎所有元素的默认值
- 圆形（50%）：头像图片、圆形 tab 指示器
## 6. 深度与层次
| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 扁平（Level 0） | 无阴影 | 页面背景、内联文字 |
| 轻微（Level 1） | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | 标准卡片、模态框 |
| 边框（Level 1b） | `1px solid #5e5e5e` | 内容分割线、区块边框 |
| 绿色点缀（Level 2） | `2px solid #76b900` | 激活元素、行动号召、选中项 |
| 焦点（无障碍） | `2px solid #000000` outline | 键盘焦点环 |
**阴影哲学**：NVIDIA 的深度系统简约而实用。实际上只有一个阴影值——5px 环境模糊、30% 不透明度——少量用于卡片和模态框。主要的深度信号不是阴影，而是_色彩对比_：黑色背景紧邻白色区块，黑色表面上的绿色边框。这创造出一种类似硬件的视觉分层感，深度来自材质差异，而非模拟光线。
### 装饰性深度
- 主视觉内容后方的绿色渐变晕染
- 区块过渡使用深色到更深色的渐变（黑色到近黑色）
- 无磨砂玻璃或模糊效果——清晰胜于氛围感
## 7. 响应式行为
### 断点
| 名称 | 宽度 | 主要变化 |
|------|-------|-------------|
| 小屏手机 | <375px | 紧凑单列，减少内边距 |
| 手机 | 375-425px | 标准移动端布局 |
| 大屏手机 | 425-600px | 较宽移动端，部分出现双列提示 |
| 小平板 | 600-768px | 开始出现双列网格 |
| 平板 | 768-1024px | 完整卡片网格，展开导航 |
| 桌面 | 1024-1350px | 标准桌面布局 |
| 大屏桌面 | >1350px | 最大内容宽度，充裕外边距 |
### 触控目标
- 按钮使用 11px 13px 内边距，确保舒适的点击目标
- 导航链接 14px 大写，间距充足
- 绿色边框按钮在深色背景上提供高对比触控目标
- 移动端：汉堡菜单收起，展开时覆盖全屏
### 折叠策略
- 主视觉：36px 标题按比例缩小
- 导航：完整横向导航在约 1024px 时折叠为汉堡菜单
- 产品卡片：三列→两列→单列堆叠
- 页脚：多列网格折叠为单列堆叠
- 区块间距：64–80px 在移动端缩减为 32–48px
- 图片：保持宽高比，缩放至容器宽度
### 图片行为
- GPU/产品渲染图在各尺寸下保持高分辨率
- 主视觉图片随视口等比缩放
- 卡片图片使用统一宽高比
- 全出血深色区块保持边到边处理
## 8. 响应式行为（扩展）
### 字体缩放
- 展示标题 36px 在移动端缩小至约 24px
- 区块标题 24px 在移动端缩小至约 20px
- 正文字体在所有断点保持 15–16px
- 按钮文字保持 16px，确保一致的点击目标
### 深色/浅色区块策略
- 深色区块（黑色背景，白色文字）与浅色区块（白色背景，黑色文字）交替出现
- 绿色点缀色在两种表面类型上保持一致
- 深色区块：链接为白色，下划线为绿色
- 浅色区块：链接为黑色，下划线为绿色
- 这种交替形成自然的滚动节奏和内容分组
## 9. Agent 提示词指南
### 快速色彩参考
- 主要点缀色：NVIDIA 绿（`#76b900`）
- 深色背景：纯黑（`#000000`）
- 浅色背景：纯白（`#ffffff`）
- 标题文字（深色背景）：白色（`#ffffff`）
- 标题文字（浅色背景）：黑色（`#000000`）
- 正文（浅色背景）：黑色（`#000000`）或近黑色（`#1a1a1a`）
- 正文（深色背景）：白色（`#ffffff`）或灰色 300（`#a7a7a7`）
- 链接悬停：蓝色（`#3860be`）
- 边框点缀：`2px solid #76b900`
- 按钮悬停：青色（`#1eaedb`）
### 组件提示词示例
- "在黑色背景上创建主视觉区块。标题使用 36px NVIDIA-EMEA 字重 700，行高 1.25，颜色 #ffffff。副标题 18px 字重 400，行高 1.67，颜色 #a7a7a7。行动号召按钮使用透明背景，2px solid #76b900 边框，2px 圆角，11px 13px 内边距，文字 #ffffff。悬停：背景 #1eaedb，文字白色。"
- "设计一张产品卡片：白色背景，2px border-radius，box-shadow rgba(0,0,0,0.3) 0px 0px 5px。标题 20px NVIDIA-EMEA 字重 700，行高 1.25，颜色 #000000。正文 15px 字重 400，行高 1.67，颜色 #757575。标题绿色下划线点缀：border-bottom 2px solid #76b900。"
- "构建导航栏：#000000 背景，固定顶部。NVIDIA logo 左对齐。链接 14px NVIDIA-EMEA 字重 700 大写，颜色 #ffffff。悬停：颜色 #3860be。右对齐绿色边框行动号召按钮。"
- "创建深色功能区块：#000000 背景。区块标签 14px 字重 700 大写，颜色 #76b900。标题 24px 字重 700，颜色 #ffffff。描述 16px 字重 400，颜色 #a7a7a7。三张产品卡片一排，间距 20px。"
- "设计页脚：#000000 背景。多列布局，带链接分组。链接 14px 字重 400，颜色 #a7a7a7。悬停：颜色 #76b900。底部栏法律文字 12px，颜色 #757575。"
### 迭代指南
1. 始终使用 `#76b900` 作为点缀色，绝不用作背景填充——它是边框、下划线和高亮的信号色
2. 按钮默认透明配绿色边框——填充背景仅在悬停/激活状态时出现
3. 字重 700 是所有交互和标题元素的主导声音；400 仅用于正文段落
4. 所有元素圆角均为 2px——这种锐利、极简的圆角是工业美学的核心
5. 深色区块用白色文字，浅色区块用黑色文字——绿色点缀色在两种情况下效果一致
6. 链接悬停始终为 `#3860be`（蓝色），无论链接默认颜色如何
7. 标题行高 1.25，正文行高 1.50–1.67——保持这种对比以形成视觉层级
8. 导航使用大写 14px 粗体——这种硬件标签式字排印是品牌声音的组成部分
Reference in new issue View Git Blame Copy Permalink