0 Fork 0

Files

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

16 KiB

Raw Blame History

灵感源自 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

图片处理

产品/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。"

迭代指南

始终使用 #76b900 作为点缀色，绝不用作背景填充——它是边框、下划线和高亮的信号色
按钮默认透明配绿色边框——填充背景仅在悬停/激活状态时出现
字重 700 是所有交互和标题元素的主导声音；400 仅用于正文段落
所有元素圆角均为 2px——这种锐利、极简的圆角是工业美学的核心
深色区块用白色文字，浅色区块用黑色文字——绿色点缀色在两种情况下效果一致
链接悬停始终为 #3860be（蓝色），无论链接默认颜色如何
标题行高 1.25，正文行高 1.50–1.67——保持这种对比以形成视觉层级
导航使用大写 14px 粗体——这种硬件标签式字排印是品牌声音的组成部分

16 KiB Raw Blame History Unescape Escape