企业官网建设流程全解析

打造遊戲化設計系統：OpenDesign 中受 Duolingo 啟發的設計系統（DESIGN-zh-tw）完整實戰指南

【免费下载链接】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

本文以design-systems/duolingo/DESIGN-zh-tw.md為核心骨架，結合 OpenDesign 設計系統目錄中 Duolingo 套件的tokens.css、components.html、design-tokens.json、tailwind-v4.css等原始碼實作，完整拆解「受 Duolingo 啟發的設計系統」的視覺語言、色彩角色、排版階層、元件樣式與動效規範，並說明如何在 OpenDesign 中將這套「貓頭鷹綠 × 粗厚陰影 × 遊戲化愉悅感」的品牌語言落地成可複用的設計 Token 與元件組。

本指南適合希望在 OpenDesign 專案中重現「效率與 SaaS」類別下高辨識度遊戲化介面的設計師與 Agent。讀完你將掌握：Duolingo 風格的核心視覺配方（主色佔比、4px 觸覺陰影、粗邊框）、完整色彩角色表、Feather Bold × Mona Sans 的字體階層、按鈕/卡片/輸入框/進度條的元件規格，以及這套規則如何對應到套件中的tokens.cssToken 綁定、元件清單與 Token 契約報告，可直接套用於 Agent 生成的第一版 artifact。

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）作為次級品牌色

原始碼對照：Token 如何編碼「品牌決策」

這套視覺配方並非只存在於文字描述中，tokens.css 的開頭註解明確列出了套件編碼的核心品牌決策：貓頭鷹綠為主導品牌色與主要 CTA、純白畫布永不染色、--elev-raised對應 4px 粗厚偏移陰影、Feather Bold + Mona Sans 字體配對、展示字級從 56px 起步、藥丸與圓角半徑家族、回彈緩動曲線，以及鰻魚藍焦點環。也就是說，這份 Token 檔案就是「視覺主題」的機器可讀化身，Agent 在生成介面時直接引用這些變數，即可保證視覺決策的一致性。

2. 色彩方案與角色

主色

• 貓頭鷹綠（#58cc02）：品牌主色、主要行動按鈕、正確答案。
• 深貓頭鷹綠（#58a700）：綠色按鈕的按壓/陰影色。
• 淺貓頭鷹綠（#89e219）：懸停狀態、柔和填充。
• 淡貓頭鷹綠（#dbf8c5）：柔和表面、成功橫幅。

次級強調色

• 連擊橙（#ff9600）：連擊計數器、火焰圖示、付費能量。
• 深連擊橙（#cc7a00）：橙色按壓狀態。
• 寶石粉（#ce82ff）：寶石貨幣、Super Duolingo。
• 鰻魚藍（#1cb0f6）：提示按鈕、資訊連結。
• 紅衣主教紅（#ff4b4b）：答錯、失去生命。
• 蜜蜂黃（#ffc800）：專業徽章、成就。

表面色

• 雪白（#ffffff）：主背景。
• 鰻魚灰（#f7f7f7）：區塊分隔、次級表面。
• 天鵝灰（#e5e5e5）：停用背景、內嵌塊。
• 狼灰（#777777）：深色分隔線、次要文字。

墨色與文字

• 鰻魚黑（#3c3c3c）：主要文字。
• 狼灰（#777777）：次要文字、說明文字。
• 野兔灰（#afafaf）：停用、佔位符。

邊框

• 天鵝灰（#e5e5e5）：標準 2px 邊框。
• 野兔灰（#afafaf）：懸停時的強調邊框。

原始碼對照：Token 綁定與語義層

在 tokens.css 中，這些色彩被綁定為結構化 Token，並按語義分組註解：

• 表面（Surface）：--bg: #ffffff（雪白畫布，永不染色）、--surface: #f7f7f7（鰻魚灰，區塊分隔）、--surface-warm為var(--surface)的別名（此色板沒有第三層暖色表面）。
• 前景（Foreground）：--fg: #3c3c3c（鰻魚黑）、--muted: #777777（狼灰）、--meta: #afafaf（野兔灰），形成三層文字階層，每一層都保有兒童可讀的對比度。
• 強調（Accent）：--accent: #58cc02、--accent-on: #ffffff、--accent-hover: #89e219、--accent-active: #58a700——懸停與按壓狀態直接對應「淺/深貓頭鷹綠」。
• 語義（Semantic）：--success就是貓頭鷹綠（「正確答案」與品牌同色）、--warn: #ffc800（蜜蜂黃）、--danger: #ff4b4b（紅衣主教紅）。

值得一提的設計決策：「正確」的語義色與品牌主色完全一致——在 Duolingo 的系統中，正確答案與主要 CTA 是同一種可供性。此外，design-tokens.json 顯示該套件共 56 個 Token，其中 26 個標記為A1-identity（品牌身分層）、18 個為A1-structure（結構層）、4 個為B-slot（槽位層）、26 個為A2（元件層），整體評分 100、等級excellent，代表 Token 契約完整且無需重建。

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

層級

原則

• 800 是預設值：Feather Bold 在標題和按鈕中以 800 字重運行。在此系統中，700 看起來偏弱。
• 大字號：標題尺寸比典型產品品牌大 25–40%——自信即身份。
• 圓潤字形：每個字形都有柔和末端；鋒利襯線會破壞親和感契約。

原始碼對照：字級階梯與 CSS 實作

tokens.css 將字級階梯綁定為--text-xs（12px）到--text-4xl（56px）共 8 級，並額外提供--text-3xl: 40px（次展示層，用於行銷眉題）與--leading-body: 1.5、--leading-tight: 1.15、--tracking-display: -0.01em（約等於 56px 時的 -0.56px）。註解特別強調：展示字級比典型產品品牌大 25–40%，且階梯傾向整數像素尺寸。

在 components.html 的實際 CSS 中可以看到落地方式：h1使用--text-4xl搭配letter-spacing: var(--tracking-display)與line-height: 1.05；h2為--text-2xl搭配-0.005em；h3為--text-lg、字重 700、行高 1.25。h1, h2, h3統一使用--font-display與字重 800（h3例外為 700），完全對應「800 是預設值」的原則。

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。

原始碼對照：元件的 Token 引用與元件清單

這些元件在 components.html 中有完整對應的 CSS 實作，且全部基於 Token 變數：

• 按鈕：.btn基底使用--font-display、字重 800、text-transform: uppercase、letter-spacing: 0.04em，過渡動畫綁定--motion-fast與--ease-standard。.btn-primary以box-shadow: 0 4px 0 var(--accent-active)實現「4px 粗厚底部陰影」；:active時transform: translateY(4px)且陰影歸零——這就是「按鈕被按下」的機制。次要按鈕.btn-secondary以2px solid var(--border)邊框搭配同色底部陰影。套件還提供了原文件未詳列但屬於同一體系的.btn-streak（蜜蜂黃連擊按鈕），使用color-mix(in oklab, var(--warn), black 18%)計算按壓陰影色。
• 卡片：.card使用var(--elev-raised)（0 4px 0 #d7d7d7）作為觸覺陰影，懸停時translateY(-2px)且陰影加深為0 6px 0 #d7d7d7。卡片圖示.card-icon為 56px 藥丸形，按技能色編碼為.card-icon-green/.card-icon-red/.card-icon-yellow。
• 輸入框：.field input使用--radius-sm（12px）、2px solid var(--border)邊框，:focus-visible時邊框轉為var(--accent)並套用--focus-ring（0 0 0 3px rgba(28, 176, 246, 0.2)）。
• 進度條：.progress軌道為var(--border)、高度 16px、圓角--radius-pill，填充色var(--accent)並以inset 0 -4px 0 var(--accent-active)做出內凹的粗厚下緣。
• 其他：.badge（藥丸徽章）、.mascot-card（吉祥物面板，SVG 帶drop-shadow）、kbd（鍵盤提示，使用--font-mono）都是套件內實作好的元件。

components.manifest.json 提供了機器可讀的元件清單：共 66 個選擇器、36 個 class、26 個元素，並按 9 個群組（按鈕、輸入、卡片、徽章、連結、鍵盤、圖示、排版、版面）整理，每個群組都列出了其引用的 Token。例如「buttons」群組引用--accent、--accent-active、--ease-standard、--motion-fast、--radius-md、--text-base等 13 個 Token。在動手設計新控件前，應先查閱此清單是否已有對應元件組，避免重複發明。

5. 間距與版面

• 基礎單位：4px。比例：4, 8, 12, 16, 24, 32, 48, 64。
• 容器：最大 1080px，24px 邊距。
• 課程樹欄：寬 320px；在桌面端置中。

原始碼對照：間距尺度與響應式容器

tokens.css 將間距綁定為--space-1（4px）至--space-12（48px）共 8 級，並額外提供區段節奏 Token：--section-y-desktop: 80px、--section-y-tablet: 56px、--section-y-phone: 40px——註解說明桌面端寬鬆、手機端收緊，讓課程樹欄在手機上讀起來像連續流動而非分頁區塊。容器 Token 為--container-max: 1080px，搭配三檔側邊距：桌面 24px、平板 20px、手機 16px。註解特別指出 1080px 比一般 SaaS 展示面窄，因為 Duolingo 的內容以垂直閱讀的課程樹欄為核心。

在 components.html 中，響應式透過兩個斷點實作：max-width: 1023px（平板）與max-width: 639px（手機），分別切換容器側邊距與區段垂直間距；section + section以2px solid var(--border)分隔——再次體現「邊框就是視覺元素」的粗厚美學。

6. 動效

• 時長：按鈕按壓 180ms；技能節點解鎖 320ms；激活節點脈衝 1.6s。
• 緩動：cubic-bezier(0.34, 1.56, 0.64, 1)（回彈緩出，輕微過衝）用於解鎖動效。
• 吉祥物：Duo 每 4–6s 眨眼，在連擊里程碑時跳躍（480ms ease-out 彈簧）。

原始碼對照：動效 Token 綁定

動效參數在 tokens.css 中綁定為--motion-fast: 180ms、--motion-base: 320ms與--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)（回彈緩出、輕微過衝）。元件 CSS 中，按鈕與卡片的背景色、位移與陰影過渡都綁定--motion-fast+--ease-standard，讓每一次狀態變化都帶有遊戲化愉悅感。值得留意的是cubic-bezier(0.34, 1.56, 0.64, 1)的 y 值大於 1，代表動畫會產生輕微過衝（overshoot）——這正是「遊戲化愉悅感」在數學上的來源。

7. 使用守則

• 保持高飽和度貓頭鷹綠、粗厚底部陰影和圓潤課程幾何形狀的組合；單獨使用扁平綠色按鈕並不能讀出 Duolingo 的感覺。
• 將超大粗體文字保留用於課程、連擊和進度等需要鼓勵或回饋的產品時刻。
• 將趣味動效克制地用在進度狀態變化周圍，避免在每個控件上都使用通用的彈跳動畫。

原始碼對照：USAGE.md 的 Do / Avoid 契約

套件的 USAGE.md 為 Agent 與審查者定義了使用契約，是「使用守則」的操作化版本：

• 閱讀順序：先讀 USAGE.md 理解套件契約 → 讀 DESIGN.md 理解視覺意圖與反模式 → 將 tokens.css 貼入第一個 artifact 的<style>區塊後再寫元件 CSS → 用 components.manifest.json 查元件清單，需要精確選擇器或狀態時打開 components.html → 需要視覺檢查時查看preview/頁面。
• Do：精確保留 schema Token 名稱以確保跨品牌切換可靠；用--accent表示主要行動、連結、焦點狀態；先重用既有元件組；將source/檔案視為審計證據。
• Avoid：不要在複製的:rootToken 區塊之外使用裸十六進位值；不要繞過tokens.css自行重定義 Tailwind 或 design-token 值；不要宣稱擁有原始上游來源證據（本套件基於 OpenDesign 策展的 bundled fixture）；不要新增components.html或DESIGN.md中未呈現的新元件配方。

8. 套件結構：從設計文件到可執行產物

最後，將整個 Duolingo 套件的檔案結構與角色總結如下（相對倉庫根目錄）：

design-systems/duolingo/ ├── manifest.json # 套件發現元資料、來源與檔案宣告（schemaVersion: od-design-system-project/v1） ├── DESIGN.md # 給 Agent 的權威設計散文（含多語言版本 DESIGN-zh-tw.md 等） ├── USAGE.md # Agent 閱讀順序與 Do/Avoid 契約 ├── tokens.css # 權威的語義 Token 樣式表（56 個 Token） ├── design-tokens.json # 派生產物：Design Tokens JSON（契約評分 100 / excellent） ├── tailwind-v4.css # 派生產物：Tailwind v4 @theme 映射 ├── components.html # 獨立元件 fixture（66 選擇器 / 36 class） ├── components.manifest.json # 派生產物：元件/Token 索引（9 個群組） ├── preview/ # 視覺檢查頁面（colors / typography / spacing） └── source/ # 匯入證據、Token 契約報告（evidence.md、token-contract.report.json、tokens.source.json）

根據 design-systems/README.md，每個套件的最小機器可讀形狀是manifest.json+DESIGN.md+tokens.css，而components.manifest.json、design-tokens.json、tailwind-v4.css都是「派生快取」而非平行的事實來源——修改時應以tokens.css為準。source/token-contract.report.json會把每個 TOKEN_SCHEMA 綁定映射回tokens.css的宣告行，用於契約審計；source/evidence.md則說明此套件來自 OpenDesign 策展的 bundled fixture，並非對原始上游品牌的重新爬取。

在 OpenDesign 中，你可以透過 Design System 介面或支援的專案建立流程選取此套件，系統會將它的設計上下文（含 USAGE.md、tokens.css、元件資訊與 craft 建議）組合進 Agent 提示詞中；Design System 目錄在每次/api/design-systems請求時重新掃描，變更套件後重新整理介面即可生效，無需重啟 daemon。將 tokens.css 貼入 artifact 的<style>區塊、以 Token 變數而非裸色值書寫 CSS，並遵循 USAGE.md 的重用原則，你就能讓任何 Agent 產出的介面精準繼承「貓頭鷹綠 × 粗厚陰影 × 遊戲化愉悅感」的品牌語言。

【免费下载链接】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