打造遊戲化設計系統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層級角色字體尺寸字重行高字間距備註展示Feather Bold56px (3.5rem)8001.05-0.01em引導主視覺H1Feather Bold32px (2rem)8001.15-0.005em頁面標題H2Feather Bold24px (1.5rem)8001.2normal版塊標題H3Feather Bold18px (1.125rem)7001.25normal卡片標題、課程列大正文Mona Sans17px (1.0625rem)5001.5normal課程提示、說明正文Mona Sans15px (0.9375rem)4001.5normal標準文段說明文字Mona Sans13px (0.8125rem)6001.40.01em經驗值計數、元資料按鈕Feather Bold16px (1rem)8001.20.02em標準按鈕標籤連擊Feather Bold14px (0.875rem)8001.2normal連擊數字、火焰上原則800 是預設值Feather Bold 在標題和按鈕中以 800 字重運行。在此系統中700 看起來偏弱。大字號標題尺寸比典型產品品牌大 25–40%——自信即身份。圓潤字形每個字形都有柔和末端鋒利襯線會破壞親和感契約。原始碼對照字級階梯與 CSS 實作tokens.css 將字級階梯綁定為--text-xs12px到--text-4xl56px共 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.05h2為--text-2xl搭配-0.005emh3為--text-lg、字重 700、行高 1.25。h1, h2, h3統一使用--font-display與字重 800h3例外為 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-sm12px、2px solid var(--border)邊框:focus-visible時邊框轉為var(--accent)並套用--focus-ring0 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。容器最大 1080px24px 邊距。課程樹欄寬 320px在桌面端置中。原始碼對照間距尺度與響應式容器tokens.css 將間距綁定為--space-14px至--space-1248px共 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 # 獨立元件 fixture66 選擇器 / 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.jsonDESIGN.mdtokens.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考