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

17 KiB

Raw Blame History

受 Notion 启发的设计系统

Category: 效率与 SaaS 一体化工作区。温暖极简主义，衬线字体标题，柔和界面。

1. 视觉主题与氛围

Notion 的网站体现了其工具本身的哲学：一块不干扰你的空白画布。设计系统建立在温暖中性色调而非冷灰色之上，创造出一种截然不同的平易近人的极简主义风格，感觉像优质纸张而非无菌玻璃。页面画布是纯白色（#ffffff），但文字并非纯黑——它是一种温暖的近黑色（rgba(0,0,0,0.95)），以难以察觉的方式柔化了阅读体验。温暖灰色调（#f6f5f4、#31302e、#615d59、#a39e98）带有细微的黄棕色底色，赋予界面一种触感十足、近乎模拟的温暖。

定制字体 NotionInter（修改版 Inter）是整个系统的骨架。在展示尺寸（64px）下，它使用激进的负字间距（-2.125px），使标题看起来紧凑而精准。字重范围比一般系统更广：正文 400，UI 元素 500，半粗标签 600，展示标题 700。较大文字上启用了 OpenType 特性 "lnum"（等高数字）和 "locl"（本地化字形），增加了排印精致度，值得细细品读。

Notion 视觉语言的独特之处在于其边框哲学。Notion 不使用厚重边框或阴影，而是使用超细的 1px solid rgba(0,0,0,0.1) 边框——这些边框如低语般存在，几乎难以察觉的分界线在不增加重量的情况下创造结构。阴影系统同样克制：多层叠加，累积透明度从未超过 0.05，创造出感受到而非看到的深度。

核心特征：

NotionInter（修改版 Inter），展示尺寸使用负字间距（64px 时 -2.125px）
温暖中性色调：灰色带有黄棕色底色（#f6f5f4 温暖白，#31302e 温暖深色）
通过 rgba(0,0,0,0.95) 实现近黑色文字——非纯黑，营造微妙温暖感
超细边框：全局使用 1px solid rgba(0,0,0,0.1)——低语级别的分割
透明度低于 0.05 的多层阴影叠加，营造若有若无的深度
Notion 蓝（#0075de）作为 CTA 和交互元素的唯一强调色
胶囊徽章（9999px 圆角）配色调蓝色背景，用于状态指示器
8px 基础间距单位，有机、非刚性的比例

2. 色彩体系与角色

主色

Notion 黑（rgba(0,0,0,0.95) / #000000f2）：主要文字、标题、正文。95% 不透明度在不影响可读性的情况下柔化了纯黑。
纯白（#ffffff）：页面背景、卡片表面、蓝色上的按钮文字。
Notion 蓝（#0075de）：主要 CTA、链接颜色、交互强调色——核心 UI 框架中唯一的饱和色。

品牌辅助色

深海军蓝（#213183）：次要品牌色，少量用于强调和深色功能区块。
激活蓝（#005bab）：按钮激活/按下状态——Notion 蓝的深色变体。

温暖中性色调

温暖白（#f6f5f4）：背景表面色调、区块交替、细微卡片填充。黄色底色是关键。
温暖深色（#31302e）：深色表面背景、深色区块文字。比标准灰色更温暖。
温暖灰 500（#615d59）：次要文字、描述、静音标签。
温暖灰 300（#a39e98）：占位文字、禁用状态、说明文字。

语义强调色

青绿（#2a9d99）：成功状态、正面指示器。
绿色（#1aae39）：确认、完成徽章。
橙色（#dd5b00）：警告状态、注意指示器。
粉色（#ff64c8）：装饰性强调、功能高亮。
紫色（#391c57）：高级功能、深色强调。
棕色（#523410）：大地色强调、温暖功能区块。

交互色

链接蓝（#0075de）：主要链接颜色，悬停时带下划线。
浅链接蓝（#62aef0）：深色背景上的浅色链接变体。
焦点蓝（#097fe8）：交互元素的焦点环。
徽章蓝背景（#f2f9ff）：胶囊徽章背景，蓝色调表面。
徽章蓝文字（#097fe8）：胶囊徽章文字，深蓝色确保可读性。

阴影与深度

卡片阴影（rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px）：多层卡片高度。
深阴影（rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px）：模态框和特色内容的五层深度高度。
低语边框（1px solid rgba(0,0,0,0.1)）：标准分割边框——卡片、分隔线、区块。

3. 排版规则

字体家族

主字体：NotionInter，备用字体：Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol
OpenType 特性：在展示和标题文字上启用 "lnum"（等高数字）和 "locl"（本地化字形）。

层次结构

角色	字体	尺寸	字重	行高	字间距	备注
展示主标题	NotionInter	64px (4.00rem)	700	1.00（紧凑）	-2.125px	最大压缩，广告牌级标题
展示次标题	NotionInter	54px (3.38rem)	700	1.04（紧凑）	-1.875px	次要主标，功能标题
区块标题	NotionInter	48px (3.00rem)	700	1.00（紧凑）	-1.5px	功能区块标题，配合 `"lnum"`
大型副标题	NotionInter	40px (2.50rem)	700	1.50	normal	卡片标题、功能子区块
副标题	NotionInter	26px (1.63rem)	700	1.23（紧凑）	-0.625px	区块副标题、内容标题
卡片标题	NotionInter	22px (1.38rem)	700	1.27（紧凑）	-0.25px	功能卡片、列表标题
大正文	NotionInter	20px (1.25rem)	600	1.40	-0.125px	简介、功能描述
正文	NotionInter	16px (1.00rem)	400	1.50	normal	标准阅读文字
正文中等	NotionInter	16px (1.00rem)	500	1.50	normal	导航、强调 UI 文字
正文半粗	NotionInter	16px (1.00rem)	600	1.50	normal	强调标签、激活状态
正文粗体	NotionInter	16px (1.00rem)	700	1.50	normal	正文尺寸的标题
导航/按钮	NotionInter	15px (0.94rem)	600	1.33	normal	导航链接、按钮文字
说明	NotionInter	14px (0.88rem)	500	1.43	normal	元数据、次要标签
浅说明	NotionInter	14px (0.88rem)	400	1.43	normal	正文说明、描述
徽章	NotionInter	12px (0.75rem)	600	1.33	0.125px	胶囊徽章、标签、状态标签
微型标签	NotionInter	12px (0.75rem)	400	1.33	0.125px	小元数据、时间戳

原则

尺度压缩：NotionInter 在展示尺寸使用 64px 时 -2.125px 的字间距，逐渐放宽至 26px 时 -0.625px 和 16px 时的正常值。压缩在标题处创造密度，同时在正文尺寸保持可读性。
四字重系统：400（正文/阅读）、500（UI/交互）、600（强调/导航）、700（标题/展示）。与大多数系统相比更宽的字重范围允许细腻的层次结构。
温暖缩放：行高随尺寸增大而收紧——正文（16px）1.50，副标题 1.23-1.27，展示 1.00-1.04。这在标题处创造更密集、更有冲击力的效果。
徽章微字距：12px 徽章文字使用正字间距（0.125px）——系统中唯一的正字距，创造更宽、更易辨认的小号文字。

4. 组件样式

按钮

主蓝色

背景：#0075de（Notion 蓝）
文字：#ffffff
内边距：8px 16px
圆角：4px（微妙）
边框：1px solid transparent
悬停：背景加深至 #005bab
激活：scale(0.9) 变换
焦点：2px solid 焦点轮廓，var(--shadow-level-200) 阴影
用途：主要 CTA（"免费使用 Notion"、"立即尝试"）

次要/三级

背景：rgba(0,0,0,0.05)（半透明温暖灰）
文字：#000000（近黑色）
内边距：8px 16px
圆角：4px
悬停：文字颜色变化，scale(1.05)
激活：scale(0.9) 变换
用途：次要操作、表单提交

幽灵/链接按钮

背景：透明
文字：rgba(0,0,0,0.95)
装饰：悬停时下划线
用途：三级操作、内联链接

胶囊徽章按钮

背景：#f2f9ff（蓝色调）
文字：#097fe8
内边距：4px 8px
圆角：9999px（完整胶囊）
字体：12px 字重 600
用途：状态徽章、功能标签、"新"标签

卡片与容器

背景：#ffffff
边框：1px solid rgba(0,0,0,0.1)（低语边框）
圆角：12px（标准卡片），16px（特色/主打卡片）
阴影：rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px
悬停：微妙阴影增强
图片卡片：12px 顶部圆角，图片填充上半部分

输入框与表单

背景：#ffffff
文字：rgba(0,0,0,0.9)
边框：1px solid #dddddd
内边距：6px
圆角：4px
焦点：蓝色轮廓环
占位符：温暖灰 #a39e98

白色背景上的简洁水平导航，非粘性
品牌标志左对齐（33x34px 图标 + 文字标志）
链接：NotionInter 15px 字重 500-600，近黑色文字
悬停：颜色变化至 var(--color-link-primary-text-hover)
CTA：蓝色胶囊按钮（"免费使用 Notion"）右对齐
移动端：汉堡菜单折叠
带多层分类菜单的产品下拉菜单

图片处理

产品截图配 1px solid rgba(0,0,0,0.1) 边框
顶部圆角图片：12px 12px 0px 0px 圆角
仪表板/工作区预览截图主导功能区块
主标题插图后的温暖渐变背景（装饰性角色插图）

特色组件

带插图的功能卡片

大型插图标题（神奈川冲浪里、产品 UI 截图）
12px 圆角卡片配低语边框
标题 22px 字重 700，描述 16px 字重 400
温暖白（#f6f5f4）背景变体用于交替区块

信任栏/Logo 网格

公司标志（受信任团队区块）使用品牌原色
水平滚动或带团队数量的网格布局
指标展示：大数字 + 描述模式

指标卡片

大数字展示（例如"$4,200 ROI"）
NotionInter 40px+ 字重 700 用于指标
下方温暖灰正文描述
低语边框卡片容器

5. 布局原则

间距系统

基础单位：8px
比例：2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px
带小数值（5.6px、6.4px）的有机非刚性比例，用于微调

网格与容器

最大内容宽度：约 1200px
主标题：居中单列，顶部大内边距（80-120px）
功能区块：2-3 列卡片网格
全宽温暖白（#f6f5f4）区块背景用于交替
代码/仪表板截图配低语边框内嵌

空白哲学

充裕的垂直节奏：主要区块间 64-120px。Notion 让内容以大量垂直内边距呼吸。
温暖交替：白色区块与温暖白（#f6f5f4）区块交替，创造柔和的视觉节奏，无强烈色彩断裂。
内容优先密度：正文块紧凑（行高 1.50），但被充裕的边距包围，在白色空间的海洋中创造可读内容孤岛。

圆角比例

微型（4px）：按钮、输入框、功能性交互元素
微妙（5px）：链接、列表项、菜单项
标准（8px）：小卡片、容器、内联元素
舒适（12px）：标准卡片、功能容器、图片顶部
大型（16px）：主打卡片、特色内容、推广块
完整胶囊（9999px）：徽章、胶囊、状态指示器
圆形（100%）：标签指示器、头像

6. 深度与高度

层级	处理方式	用途
平面（Level 0）	无阴影，无边框	页面背景、文字块
低语（Level 1）	`1px solid rgba(0,0,0,0.1)`	标准边框、卡片轮廓、分隔线
柔和卡片（Level 2）	4层阴影叠加（最大透明度 0.04）	内容卡片、功能块
深度卡片（Level 3）	5层阴影叠加（最大透明度 0.05，52px 模糊）	模态框、特色面板、主打元素
焦点（无障碍）	`2px solid var(--focus-color)` 轮廓	所有交互元素的键盘焦点

阴影哲学：Notion 的阴影系统使用多层极低个体透明度（0.01 至 0.05）的叠加，累积成柔和、自然的高度效果。4层卡片阴影从 1.04px 延伸到 18px 模糊，创造深度渐变而非单一硬阴影。5层深阴影延伸至 52px 模糊，透明度 0.05，产生感觉像自然光而非计算机生成深度的环境遮蔽。这种分层方法使元素感觉嵌入页面而非漂浮于其上。

装饰性深度

主标题区块：装饰性角色插图（俏皮、手绘风格）
区块交替：白色到温暖白（#f6f5f4）背景切换
无硬性区块边框——分隔来自背景色变化和间距

7. 响应式行为

断点

名称	宽度	主要变化
小型移动	<400px	紧凑单列，最小内边距
移动	400-600px	标准移动，堆叠布局
小型平板	600-768px	开始 2 列网格
平板	768-1080px	完整卡片网格，扩展内边距
小型桌面	1080-1200px	标准桌面布局
桌面	1200-1440px	完整布局，最大内容宽度
大型桌面	>1440px	居中，充裕边距

触控目标

按钮使用舒适内边距（垂直 8px-16px）
导航链接 15px，配合充足间距
胶囊徽章有 8px 水平内边距用于点击目标
移动端菜单切换使用标准汉堡按钮

折叠策略

主标题：64px 展示 -> 缩小至 40px -> 移动端 26px，保持比例字间距
导航：水平链接 + 蓝色 CTA -> 汉堡菜单
功能卡片：3列 -> 2列 -> 单列堆叠
产品截图：使用响应式图片保持宽高比
信任栏标志：网格 -> 移动端水平滚动
页脚：多列 -> 堆叠单列
区块间距：80px+ -> 移动端 48px

图片行为

工作区截图在所有尺寸保持低语边框
主标题插图按比例缩放
产品截图使用一致圆角的响应式图片
全宽温暖白区块保持边到边处理

8. 无障碍与状态

焦点系统

所有交互元素接收可见焦点指示器
焦点轮廓：2px solid 配焦点色 + 阴影 level 200
所有交互组件全程支持键盘导航
高对比度文字：白色背景上的近黑色超过 WCAG AAA（>14:1 比率）

交互状态

默认：带低语边框的标准外观
悬停：文字颜色变化，按钮 scale(1.05)，链接下划线
激活/按下：scale(0.9) 变换，更深背景变体
焦点：带阴影加强的蓝色轮廓环
禁用：温暖灰（#a39e98）文字，降低透明度

色彩对比度

白色背景上的主要文字（rgba(0,0,0,0.95)）：约 18:1 比率
白色背景上的次要文字（#615d59）：约 5.5:1 比率（WCAG AA）
白色背景上的蓝色 CTA（#0075de）：约 4.6:1 比率（大文字 WCAG AA）
徽章背景（#f2f9ff）上的徽章文字（#097fe8）：约 4.5:1 比率（大文字 WCAG AA）

9. Agent 提示指南

快速色彩参考

主要 CTA：Notion 蓝（#0075de）
背景：纯白（#ffffff）
替代背景：温暖白（#f6f5f4）
标题文字：近黑色（rgba(0,0,0,0.95)）
正文文字：近黑色（rgba(0,0,0,0.95)）
次要文字：温暖灰 500（#615d59）
静音文字：温暖灰 300（#a39e98）
边框：1px solid rgba(0,0,0,0.1)
链接：Notion 蓝（#0075de）
焦点环：焦点蓝（#097fe8）

示例组件提示

"在白色背景上创建主标题区块。标题 64px NotionInter 字重 700，行高 1.00，字间距 -2.125px，颜色 rgba(0,0,0,0.95)。副标题 20px 字重 600，行高 1.40，颜色 #615d59。蓝色 CTA 按钮（#0075de，4px 圆角，8px 16px 内边距，白色文字）和幽灵按钮（透明背景，近黑色文字，悬停时下划线）。"
"设计一张卡片：白色背景，1px solid rgba(0,0,0,0.1) 边框，12px 圆角。使用阴影叠加：rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px。标题 22px NotionInter 字重 700，字间距 -0.25px。正文 16px 字重 400，颜色 #615d59。"
"构建一个胶囊徽章：#f2f9ff 背景，#097fe8 文字，9999px 圆角，4px 8px 内边距，12px NotionInter 字重 600，字间距 0.125px。"
"创建导航：白色标题栏。导航链接 NotionInter 15px 字重 600，近黑色文字。右对齐蓝色胶囊 CTA '免费使用 Notion'（#0075de 背景，白色文字，4px 圆角）。"
"设计交替区块布局：白色区块与温暖白（#f6f5f4）区块交替。每个区块 64-80px 垂直内边距，最大宽度 1200px 居中。区块标题 48px 字重 700，行高 1.00，字间距 -1.5px。"

迭代指南

始终使用温暖中性色——Notion 的灰色带有黄棕色底色（#f6f5f4、#31302e、#615d59、#a39e98），绝不使用蓝灰色
字间距随字体尺寸缩放：64px 时 -2.125px，54px 时 -1.875px，26px 时 -0.625px，16px 时正常
四种字重：400（阅读）、500（交互）、600（强调）、700（宣告）
边框是低语：1px solid rgba(0,0,0,0.1)——绝不更重
阴影使用 4-5 层，个体透明度从不超过 0.05
温暖白（#f6f5f4）区块背景对视觉节奏至关重要
状态/标签使用胶囊（9999px），按钮和输入框使用 4px 圆角
Notion 蓝（#0075de）是核心 UI 中唯一的饱和色——谨慎用于 CTA 和链接

17 KiB Raw Blame History Unescape Escape