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

12 KiB

Raw Blame History

受 Pinterest 启发的设计系统

Category: 媒体与消费视觉发现。红色点缀，瀑布流网格，图片优先。

1. 视觉主题与氛围

Pinterest 的网站是一块温暖、充满灵感的画布，将视觉发现体验打造得如同生活方式杂志。设计基于柔和、略带暖意的白色背景，以 Pinterest 红（#e60023）作为唯一醒目的品牌点缀色。与大多数科技平台的冷蓝色调不同，Pinterest 的中性色系带有明显的暖色调——灰色偏向橄榄/沙色（#91918c、#62625b、#e5e5e0），而非冷钢色，营造出温馨、手工感十足的氛围，让人忍不住想要浏览下去。

字体使用 Pin Sans——一款定制专属字体，拥有宽泛的备用字体栈（包含日文字体），体现了 Pinterest 的全球影响力。在展示级别（70px，字重 600），Pin Sans 打造出宽大、亲切的标题。在较小尺寸下，系统保持紧凑：按钮 12px，说明文字 12–14px。CSS 变量命名体系（--comp-*、--sema-*、--base-*）揭示了一套精密的三层设计 token 架构：组件层、语义层和基础层 token。

Pinterest 的特色在于其慷慨的圆角系统（12px–40px，加上圆形的 50%）以及带暖色调的按钮背景。次要按钮（#e5e5e0）呈现出明显的暖沙色调，而非冷灰色。主要红色按钮使用 16px 圆角——圆润但不是药丸形。结合暖色徽章背景（hsla(60,20%,98%,.5)——微妙的暖黄色调）以及以摄影为主导的版面，最终呈现出一种手工感、个性化的设计，而非企业化、千篇一律的风格。

关键特征：

带橄榄/沙色中性色的暖白色画布——温馨，而非冷峻
Pinterest 红（#e60023）作为唯一醒目的点缀色——从不低调，始终自信
Pin Sans 定制字体，配备全球备用字体栈（含 CJK）
三层 token 架构：--comp-* / --sema-* / --base-*
暖色次要表面：沙灰色（#e5e5e0）、暖色徽章（hsla(60,20%,98%,.5)）
慷慨的圆角：标准 16px，大容器最高 40px
摄影内容优先——图钉/图像是主要视觉元素
深近紫色文字（#211922）——温暖，带一丝梅红色

2. 色彩调色板与用途

主品牌色

Pinterest 红（#e60023）：主要 CTA、品牌点缀——醒目、自信的红色
绿色 700（#103c25）：--base-color-green-700，成功/自然点缀
绿色 700 悬停（#0b2819）：--base-color-hover-green-700，按下的绿色

文字色

梅黑色（#211922）：主要文字——带梅红色调的暖近黑色
纯黑（#000000）：次要文字、按钮文字
橄榄灰（#62625b）：次要描述，低调文字
暖银色（#91918c）：--comp-button-color-text-transparent-disabled，禁用文字，输入框边框
白色（#ffffff）：深色/彩色表面上的文字

交互色

焦点蓝（#435ee5）：--comp-button-color-border-focus-outer-transparent，焦点环
性能紫（#6845ab）：--sema-color-hover-icon-performance-plus，性能功能
推荐紫（#7e238b）：--sema-color-hover-text-recommendation，AI 推荐
链接蓝（#2b48d4）：链接文字颜色
Facebook 蓝（#0866ff）：--facebook-background-color，社交登录
按下蓝（#617bff）：--base-color-pressed-blue-200，按下状态

表面与边框

沙灰色（#e5e5e0）：次要按钮背景——温暖，手工感
暖亮色（#e0e0d9）：圆形按钮背景，徽章
暖色调（hsla(60, 20%, 98%, 0.5)）：--comp-badge-color-background-wash-light，微妙的暖色徽章背景
雾色（#f6f6f3）：浅色表面（50% 不透明度）
禁用边框（#c8c8c1）：--sema-color-border-disabled，禁用边框
悬停灰（#bcbcb3）：--base-color-hover-grayscale-150，悬停边框
深色表面（#33332e）：深色区域背景

语义色

错误红（#9e0a0a）：复选框/表单错误状态

3. 字体规则

字体家族

主字体：Pin Sans，备用字体：-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳＰゴシック, Arial

层次结构

角色	字体	大小	字重	行高	字间距	备注
展示主标题	Pin Sans	70px (4.38rem)	600	normal	normal	最大视觉冲击力
区块标题	Pin Sans	28px (1.75rem)	700	normal	-1.2px	负字间距
正文	Pin Sans	16px (1.00rem)	400	1.40	normal	标准阅读
加粗说明	Pin Sans	14px (0.88rem)	700	normal	normal	强调元数据
说明	Pin Sans	12px (0.75rem)	400–500	1.50	normal	小字，标签
按钮	Pin Sans	12px (0.75rem)	400	normal	normal	按钮标签

原则

紧凑字号体系：字号范围 12px–70px，跨度显著——大多数功能性文字为 12–16px，营造密集的应用感信息层次。
暖色字重分布：标题 600–700，正文 400–500。无超轻字重——文字始终感觉有分量。
标题负字间距：28px 标题的 -1.2px 字间距创造出温馨、亲近的区块标题感。
单一字体家族：Pin Sans 承担所有排版——未检测到次要展示或等宽字体。

4. 组件样式

按钮

主要红色按钮

背景：#e60023（Pinterest 红）
文字：#000000（黑色——在红色上的对比度是个不寻常的选择）
内边距：6px 14px
圆角：16px（圆润但非药丸形）
边框：2px solid rgba(255, 255, 255, 0)（透明）
焦点：通过 CSS 变量实现的语义边框 + 轮廓

次要沙色按钮

背景：#e5e5e0（暖沙灰色）
文字：#000000
内边距：6px 14px
圆角：16px
焦点：相同的语义边框系统

圆形操作按钮

背景：#e0e0d9（暖亮色）
文字：#211922（梅黑色）
圆角：50%（圆形）
用途：图钉操作、导航控件

幽灵/透明按钮

背景：透明
文字：#000000
无边框
用途：第三级操作

卡片与容器

以摄影为主的图钉卡片，慷慨的圆角（12px–20px）
大多数卡片无传统盒阴影
白色或暖雾色背景
部分图片容器有 8px 白色厚边框

输入框

邮箱输入框：白色背景，1px solid #91918c 边框，16px 圆角，11px 15px 内边距
焦点：通过 CSS 变量实现的语义边框 + 轮廓系统

图片处理

图钉式瀑布流网格（Pinterest 标志性版面）
图片圆角：12px–20px
摄影作为主要内容——每个图钉都是一张图片
精选图片容器有 8px 白色厚边框

5. 版面原则

间距系统

基础单位：8px
刻度：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
大跳跃：32px → 80px → 100px 用于区块间距

网格与容器

图钉内容使用瀑布流网格（标志性版面）
居中内容区块，充裕的最大宽度
全宽深色页脚
搜索栏作为主要导航元素

留白哲学

灵感密度：瀑布流网格将图钉紧密排列——内容密度本身就是价值主张。留白存在于区块之间，而非网格内部。
上方呼吸，下方密集：主角/特色区块获得充裕的内边距；图钉网格紧凑而沉浸。

圆角体系

标准（12px）：小卡片，链接
按钮（16px）：按钮、输入框、中等卡片
舒适（20px）：特色卡片
大（28px）：大容器
区块（32px）：标签元素，大面板
主角（40px）：主角容器，大型特色块
圆形（50%）：操作按钮，标签指示器

6. 层次与阴影

层级	处理方式	用途
扁平（0 级）	无阴影	默认——图钉依靠内容而非阴影
微妙（1 级）	最小阴影（来自 token）	悬浮叠层，下拉菜单
焦点（无障碍）	`--sema-color-border-focus-outer-default` 环	焦点状态

阴影哲学：Pinterest 使用极少的阴影。瀑布流网格依靠内容（摄影）创造视觉趣味，而非依靠提升效果。深度来自表面颜色的温暖感和容器的慷慨圆角。

7. 应做与不应做

应做

使用暖中性色（#e5e5e0、#e0e0d9、#91918c）——橄榄/沙色调是品牌标识
仅将 Pinterest 红（#e60023）用于主要 CTA——它醒目且唯一
专一使用 Pin Sans——一种字体统揽一切
应用慷慨的圆角：按钮/输入框 16px，卡片 20px+
保持瀑布流网格的密集感——内容密度就是价值
使用暖色徽章背景（hsla(60,20%,98%,.5)）实现微妙的暖色调
主要文字使用 #211922（梅黑色）——比纯黑更温暖

不应做

不要使用冷灰色中性色——始终保持暖色/橄榄色调
不要使用纯黑（#000000）作为主要文字——使用梅黑色（#211922）
不要使用药丸形按钮——16px 圆角是圆润的，但不是药丸形
不要添加厚重阴影——Pinterest 设计上是扁平的，深度来自内容
不要在卡片上使用小圆角（<12px）——慷慨的圆角是核心
不要引入额外的品牌色——红色+暖中性色就是完整的色彩体系
不要使用细字重——Pin Sans 最低 400

8. 响应式行为

断点

名称	宽度	主要变化
移动端	<576px	单列，紧凑布局
大移动端	576–768px	2 列图钉网格
平板	768–890px	扩展网格
小桌面	890–1312px	标准瀑布流网格
桌面	1312–1440px	完整布局
大桌面	1440–1680px	扩展网格列
超宽屏	>1680px	最大网格密度

折叠策略

图钉网格：5+ 列 → 3 → 2 → 1
导航：搜索栏 + 图标 → 简化移动端导航
特色区块：并排 → 堆叠
主角：70px → 按比例缩小
页脚：深色多列 → 堆叠

9. 智能代理提示指南

快速颜色参考

品牌色：Pinterest 红（#e60023）
背景色：白色（#ffffff）
文字色：梅黑色（#211922）
次要文字：橄榄灰（#62625b）
按钮表面：沙灰色（#e5e5e0）
边框色：暖银色（#91918c）
焦点色：焦点蓝（#435ee5）

示例组件提示

"创建一个主角区块：白色背景。标题使用 70px Pin Sans 字重 600，梅黑色（#211922）。红色 CTA 按钮（#e60023，16px 圆角，6px 14px 内边距）。次要沙色按钮（#e5e5e0，16px 圆角）。"
"设计一个图钉卡片：白色背景，16px 圆角，无阴影。摄影填充顶部，下方 16px Pin Sans 字重 400 描述文字，颜色 #62625b。"
"制作一个圆形操作按钮：#e0e0d9 背景，50% 圆角，#211922 图标。"
"创建一个输入框：白色背景，1px solid #91918c，16px 圆角，11px 15px 内边距。焦点：通过语义 token 实现蓝色轮廓。"
"设计深色页脚：#33332e 背景。白色 Pinterest 手写体 logo。12px Pin Sans 链接，颜色 #91918c。"

迭代指南

随处使用暖中性色——橄榄/沙灰色，绝不用冷钢色
Pinterest 红仅用于 CTA——醒目且唯一
按钮/输入框 16px 圆角，卡片 20px+——慷慨但非药丸形
Pin Sans 是唯一字体——UI 紧凑 12px，展示 70px
摄影承载设计——UI 保持温暖而简约
文字使用梅黑色（#211922）——比纯黑更温暖

12 KiB Raw Blame History Unescape Escape