admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5c5272569f6da83591480b88a5f5bc902d2b4866
workbuddy_skills/open-design/design-systems/github/DESIGN-zh-tw.md
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

7.7 KiB
Raw Blame History

受 GitHub 啟發的設計系統

Category: 開發者工具 以程式碼為核心的平台。功能密度高，藍白配色精準，基於 Primer 規範。

1. 視覺主題與氛圍

GitHub 的介面是工程化的，而非裝飾性的。每一個像素都在傳達一種立場：這是一款為在乎 diff、建置和 pull request 的人而生的工具。頁面背景是乾淨的 #ffffff（淺色模式）或 #0d1117（深色模式），內容排布在密集的矩形面板上，面板之間以細線邊框分隔，而非留白。資訊密度即品牌——列表列、程式碼行、儲存庫標題和通知卡片緊密排列，讓有經驗的使用者無需捲動即可瀏覽上百筆內容。

標誌性的強調色是用於連結和主要操作的 Primer 藍 (#0969da)，以及用於合併狀態、成功提示和合併按鈕的 GitHub 綠 (#1a7f37)。與消費品的藍綠色相比，兩者都略顯低調——飽和度足以在密集的灰色文字中清晰可辨，又克制到足以在同一視口中出現多次時不顯突兀。

排版使用覆蓋整個產品的 system-ui 字體堆疊，確保文字在所有作業系統上清晰渲染，搭配 SFMono / Menlo / Consolas 用於程式碼。沒有編輯類展示字體；GitHub 的聲音就是你正在使用的系統本身的聲音。

關鍵特徵：

  • 純白畫布（#ffffff）或深海軍藍黑（#0d1117）——無暖調，無色調傾向
  • 細線灰色邊框（#d0d7de）定義每個面板
  • Primer 藍（#0969da）用於連結/主要操作；GitHub 綠（#1a7f37）用於成功/合併
  • system-ui 用於正文；SFMono 用於程式碼——無自訂字體
  • 內邊距極小的密集列表列；留白稀少
  • 16px / 24px 的 Octicon 圖示——單描邊、幾何形態、風格統一
  • 具有強色彩語義的膠囊狀狀態徽章

2. 色彩調色板與角色

主色

  • Canvas Default（#ffffff）：淺色主題主頁面背景。
  • Canvas Subtle（#f6f8fa）：次級表面、側邊欄、輸入框背景、頂欄區域。
  • Canvas Inset（#eaeef2）：程式碼區塊背景、深內嵌表面。
  • Fg Default（#1f2328）：主文字、標題、正文。
  • Fg Muted（#656d76）：次級文字、說明文字、檔案路徑。

品牌強調色

  • Primer Blue（#0969da）：連結、主要 CTA、焦點圓環基色——通用互動色。
  • Primer Blue Hover（#0550ae）：主藍色的懸停/按下狀態。
  • Accent Subtle（#ddf4ff）：用於標注、資訊橫幅的柔和藍色表面。

語義色

  • Success / Merge Green（#1a7f37）：已合併 PR、成功徽章、合併按鈕。
  • Success Subtle（#dafbe1）：成功狀態的表面色調。
  • Open Green（#1a7f37）：Issue/PR 的「Open」狀態。
  • Closed / Danger Red（#cf222e）：已關閉 PR、破壞性操作、驗證錯誤。
  • Danger Subtle（#ffebe9）：錯誤橫幅表面。
  • Attention / Warning Yellow（#9a6700）：琥珀色表面上的警告文字。
  • Attention Subtle（#fff8c5）：警告橫幅表面。
  • Done Purple（#8250df）：已合併並封存、「done」狀態、進階徽章。
  • Sponsor Pink（#bf3989）：贊助愛心圖示、GitHub Sponsors 品牌色。

邊框與分隔線

  • Border Default（#d0d7de）：標準細線邊框、面板輪廓。
  • Border Muted（#d8dee4）：面板內部分隔線。
  • Border Subtle（#eaeef2）：隱約的表格列分隔線。

深色主題

  • Dark Canvas（#0d1117）：深色頁面背景。
  • Dark Surface（#161b22）：側邊欄、頂欄、次級表面。
  • Dark Border（#30363d）：標準深色模式邊框。
  • Dark Fg（#e6edf3）：深色背景上的主文字。

3. 排版規則

字體系列

  • 正文 / UI：-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
  • 程式碼 / 等寬：ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
  • Emoji："Apple Color Emoji", "Segoe UI Emoji"

層級

角色 字體 字號 字重 行高 字距 備註
Display system-ui 32px (2rem) 600 1.25 -0.01em 儲存庫標題、行銷首屏
H1 system-ui 24px (1.5rem) 600 1.25 normal 頁面標題
H2 system-ui 20px (1.25rem) 600 1.25 normal 區域標題
H3 system-ui 16px (1rem) 600 1.25 normal 子區域、面板標題
Body system-ui 14px (0.875rem) 400 1.5 normal 預設文字尺寸——非 16px
Body Small system-ui 12px (0.75rem) 400 1.4 normal 說明文字、檔案中繼資料
Code SFMono 12px (0.75rem) 400 1.45 normal 程式碼區塊、diff
Code Inline SFMono 0.85em 400 inherit normal 行內 code 段

原則

  • 正文 14px，非 16px：GitHub 的文字密度是其標識。產品以 14px 閱讀，以便在視口中容納更多列。
  • 字重二元化：預設全部 400；標題和強調用 600。無 500，無 700。
  • 始終使用系統字體：絕不為介面載入網路字體——文字必須在慢速網路下即時渲染。

4. 元件樣式

按鈕

主要按鈕（綠色）

  • Background: #1f883d
  • Text: #ffffff
  • Border: 1px solid rgba(31, 35, 40, 0.15)
  • Padding: 5px 16px
  • Radius: 6px
  • Shadow: 0 1px 0 rgba(31,35,40,0.1)
  • Hover: background #1a7f37
  • 用途：「Create repository」、「Merge pull request」

預設按鈕

  • Background: #f6f8fa
  • Text: #1f2328
  • Border: 1px solid #d0d7de
  • Padding: 5px 16px
  • Radius: 6px
  • Hover: background #f3f4f6，border #d0d7de

輪廓按鈕（藍色連結風格）

  • Background: #ffffff
  • Text: #0969da
  • Border: 1px solid #d0d7de
  • Hover: background #0969da，text #ffffff

危險按鈕

  • Background: #ffffff
  • Text: #cf222e
  • Border: 1px solid #d0d7de
  • Hover: background #a40e26，text #ffffff，border #a40e26

卡片 / 方塊

  • Background: #ffffff
  • Border: 1px solid #d0d7de
  • Radius: 6px
  • Padding: 16px（標題）+ 16px（正文）
  • 標題區有 #f6f8fa 底色帶下邊框。

輸入框

  • Background: #ffffff
  • Border: 1px solid #d0d7de
  • Radius: 6px
  • Padding: 5px 12px
  • Focus: border #0969da，ring 0 0 0 3px rgba(9,105,218,0.3)

狀態徽章（Issue / PR）

  • Open：background #1a7f37，文字白色，padding 4px 10px，radius 9999px。
  • Closed：background #cf222e，文字白色。
  • Merged：background #8250df，文字白色。
  • Draft：background #6e7781，文字白色。

標籤（Issue/PR 上的標籤）

  • Padding: 0 7px
  • Radius: 9999px
  • Font: 12px / 500
  • 背景色和文字顏色由程式計算（標籤顏色→文字顏色按對比度計算）。

5. 間距與佈局

  • 基礎單位：4px。間距比例：4, 8, 12, 16, 24, 32, 40, 48。
  • 頁面最大寬度：1280px（Container-xl）。
  • 側邊欄：桌面端 296px，低於 1012px 時折疊。
  • 列內邊距：水平 16px，垂直 12px（列表天生密集）。

6. 動效

  • 時長：懸停 80ms；選單/彈出層展開 200ms。
  • 緩動：展開用 ease-out，關閉用 ease-in。
  • 刻意迴避：頁面載入動畫、視差效果、持續的微互動。元素直接出現，不表演。

7. 使用護欄

  • 密集列表、帶邊框的方塊和系統字體需搭配使用；單獨使用綠色按鈕不足以營造 GitHub 風格的產品介面。
  • 綠色用於建設性儲存庫操作，藍色用於連結和焦點，紅色/紫色/灰色僅用於 Issue、PR 和工作流狀態。
  • 優先選擇低調的介面裝飾、明確的邊框和緊湊的間距，而非裝飾性陰影或大型行銷風格卡片。
Reference in new issue View Git Blame Copy Permalink