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。
12 KiB
12 KiB
受 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 logo + 搜尋列居中
- 導覽連結 Pin Sans 16px
- 活躍狀態使用 Pinterest 紅色強調
圖片處理
- 圖釘式瀑布流網格（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）——比純黑更溫暖