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

11 KiB

Raw Blame History

靈感源自 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。白底純黑文字。"

迭代指南

精確使用可變字體字重停駐點：320、330、340、450、480、540、700
介面始終黑白——絕不為外殼新增顏色
虛線聚焦輪廓，不用實線
正文字母間距始終為負，等寬標籤始終為正
按鈕／標籤用膠囊（50px），圖示按鈕用圓形（50%）

11 KiB Raw Blame History Unescape Escape