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。
147 lines
6.9 KiB
Markdown
147 lines
6.9 KiB
Markdown
# 以 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 風格的展示字型時刻僅限於編輯或公告層級的場景，產品控制元件一律維持在無襯線字型系統中。
|
||
- 避免裝飾性動效、厚重陰影與過大的裝飾卡片；整體系統應呈現沉靜、易讀且深思熟慮的氣質。
|