在 OpenDesign 中復刻 GitHub 風格的工程化設計系統：Primer 色彩、14px 資訊密度與 tokens.css 實作剖析

AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本文以 OpenDesign 倉庫內 design-systems/github/DESIGN-zh-tw.md 設計規範為核心骨架結合 tokens.css、components.html 與 token 合約報表等配套檔案完整拆解「GitHub 風格」的工程化視覺語言——從色彩、排版、元件到使用護欄並說明如何在 Agent 生成前端 Artifact 時直接落地套用。GitHub 的介面不是「好看的介面」而是「工程化的介面」純白或深海軍藍黑畫布、髮絲級細線邊框、以 Primer 藍為主導的互動色彩、14px 的正文密度每一個像素都在服務「為在乎 diff、build 和 pull request 的人而生的工具」這一定位。本文將這套規範還原為可直接複製的 CSS 變數Design Token與元件配方讓開發者工具、程式碼託管平台、CI/CD 儀表板等產品介面在 OpenDesign 中一次到位。1. 視覺主題與氛圍密度即品牌GitHub 風格的第一原則是資訊密度即品牌。頁面背景是乾淨的#ffffff淺色模式或#0d1117深色模式內容排布在密集的矩形面板上面板之間以細線邊框#d0d7de分隔而非依賴留白。列表列、程式碼行、儲存庫標題和通知卡片緊密排列讓有經驗的使用者無需捲動即可瀏覽上百筆內容——這種「用結構線而非空白來分區」的手法正是與消費級產品最大的分野。關鍵特徵原文規範純白畫布#ffffff或深海軍藍黑#0d1117——無暖調、無色調傾向細線灰色邊框#d0d7de定義每個面板Primer 藍#0969da用於連結主要操作GitHub 綠#1a7f37用於成功合併system-ui 用於正文SFMono 用於程式碼——無自訂字體內邊距極小的密集列表列留白稀少16px24px 的 Octicon 圖示——單描邊、幾何形態、風格統一具有強色彩語義的膠囊狀狀態徽章這七條特徵在倉庫的 tokens.css 開頭註解中被濃縮為「品牌三句話」純白畫布與canvas-subtle次級表面全站 system-ui、14px 正文Primer 藍僅用於互動表徵、GitHub 綠僅保留給成功合併狀態。兩份文件互相印證構成整個系統的設計憲法。2. 色彩調色板與角色GitHub 風格的色彩系統刻意「低調」飽和度足以在密集的灰色文字中清晰可辨又克制到在同一視口中多次出現時不顯突兀。規範將其分為四層角色。2.1 主色Canvas / ForegroundToken色值角色Canvas Default#ffffff淺色主題主頁面背景Canvas Subtle#f6f8fa次級表面、側邊欄、輸入框背景、頂欄區域Canvas Inset#eaeef2程式碼區塊背景、深內嵌表面Fg Default#1f2328主文字、標題、正文Fg Muted#656d76次級文字、說明文字、檔案路徑對應到 tokens.css這組角色被綁定為--bg: #ffffff、--surface: #f6f8fa、--fg: #1f2328、--muted: #656d76。值得注意的是Primer 沒有「暖色階」因此規範中的--surface-warm直接別名為var(--surface)而--fg-2、--meta也與主墨色次要色同值——這是為了維持跨品牌切換時 TOKEN_SCHEMA 命名穩定所做出的刻意設計見 USAGE.md。2.2 品牌強調色Primer Blue#0969da連結、主要 CTA、焦點圓環基色——通用互動色綁定為--accentPrimer Blue Hover#0550ae主藍色的懸停按下狀態綁定為--accent-hoverAccent Subtle#ddf4ff用於標注、資訊橫幅的柔和藍色表面在 tokens.css 中--accent-active使用了現代 CSS 的color-mix(in oklab, var(--accent), black 14%)動態計算按下態避免再維護一個手寫色值。2.3 語義色狀態色值用途Success / Merge Green#1a7f37已合併 PR、成功徽章、合併按鈕Success Subtle#dafbe1成功狀態的表面色調Open Green#1a7f37IssuePR 的「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 品牌色tokens.css 收斂出三個核心語義變數--success: #1a7f37、--warn: #9a6700、--danger: #cf222e供元件層直接取用。2.4 邊框與深色主題邊框是 GitHub 風格的「結構骨架」Border Default#d0d7de為標準細線邊框、Border Muted#d8dee4為面板內部分隔線、Border Subtle#eaeef2為隱約的表格列分隔線對應--border與--border-soft兩個變數。深色主題則整體平移Dark Canvas#0d1117、Dark Surface#161b22、Dark Border#30363d、Dark Fg#e6edf3維持與淺色模式完全一致的層級語義。3. 排版規則system-ui 與 14px 正文GitHub 的排版哲學是「你正在使用的系統本身的聲音」——不載入任何網路字體讓文字在慢速網路下即時渲染並在所有作業系統上清晰一致。3.1 字體系列/* 正文 / UI */ --font-display: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; /* 程式碼 / 等寬 */ --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;3.2 層級Type Scale角色字體字號字重行高字距備註Displaysystem-ui32px (2rem)6001.25-0.01em儲存庫標題、行銷首屏H1system-ui24px (1.5rem)6001.25normal頁面標題H2system-ui20px (1.25rem)6001.25normal區域標題H3system-ui16px (1rem)6001.25normal子區域、面板標題Bodysystem-ui14px (0.875rem)4001.5normal預設文字尺寸——非 16pxBody Smallsystem-ui12px (0.75rem)4001.4normal說明文字、檔案中繼資料CodeSFMono12px (0.75rem)4001.45normal程式碼區塊、diffCode InlineSFMono0.85em400inheritnormal行內code段3.3 三條鐵律正文 14px非 16pxGitHub 的文字密度是其標識產品以 14px 閱讀以便在視口中容納更多列。字重二元化預設全部 400標題和強調用 600。無 500、無 700例外主要按鈕與狀態徽章內文字在 components.html 中使用 500 以提升可讀性屬於元件內部的刻意偏離。始終使用系統字體絕不為介面載入網路字體。在 tokens.css 中這套階梯被完整數位化為--text-xs12px到--text-4xl32px七級加上--leading-body: 1.5、--leading-tight: 1.25、--tracking-display: -0.01em僅 Display 級使用負字距。4. 元件樣式按鈕、卡片、輸入框與狀態徽章components.html 是這套規範的可執行樣本44 個選擇器、21 個 class、9 個色彩表達式與 22 個像素值全部來自 tokens.css無任何「脫離 token 的裸色值」該檔案的 components.manifest.json 對undeclaredReferenced的檢查結果為空。4.1 按鈕四態主要按鈕綠色——用於「Create repository」、「Merge pull request」.btn-primary { background: #1f883d; /* 預設綠比成功綠更亮一階 */ color: #ffffff; border: 1px solid rgba(31, 35, 40, 0.15); padding: 5px 16px; border-radius: 6px; box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1); font-weight: 500; } .btn-primary:hover { background: var(--success); } /* #1a7f37 */預設按鈕.btn-default { background: #f6f8fa; /* canvas-subtle */ color: #1f2328; border: 1px solid #d0d7de; } .btn-default:hover { background: #f3f4f6; }輪廓按鈕藍色連結風格——懸停時反轉為實心藍.btn-outline { background: #ffffff; color: #0969da; border: 1px solid #d0d7de; } .btn-outline:hover { background: var(--accent); color: #ffffff; }危險按鈕——懸停時反轉為實心紅.btn-danger { background: #ffffff; color: #cf222e; border: 1px solid #d0d7de; } .btn-danger:hover { background: #a40e26; color: #ffffff; border-color: #a40e26; }所有按鈕共享.btn基底display: inline-flex、gap: var(--space-2)、6px 圓角、--text-sm14px、過渡使用--motion-fast80ms--ease-standard並以:focus-visible顯示--focus-ring0 0 0 3px rgba(9,105,218,0.3)確保鍵盤可達性。4.2 卡片方塊Box.box { border: 1px solid #d0d7de; border-radius: 6px; overflow: hidden; } .box-header { background: #f6f8fa; border-bottom: 1px solid #d0d7de; padding: 12px 16px; font-weight: 600; font-size: 14px; } .box-body { padding: 16px; }標題區以#f6f8fa底色加下邊框與正文區形成層級——這是 GitHub 面板如 PR 清單、Repository 卡片的標準結構。4.3 輸入框.field input { background: #ffffff; color: #1f2328; border: 1px solid #d0d7de; border-radius: 6px; padding: 5px 12px; font-size: 14px; outline: none; } .field input:focus { border-color: var(--accent); /* #0969da */ box-shadow: var(--focus-ring); /* 0 0 0 3px rgba(9,105,218,0.3) */ } .field label { font-size: 14px; font-weight: 600; }Label 使用 600 字重、輸入框 5px 12px 內邊距與 6px 圓角焦點以「藍邊3px 半透明藍環」雙重提示。4.4 狀態徽章Issue / PR狀態背景文字Open#1a7f37白色padding 4px 10pxradius 9999pxClosed#cf222e白色Merged#8250df白色Draft#6e7781白色.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; color: white; line-height: 1; }4.5 標籤LabelPadding: 0 7pxRadius: 9999pxFont: 12px500背景色與文字顏色由程式計算——依據標籤顏色與文字顏色的對比度動態決定文字用黑或白以保證可讀性。5. 間距與佈局基礎單位4px。間距比例4, 8, 12, 16, 24, 32, 40, 48頁面最大寬度1280pxContainer-xl對應--container-max側邊欄桌面端 296px低於 1012px 時折疊列內邊距水平 16px垂直 12px列表天生密集tokens.css 將間距階梯綁定為--space-1至--space-12並補充行銷頁的區段節奏桌面 64px、平板 48px、手機 32px--section-y-*以及容器水槽 24px16px16px。在 components.html 中hero-grid與features-grid展示了典型應用hero 使用1.2fr 1fr兩欄、--space-8間距features 使用三欄等寬並在 1023px639px 兩級斷點逐級降欄。6. 動效少即是多時長懸停 80ms--motion-fast選單彈出層展開 200ms--motion-base緩動展開用ease-out--ease-standard關閉用ease-in刻意迴避頁面載入動畫、視差效果、持續的微互動——元素直接出現不表演動效僅服務於「狀態回饋」按鈕與輸入框的過渡統一為 80ms 的顏色變化幾乎不可察覺卻足以讓使用者感知回應。7. 使用護欄Do Avoid規範以「護欄」形式約束組合方式防止拼湊出「貌似 GitHub、實則四不像」的介面密集列表、帶邊框的方塊和系統字體需搭配使用單獨使用綠色按鈕不足以營造 GitHub 風格的產品介面。綠色用於建設性儲存庫操作藍色用於連結和焦點紅色紫色灰色僅用於 Issue、PR 和工作流狀態。優先選擇低調的介面裝飾、明確的邊框和緊湊的間距而非裝飾性陰影或大型行銷風格卡片。USAGE.md 進一步補充了 Agent 與審查者的操作紀律禁止在:roottoken 區塊之外使用裸十六進位色值不得繞過tokens.css單獨重新定義 Tailwind 或設計 token 數值新增元件配方必須能在components.html或DESIGN.md中找到依據。8. 在 OpenDesign 中的落地流程此設計系統套件遵循 OpenDesign「Design System 2.0」的統一結構見 manifest.json建議按以下順序使用先讀 USAGE.md理解套件合約再讀本規範理解視覺意圖與反模式。將 tokens.css 貼入第一個 Artifact 的style區塊再開始撰寫元件 CSS——所有可見值必須來自 token。查閱 components.manifest.json取得精簡的元件盤點buttons、inputs、badges、links、icons、typography、layout 七個群組其中 cards、keyboard 未覆蓋需要精確選擇器或狀態時再開 components.html。視覺檢查使用 preview/colors.html、preview/typography.html、preview/spacing.html 三頁。8.1 Token 合約與品質評分design-tokens.json 是從tokens.css自動生成並由 source/token-contract.report.json 背書的合約檔案共56 個 token宣告 56、源背書 56其中 26 個屬 A1-identity品牌身份層、18 個屬 A1-structure結構層、4 個屬 B-slot槽位層、26 個屬 A2衍生層合約評分100excellentrecommendRebuild: false每個 token 都帶sources欄位精確指向 tokens.css 的宣告行號例如--bg→tokens.css:30形成「規範 → 樣式表 → 合約報表」的完整可追溯鏈8.2 對接 Tailwind v4tailwind-v4.css 是派生產物透過theme區塊把全部 token 映射為 Tailwind 的--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*命名空間讓開發者直接用bg-surface、text-muted、text-base、rounded-sm、shadow-focus-ring等工具類別組合介面。檔案頭註解明確要求tokens.css是唯一事實來源此檔與design-tokens.json均應由報告與樣式表重新生成不得手動編輯。8.3 來源邊界說明依 source/evidence.md此套件是基於 OpenDesign 策展的捆綁樣本bundled fixture回填而成不主張對上游品牌倉庫或網站進行過全新爬取。引用或對外說明時請勿聲稱其為原始上游來源的直接證據。9. 實戰檢查清單完成 GitHub 風格介面後可依下列清單自檢背景是否為#ffffff#0d1117次級表面是否為#f6f8fa#161b22所有面板是否都有 1px#d0d7de細線邊框而非依賴陰影正文是否為 14px system-ui程式碼是否為 SFMono 堆疊連結與主要互動是否使用#0969da成功合併是否獨佔#1a7f37狀態色彩是否僅出現在 IssuePR工作流語境紅Closed、紫Merged、灰Draft按鈕輸入框是否統一 6px 圓角、80ms 過渡、3px 藍色焦點環是否存在:root區塊外的裸色值或 16px 正文以上每一項都可以在本文引用的規範、token 樣式表與元件樣本中找到對應依據確保「GitHub 風格」不是停留在視覺印象而是可審查、可複用、可跨品牌切換的工程化設計資產。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐打造遊戲化設計系統OpenDesign 中受 Duolingo 啟發的設計系統DESIGN-zh-tw完整實戰指南打造遊戲化設計系統OpenDesign 中受 Duolingo 啟發的設計系統DESIGN zh tw完整實戰指南 本文以 design systems/AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 的 Notion 設計系統實戰指南溫暖極簡主義的完整 Token 化解析OpenDesign 的 Notion 設計系統實戰指南溫暖極簡主義的完整 Token 化解析 本文以 OpenDesign 倉庫中 design systeAI 应用人工智能AI 技能设计系统媒体生成open-design 的 Figma 設計系統深度指南黑白介面外殼、figmaSans 可變字重與膠囊幾何的完整實作open design 的 Figma 設計系統深度指南黑白介面外殼、figmaSans 可變字重與膠囊幾何的完整實作 本篇指南以 open design 仓AI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考