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

6.9 KiB

Raw Blame History

以 OpenAI 為靈感的設計系統

Category: AI 與大型語言模型以深色藍綠黑為錨點、搭配寬裕留白與編輯感排版的沉靜近無彩系統。

1. 視覺主題與氛圍

OpenAI 的產品介面讀起來像一座為公眾開放的研究室——理性、克制、刻意保持靜謐。頁面背景為純白（#ffffff），疊加帶有微妙藍綠底色的近黑墨色（#0d0d0d），使文字呈現一種偏冷而非過分深沉的質感。這種色彩中性感將模型輸出、程式碼與文章段落推到視覺中心，而非讓周遭的框架搶戲。

系統的標誌性做法是以克制字重使用 Söhne（或其系統替代字型 inter）——內文 400、導覽與標籤 500、強調 600——並搭配 Signifier，一款用於編輯展示的當代襯線字型。多數 AI 品牌偏向未來感，OpenAI 的襯線標題卻賦予產品一種靜謐的文學氣質，彷彿每則公告都是一篇文章。

造型系統統一採用柔和圓角：8px–12px 的圓角半徑，標籤與徽章使用 9999px 圓滑膠囊形，任何地方都不見尖銳稜角。區塊之間以留白而非分隔線做為過渡；若出現邊框，則是 #e5e5e5 的細線，讀起來更像色彩的缺席而非存在。

主要特徵：

純白畫布（#ffffff）搭配深色藍綠黑墨（#0d0d0d）
Söhne / Inter 採用適中字重（400、500、600）——強調克制而非張揚
Signifier 襯線字型用於編輯展示標題
全域柔和 8–12px 圓角；徽章採用 9999px 膠囊形
細線邊框（#e5e5e5）謹慎使用；留白為主要分隔手段
深藍綠單色插圖——標誌符號中不使用漸層
寬裕行高（1.55–1.65），字距趨近於零

2. 色彩調色盤與角色

主色

純白 (#ffffff)：主背景、卡片表面、按鈕背景。
墨黑 (#0d0d0d)：主文字、品牌標誌、主要行動按鈕。
柔黑 (#1a1a1a)：次要標題、非關鍵文字的替代墨色。

介面表面與背景

薄霧 (#fafafa)：區塊分隔背景、頁尾介面。
珍珠 (#f5f5f5)：卡片表面、高架面板。
雲白 (#ececec)：禁用狀態背景、分隔色調。

品牌強調色

OpenAI Teal (#10a37f)：品牌主色、連結、高亮徽章——在近無彩系統中唯一的有彩色。
Teal Deep (#0a7a5e)：品牌色的懸停與按下狀態。
Teal Soft (#e8f5f0)：成功徽章、高亮提示塊的介面色調。

中性色與文字色

石墨 (#3c3c3c)：內文、預設閱讀色。
板岩 (#6e6e6e)：次要文字、說明、後設資料。
灰燼 (#9b9b9b)：第三層文字、預留位置、禁用標籤。
石灰 (#c4c4c4)：裝飾性分隔線、淡色圖示。

語意色與邊框

Border Hairline (#e5e5e5)：標準細線分隔。
Border Soft (#ededed)：白色介面上的卡片外框。
Error (#ef4146)：驗證錯誤、破壞性操作。
Warning (#f5a623)：柔和琥珀色，用於提示狀態。
Info (#2563eb)：資訊連結色調（謹慎使用；藍綠色仍為主角）。

3. 字體排版規則

字型家族

展示 / 編輯：Signifier，後備字型：'Source Serif Pro', Georgia, serif
內文 / 介面：Söhne，後備字型：Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
程式碼 / 等寬：Söhne Mono，後備字型：ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

層次結構

角色	字型	尺寸	字重	行高	字距	備註
Display	Signifier	56px (3.5rem)	400	1.08	-0.02em	編輯英雄區、公告標題
H1	Söhne	40px (2.5rem)	600	1.15	-0.01em	頁面標題
H2	Söhne	28px (1.75rem)	600	1.2	-0.005em	區塊標題
H3	Söhne	20px (1.25rem)	600	1.3	normal	子區塊
Body Large	Söhne	18px (1.125rem)	400	1.6	normal	導言段落
Body	Söhne	16px (1rem)	400	1.65	normal	標準閱讀文字
Body Small	Söhne	14px (0.875rem)	400	1.55	normal	卡片內文、高密度介面
Caption	Söhne	13px (0.8125rem)	500	1.4	0.01em	後設資料、徽章
Label	Söhne	12px (0.75rem)	500	1.3	0.04em	眉標、大寫導覽連結
Code	Söhne Mono	14px (0.875rem)	400	1.55	normal	程式碼區塊、終端機輸出

原則

克制即風格：字重上限為 600；700 以上顯得偏離品牌調性。層次感來自尺寸與顏色，而非字重。
襯線賦予靈魂，無襯線承載系統：Signifier 僅用於編輯展示的特定時刻，產品介面一律使用無襯線字型。
展示字級採用負字距：展示字級使用 -0.02em；16px 起字距回歸至零。

4. 元件樣式

按鈕

主要按鈕

Background: #0d0d0d
Text: #ffffff
Padding: 10px 18px
Radius: 9999px（徽章用全圓膠囊形），矩形行動按鈕用 12px
Hover: #1a1a1a background
用途：主要行動按鈕、「試用 ChatGPT」、「登入」

次要按鈕

Background: #ffffff
Text: #0d0d0d
Border: 1px solid #e5e5e5
Padding: 10px 18px
Radius: 12px
Hover: background #fafafa，border #d4d4d4

品牌強調按鈕

Background: #10a37f
Text: #ffffff
Padding: 10px 18px
Radius: 12px
Hover: #0a7a5e
用途：升級方案的高亮行動按鈕、成功路徑

卡片

Background: #ffffff
Border: 1px solid #ededed
Radius: 16px
Padding: 24px–32px
Shadow: 預設無；懸停時 0 4px 16px rgba(13,13,13,0.06)

輸入框

Background: #ffffff
Border: 1px solid #e5e5e5
Radius: 12px
Padding: 12px 14px
Focus: border #10a37f，ring 0 0 0 3px rgba(16,163,127,0.12)

膠囊標籤

Background: #f5f5f5
Text: #3c3c3c
Padding: 4px 10px
Radius: 9999px
Font: 12px / 500

5. 間距與版面

基礎單位：4px。刻度：4、8、12、16、24、32、48、64、96、128。
容器：最大寬度 1200px，行動裝置 24px 側邊距，桌機 48px。
區塊節奏：主要區塊間垂直間距 96–128px；行動裝置 64px。
格線：桌機 12 欄，行動裝置 4 欄，間距 24px。

6. 動態效果

持續時間：懸停 150–220ms；版面切換 280–360ms。
緩動函數：入場使用 cubic-bezier(0.16, 1, 0.3, 1)（平滑淡出）。
克制原則：不使用視差效果，不劫持滾動。僅採用細膩的淡入與位移。

7. 使用規範

中性編輯克制感、柔和圓角與稀疏強調色三者需整體保留；單獨使用綠色強調色並無法還原 OpenAI 風格的介面質感。
Signifier 風格的展示字型時刻僅限於編輯或公告層級的場景，產品控制元件一律維持在無襯線字型系統中。
避免裝飾性動效、厚重陰影與過大的裝飾卡片；整體系統應呈現沉靜、易讀且深思熟慮的氣質。

6.9 KiB Raw Blame History Unescape Escape