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。
224 lines
11 KiB
Markdown
224 lines
11 KiB
Markdown
# 靈感源自 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%）
|