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。
7.0 KiB
7.0 KiB
受 Duolingo 啟發的設計系統
Category: 效率與 SaaS 語言學習平台。明亮的貓頭鷹綠、粗厚陰影、遊戲化的愉悅感。
1. 視覺主題與氛圍
Duolingo 是以視覺語言呈現的遊戲化設計。介面毫無保留地鮮亮，以貓頭鷹綠（#58cc02）為品牌主色，每個可互動元素底部都有粗厚的 4px 陰影，看起來像一個等待被按下的 3D 按鈕。頁面背景為白色（#ffffff），邊框為 2–3px 深灰色（#e5e5e5），整體系統讀起來就像一款 2015 年 iOS 應用以更好的層級感重生。
排版使用 Feather Bold（一種自訂圓角無襯線字體）用於介面框架，Mona Sans（或 Inter）用於正文。展示尺寸大而自信——Duolingo 從不低語。標題通常帶有綠色下劃線筆觸或置於綠色膠囊上，吉祥物 Duo（一隻綠色貓頭鷹）以活躍的插畫角色出現，而非靜態 logo。
形狀語言友好親切：卡片圓角 16–20px，按鈕 12px，標籤與進度條 9999px。圖示系統為填充、圓角風格，並按技能進行色彩編碼——每個課程介面都有一對一眼就能辨識的配色。
關鍵特徵：
- 貓頭鷹綠（
#58cc02）作為主導品牌色，在介面中佔據 30% 以上的面積 - 每個按鈕底部有粗厚 4px 陰影（「觸覺按壓」可供性）
- 2–3px 實線邊框，從不使用細線
- Feather Bold（圓角展示字體）+ Mona Sans（正文）
- 大而自信的文字——展示尺寸從 48px 起步並向上攀升
- 吉祥物即角色：Duo 貓頭鷹出現在引導、錯誤、連擊等場景中
- 連擊橙（
#ff9600）和寶石粉（#ce82ff）作為次級品牌色
2. 色彩方案與角色
主色
- 貓頭鷹綠（
#58cc02）：品牌主色、主要行動按鈕、正確答案。 - 深貓頭鷹綠（
#58a700）：綠色按鈕的按壓/陰影色。 - 淺貓頭鷹綠（
#89e219）：懸停狀態、柔和填充。 - 淡貓頭鷹綠（
#dbf8c5）：柔和表面、成功橫幅。
次級強調色
- 連擊橙（
#ff9600）：連擊計數器、火焰圖示、付費能量。 - 深連擊橙（
#cc7a00）：橙色按壓狀態。 - 寶石粉（
#ce82ff）：寶石貨幣、Super Duolingo。 - 鰻魚藍（
#1cb0f6）：提示按鈕、資訊連結。 - 紅衣主教紅（
#ff4b4b）：答錯、失去生命。 - 蜜蜂黃（
#ffc800）：專業徽章、成就。
表面色
- 雪白（
#ffffff）：主背景。 - 鰻魚灰（
#f7f7f7）：區塊分隔、次級表面。 - 天鵝灰（
#e5e5e5）：停用背景、內嵌塊。 - 狼灰（
#777777）：深色分隔線、次要文字。
墨色與文字
- 鰻魚黑（
#3c3c3c）：主要文字。 - 狼灰（
#777777）：次要文字、說明文字。 - 野兔灰（
#afafaf）：停用、佔位符。
邊框
- 天鵝灰（
#e5e5e5）：標準 2px 邊框。 - 野兔灰（
#afafaf）：懸停時的強調邊框。
3. 排版規則
字體家族
- 展示 / UI / 標題：
Feather Bold，備用字體：'DIN Round Pro', 'Helvetica Neue', sans-serif - 正文 / 長文：
Mona Sans，備用字體：'Helvetica Neue', system-ui, sans-serif - 程式碼（少用，學校/管理場景）：
JetBrains Mono，備用字體：ui-monospace, Menlo, monospace
層級
| 角色 | 字體 | 尺寸 | 字重 | 行高 | 字間距 | 備註 |
|---|---|---|---|---|---|---|
| 展示 | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | 引導主視覺 |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | 頁面標題 |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | 版塊標題 |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | 卡片標題、課程列 |
| 大正文 | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | 課程提示、說明 |
| 正文 | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | 標準文段 |
| 說明文字 | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | 經驗值計數、元資料 |
| 按鈕 | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | 標準按鈕標籤 |
| 連擊 | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | 連擊數字、火焰上 |
原則
- 800 是預設值：Feather Bold 在標題和按鈕中以 800 字重運行。在此系統中，700 看起來偏弱。
- 大字號：標題尺寸比典型產品品牌大 25–40%——自信即身份。
- 圓潤字形：每個字形都有柔和末端；鋒利襯線會破壞親和感契約。
4. 元件樣式
按鈕
主要按鈕（貓頭鷹綠）
- 背景：
#58cc02 - 文字：
#ffffff - 內邊距：14px 24px
- 圓角：16px
- 底部邊框：4px solid
#58a700（粗厚陰影） - 懸停：背景
#89e219 - 激活：向下位移 4px，底部邊框 0（按鈕「按下」）
- 用途：「繼續」、「檢查」、主要行動。
次要按鈕（白色帶底部陰影）
- 背景：
#ffffff - 文字：
#777777 - 邊框：2px solid
#e5e5e5 - 底部邊框：4px solid
#e5e5e5 - 圓角：16px
- 內邊距：14px 24px
- 懸停：文字
#3c3c3c，邊框#afafaf
連擊橙按鈕
- 背景：
#ff9600 - 文字：
#ffffff - 底部邊框：4px solid
#cc7a00 - 用途：連擊目標、「開始連擊」
錯誤按鈕（紅衣主教紅）
- 背景：
#ff4b4b - 文字：
#ffffff - 底部邊框：4px solid
#cc3b3b - 用途：答錯回饋。
卡片 / 課程格
- 背景：
#ffffff - 邊框：2px solid
#e5e5e5 - 底部邊框：4px solid
#e5e5e5 - 圓角：16px
- 內邊距：16px
- 懸停：上浮 2px，陰影
0 4px 0 #d7d7d7
技能樹節點（課程氣泡）
- 尺寸：80×72px
- 背景：技能色調（激活為綠色，鎖定為灰色）
- 底部邊框：6px solid 深色變體
- 圓角：50%（圓形）
- 激活：每 1.6s 在 1.0 → 1.05 之間脈衝
輸入框
- 背景：
#ffffff - 邊框：2px solid
#e5e5e5 - 圓角：12px
- 內邊距：12px 16px
- 聚焦：邊框
#1cb0f6（鰻魚藍），光暈0 0 0 3px rgba(28, 176, 246, 0.2)
進度條
- 軌道：
#e5e5e5 - 填充：
#58cc02（或連擊時使用#ff9600） - 圓角：9999px
- 高度：16px
- 動畫填充：遞增時 320ms ease-out。
5. 間距與版面
- 基礎單位：4px。比例：4, 8, 12, 16, 24, 32, 48, 64。
- 容器：最大 1080px，24px 邊距。
- 課程樹欄：寬 320px；在桌面端置中。
6. 動效
- 時長：按鈕按壓 180ms；技能節點解鎖 320ms；激活節點脈衝 1.6s。
- 緩動：
cubic-bezier(0.34, 1.56, 0.64, 1)（回彈緩出，輕微過衝）用於解鎖動效。 - 吉祥物：Duo 每 4–6s 眨眼，在連擊里程碑時跳躍（480ms ease-out 彈簧）。
7. 使用守則
- 保持高飽和度貓頭鷹綠、粗厚底部陰影和圓潤課程幾何形狀的組合；單獨使用扁平綠色按鈕並不能讀出 Duolingo 的感覺。
- 將超大粗體文字保留用於課程、連擊和進度等需要鼓勵或回饋的產品時刻。
- 將趣味動效克制地用在進度狀態變化周圍，避免在每個控件上都使用通用的彈跳動畫。