④段整套同步（六节＋ 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
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,223 @@
+# 靈感源自 Figma 的設計系統
+
+> Category: 設計與創意
+> 協作設計工具。色彩鮮活多元，活潑而不失專業。
+
+## 1. 視覺主題與氛圍
+
+Figma 的介面是那個設計了自身的設計工具——一堂排版精妙的大師課，自訂可變字體（figmaSans）在極細（字重 320）與粗體（字重 700）之間無縫切換，並在大多數字體系統從不涉足的中間值（330、340、450、480、540）處設有停駐點。這種細粒度的字重控制為每個文字元素賦予了精確校準的視覺分量，透過微小差異建構層級，而非「一般與粗體」這種粗放工具。
+
+頁面呈現出一種迷人的二元性：介面外殼嚴格遵循黑白配色（字面上僅能偵測到 `#000000` 和 `#ffffff` 兩種顏色），而英雄區和產品展示區則爆發出鮮活的多色漸層——電光綠、亮黃、深紫、熱粉。這種分隔意味著設計系統本身是無色的，將產品的多彩輸出作為核心內容。Figma 的行銷頁面本質上是一面陳列彩色藝術作品的白色畫廊牆。
+
+讓 Figma 與眾不同的，除了可變字體之外，還有它的圓形與膠囊幾何造型。按鈕使用 50px 圓角（膠囊）或 50%（圖示按鈕的完美圓形），營造出一種有機的、工具調色板式的感覺。虛線輪廓聚焦指示器（`dashed 2px`）是一種刻意為之的設計選擇，與 Figma 編輯器中的選取控點相呼應——網站的 UI 語言引用了產品的 UI 語言。
+
+**核心特徵：**
+- 自訂可變字體（figmaSans），具有非尋常的字重停駐點：320、330、340、450、480、540、700
+- 嚴格黑白的介面外殼——顏色僅存在於產品內容中
+- figmaMono 用於大寫技術標籤，搭配寬字母間距
+- 膠囊形（50px）與圓形（50%）按鈕幾何造型
+- 虛線聚焦輪廓，呼應 Figma 編輯器的選取控點
+- 鮮活的多色英雄漸層（綠、黃、紫、粉）
+- OpenType `"kern"` 特性全域啟用
+- 全域負字母間距——即便正文文字也使用 -0.14px 至 -0.26px
+
+## 2. 色彩方案與用途
+
+### 主色
+- **純黑** (`#000000`)：所有文字、所有實色按鈕、所有邊框。介面唯一的「顏色」。
+- **純白** (`#ffffff`)：所有背景、白色按鈕、深色表面上的文字。二元體系的另一半。
+
+*注：Figma 行銷網站的介面層僅使用這兩種顏色。所有鮮亮色彩僅出現在產品截圖、英雄漸層和嵌入內容中。*
+
+### 表面與背景
+- **純白** (`#ffffff`)：主要頁面背景和卡片表面。
+- **玻璃黑** (`rgba(0, 0, 0, 0.08)`)：用於次要圓形按鈕和玻璃效果的微妙深色疊加。
+- **玻璃白** (`rgba(255, 255, 255, 0.16)`)：深色／彩色表面上按鈕的磨砂玻璃疊加。
+
+### 漸層系統
+- **英雄漸層**：由電光綠、亮黃、深紫和熱粉構成的鮮活多停駐點漸層。這個漸層是英雄區的視覺標誌——它代表著工具的創意無限可能。
+- **產品區域漸層**：各產品區域（Design、Dev Mode、Prototyping）在其展示中可能使用獨特的色彩主題。
+
+## 3. 排版規則
+
+### 字體族
+- **主字體**：`figmaSans`，備選字體：`figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **等寬體 / 標籤**：`figmaMono`，備選字體：`figmaMono Fallback, SF Mono, menlo`
+
+### 層級
+
+| 角色 | 字體 | 尺寸 | 字重 | 行高 | 字母間距 | 備注 |
+|------|------|------|--------|-------------|----------------|-------|
+| 展示 / 英雄 | figmaSans | 86px (5.38rem) | 400 | 1.00（緊湊） | -1.72px | 最大衝擊力，極端字距 |
+| 區塊標題 | figmaSans | 64px (4rem) | 400 | 1.10（緊湊） | -0.96px | 功能區塊標題 |
+| 副標題 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 強調區塊文字 |
+| 輕量副標題 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 輕字重區塊文字 |
+| 功能標題 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 粗體卡片標題 |
+| 大號正文 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px 至 -0.14px | 描述、引言 |
+| 正文 / 按鈕 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px 至 normal | 標準正文、導覽、按鈕 |
+| 輕量正文 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px 至 normal | 輕字重正文 |
+| 等寬標籤 | figmaMono | 18px (1.13rem) | 400 | 1.30（緊湊） | 0.54px | 大寫區塊標籤 |
+| 等寬小號 | figmaMono | 12px (0.75rem) | 400 | 1.00（緊湊） | 0.6px | 大寫微型標籤 |
+
+### 原則
+- **可變字體精準性**：figmaSans 使用大多數系統從不觸及的字重——320、330、340、450、480、540。這透過微妙的字重差異而非大幅跳躍來建構層級。330 與 340 之間的差異幾乎無法察覺，卻在結構上意義重大。
+- **輕體為基礎**：大多數正文使用 320–340（比典型的 400「一般」更輕），營造出空靈、通透的閱讀體驗，與設計工具的美學相契合。
+- **處處字距微調**：每個文字元素都啟用 OpenType `"kern"` 特性——字距微調不是可選項，而是結構性的。
+- **預設負字距**：即便正文也使用 -0.1px 至 -0.26px 的字母間距，營造出全域緊湊的文字效果。展示文字進一步壓縮至 -0.96px 和 -1.72px。
+- **等寬字體用於結構**：figmaMono 以大寫形式搭配正字母間距（0.54px–0.6px），創造出技術指示牌標籤。
+
+## 4. 元件樣式
+
+### 按鈕
+
+**黑色實色（膠囊）**
+- 背景：純黑（`#000000`）
+- 文字：純白（`#ffffff`）
+- 圓角：圓形（50%），用於圖示按鈕
+- 聚焦：虛線 2px 輪廓
+- 最強調
+
+**白色膠囊**
+- 背景：純白（`#ffffff`）
+- 文字：純黑（`#000000`）
+- 內距：8px 18px 10px（不對稱垂直）
+- 圓角：膠囊（50px）
+- 聚焦：虛線 2px 輪廓
+- 深色／彩色表面上的標準 CTA
+
+**玻璃深色**
+- 背景：`rgba(0, 0, 0, 0.08)`（微妙深色疊加）
+- 文字：純黑
+- 圓角：圓形（50%）
+- 聚焦：虛線 2px 輪廓
+- 淺色表面上的次要操作
+
+**玻璃淺色**
+- 背景：`rgba(255, 255, 255, 0.16)`（磨砂玻璃）
+- 文字：純白
+- 圓角：圓形（50%）
+- 聚焦：虛線 2px 輪廓
+- 深色／彩色表面上的次要操作
+
+### 卡片與容器
+- 背景：純白
+- 邊框：無或極簡
+- 圓角：6px（小型容器）、8px（圖片、卡片、對話框）
+- 陰影：微妙至中等的層次感效果
+- 產品截圖作為卡片內容
+
+### 導覽
+- 白色背景上的簡潔水平導覽
+- Logo：黑色 Figma 字標
+- 產品標籤：膠囊形（50px）標籤導覽
+- 連結：黑色文字，1px 底線裝飾
+- CTA：黑色膠囊按鈕
+- 懸停：透過 CSS 變數控制文字顏色
+
+### 特色元件
+
+**產品標籤列**
+- 水平膠囊形標籤（50px 圓角）
+- 每個標籤代表 Figma 的一個產品區域（Design、Dev Mode、Prototyping 等）
+- 啟用標籤高亮顯示
+
+**英雄漸層區塊**
+- 全寬鮮活多色漸層背景
+- 帶 86px 展示標題的白色文字疊加
+- 產品截圖懸浮在漸層中
+
+**虛線聚焦指示器**
+- 所有互動元素在聚焦時使用 `dashed 2px` 輪廓
+- 引用 Figma 編輯器中的選取控點
+- 一種將網站與產品相連接的元設計選擇
+
+## 5. 版面原則
+
+### 間距系統
+- 基礎單位：8px
+- 刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px
+
+### 格線與容器
+- 最大容器寬度：最高 1920px
+- 英雄區：全寬漸層，內容置中
+- 產品區：交替展示
+- 頁尾：深色全寬區塊
+- 響應式範圍：559px 至 1920px
+
+### 留白哲學
+- **畫廊式節奏**：充裕的間距讓每個產品區塊如同獨立展品般呼吸。
+- **色彩區塊作為視覺喘息**：漸層英雄區和產品展示區在單色介面區塊之間提供色彩上的緩衝。
+
+### 圓角比例
+- 極小（2px）：小型連結元素
+- 微妙（6px）：小型容器、分隔線
+- 舒適（8px）：卡片、圖片、對話框
+- 膠囊（50px）：標籤按鈕、CTA
+- 圓形（50%）：圖示按鈕、圓形元素
+
+## 6. 深度與層次
+
+| 層級 | 處理方式 | 用途 |
+|-------|-----------|-----|
+| 平坦（層級 0） | 無陰影 | 頁面背景、大多數文字 |
+| 表面（層級 1） | 漸層／深色區塊上的白色卡片 | 卡片、產品展示 |
+| 抬升（層級 2） | 微妙陰影 | 懸浮卡片、懸停狀態 |
+
+**陰影哲學**：Figma 節制地使用陰影。主要的深度機制是**背景對比**（彩色／深色區塊上的白色內容）以及產品截圖本身固有的立體感。
+
+## 7. 應為與不為
+
+### 應為
+- 使用 figmaSans 搭配精準的可變字重（320–540）——細粒度字重控制即是設計本身
+- 保持介面嚴格的黑白配色——顏色僅來自產品內容
+- 對所有互動元素使用膠囊（50px）和圓形（50%）幾何造型
+- 套用虛線 2px 聚焦輪廓——標誌性的無障礙模式
+- 在所有文字上啟用 `"kern"` 特性
+- 將 figmaMono 以大寫形式搭配正字母間距用於標籤
+- 全域套用負字母間距（-0.1px 至 -1.72px）
+
+### 不為
+- 不要新增介面顏色——單色調色盤是絕對的
+- 不要使用標準字重（400、500、600、700）——使用可變字體的獨特停駐點（320、330、340、450、480、540）
+- 不要在按鈕上使用尖銳角落——僅使用膠囊和圓形幾何造型
+- 不要使用實線聚焦輪廓——虛線才是標誌
+- 不要將正文字重提高至 450 以上——輕字重美學是核心
+- 不要在正文使用正字母間距——它始終為負值
+
+## 8. 響應式行為
+
+### 斷點
+| 名稱 | 寬度 | 主要變化 |
+|------|-------|-------------|
+| 小螢幕手機 | <560px | 緊湊版面，堆疊排列 |
+| 平板 | 560–768px | 微調 |
+| 小桌面 | 768–960px | 兩欄版面 |
+| 桌面 | 960–1280px | 標準版面 |
+| 大桌面 | 1280–1440px | 擴展 |
+| 超寬螢幕 | 1440–1920px | 最大寬度 |
+
+### 折疊策略
+- 英雄文字：86px → 64px → 48px
+- 產品標籤：行動裝置水平捲動
+- 功能區塊：堆疊單欄
+- 頁尾：多欄 → 堆疊
+
+## 9. 智能體提示指南
+
+### 快速顏色參考
+- 全部：「純黑（#000000）」與「純白（#ffffff）」
+- 玻璃深色：「rgba(0, 0, 0, 0.08)」
+- 玻璃淺色：「rgba(255, 255, 255, 0.16)」
+
+### 範例元件提示
+- "在鮮活的多色漸層（綠、黃、紫、粉）上建立一個英雄區。標題為 86px figmaSans 字重 400，行高 1.0，字母間距 -1.72px。白色文字。白色膠囊 CTA 按鈕（50px 圓角，8px 18px 內距）。"
+- "設計一個帶膠囊形按鈕的產品標籤列（50px 圓角）。啟用態：黑色背景，白色文字。非啟用態：透明，黑色文字。figmaSans 20px 字重 480。"
+- "建構一個區塊標籤：figmaMono 18px，大寫，字母間距 0.54px，黑色文字。啟用字距微調。"
+- "建立 20px figmaSans 字重 330 的正文，行高 1.40，字母間距 -0.14px。白底純黑文字。"
+
+### 迭代指南
+1. 精確使用可變字體字重停駐點：320、330、340、450、480、540、700
+2. 介面始終黑白——絕不為外殼新增顏色
+3. 虛線聚焦輪廓，不用實線
+4. 正文字母間距始終為負，等寬標籤始終為正
+5. 按鈕／標籤用膠囊（50px），圖示按鈕用圓形（50%）