open-design Bold 設(shè)計系統(tǒng)實戰(zhàn)指南高對比重型排版設(shè)計語言的令牌實現(xiàn)與組件落地【免費下載鏈接】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/bold/DESIGN.md 展開系統(tǒng)講解 open-design 倉庫中 Bold 設(shè)計系統(tǒng)包的視覺意圖、語義令牌、組件契約與接入方式。讀完本文你將掌握如何在 open-design 的 Design System 工作流中直接引用tokens.css構(gòu)建高對比、重型排版風(fēng)格的頁面并理解該包從DESIGN.md到編譯令牌、組件夾具與質(zhì)量報告的完整技術(shù)鏈路。一、Bold 包是什么一個可直接注入 Agent 上下文的設(shè)計系統(tǒng)包在 open-design 倉庫中design-systems/下的每個子目錄都是一個可移植的設(shè)計系統(tǒng)包portable design-system package。從 Design System 界面或受支持的項目創(chuàng)建流程中選擇某個包時open-design 會將其設(shè)計上下文組合進 Agent 的提示詞prompt中從而約束生成產(chǎn)物的視覺風(fēng)格。bold包屬于Bold Expressive類別其設(shè)計目標(biāo)是以粗重排版、高對比色彩與具有主導(dǎo)性的版式布局建立強烈的視覺存在感同時保持可用性與可讀性。按倉庫約定每個捆綁包都具備相同的最小機器可讀結(jié)構(gòu)見 design-systems/README.mddesign-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.cssbold包在此基礎(chǔ)上還提供了更豐富的文件聲明于 manifest.jsondesign-systems/bold/ ├── DESIGN.md # Agent 的權(quán)威設(shè)計散文本指南主體 ├── USAGE.md # Agent 與審查者的讀取順序與使用守則 ├── manifest.json # 穩(wěn)定發(fā)現(xiàn)元數(shù)據(jù)、來源與文件聲明 ├── tokens.css # 編譯后的語義令牌樣式表事實源 ├── design-tokens.json # 派生的 Design Tokens JSON56 個令牌 ├── tailwind-v4.css # 派生的 Tailwind v4 映射 ├── components.html # 獨立組件夾具 ├── components.manifest.json# 派生的組件/令牌索引 ├── preview/ # colors / typography / spacing 預(yù)覽頁 └── source/ # 導(dǎo)入證據(jù)、令牌契約報告其中DESIGN.md是 Agent 的風(fēng)格決策文檔tokens.css是編譯后的語義令牌事實源。下文將逐節(jié)繼承DESIGN.md的九個章節(jié)并補充令牌、組件與質(zhì)量層面的實現(xiàn)細(xì)節(jié)。二、視覺主題與氛圍定義風(fēng)格家族的三個錨點DESIGN.md第一部分用三個維度錨定 Bold 的風(fēng)格家族維度取值含義Visual stylebold粗重、強勢的視覺語言Color stanceprimary, secondary主色與次色承擔(dān)明確的功能角色Design intent保持輸出對該風(fēng)格家族的識別度同時保留可用性與可讀性風(fēng)格優(yōu)先但不可犧牲可用性這一定位在components.html的元描述中得到了印證——夾具的 fixture 描述為bold campaign language with hard contrast, oversized type, and assertive actions高硬對比、超大字號、果斷的行動指令。也就是說Bold 本質(zhì)上是面向活動頁、落地頁、發(fā)布頁這類需要宣言式視覺沖擊的場景而非儀表盤式的低對比密度界面。從源碼結(jié)構(gòu)看該包由 open-design 倉庫維護的 curated bundled fixture 派生見 manifest.json 中source.type: bundled因此不主張聲稱原始上游來源證據(jù)——這是USAGE.md明確提醒的事實邊界。三、色彩系統(tǒng)從風(fēng)格基礎(chǔ)令牌到編譯令牌的映射3.1 DESIGN.md 聲明的風(fēng)格基礎(chǔ)色板DESIGN.md的色彩章節(jié)聲明了一組來自風(fēng)格基礎(chǔ)style foundations的色板令牌語義值用途指引Primary#0077BCCTA 強調(diào)承擔(dān)主要交互信號Secondary#009866次級強調(diào)Success#16A34A成功狀態(tài)Warning#D97706警告狀態(tài)Danger#DC2626危險狀態(tài)Surface#111111大面積背景與卡片Text#111827正文保證可讀性Neutral#111111由 surface 令牌派生用于官方格式兼容配套的使用原則是用 Primary#0077BC做 CTA 強調(diào)用 Surface#111111做大面積背景與卡片正文保持 Text#111827以保證易讀性。3.2 tokens.css 中實際編譯的語義令牌需要注意的是DESIGN.md聲明的是風(fēng)格基礎(chǔ)色板而 tokens.css 是包內(nèi)實際編譯、運行時真正生效的語義令牌。兩者之間存在可見的差異——例如編譯后的--accent為#111111近黑--bg為#ffffff構(gòu)成了黑白高對比的核心信號。這是bold包當(dāng)前的實際狀態(tài)以tokens.css為事實源USAGE.md與design-tokens.json均明確此約定。tokens.css的:root塊完整定義了 56 個令牌按設(shè)計令牌契約分層為A1-identity8 個、B-slot4 個、A226 個、A1-structure18 個。核心顏色令牌如下:root { --bg: #ffffff; --surface: #f7f7f7; --surface-warm: #eeeeee; --fg: #111111; --fg-2: #3a3a3a; --muted: #707070; --meta: #111111; --border: #d9d9d9; --border-soft: #eeeeee; --accent: #111111; --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #168a46; --warn: #b7791f; --danger: #c53030; }幾個值得展開的實現(xiàn)細(xì)節(jié)hover/active 通過color-mix()派生--accent-hover、--accent-active不再硬編碼色值而是基于--accent在 oklab 色彩空間混合 8%/14% 黑色保證整個強調(diào)色系只需維護一個源令牌即可自動生成狀態(tài)色。功能色與 DESIGN.md 色板數(shù)值略有出入--success #168a46、--warn #b7791f、--danger #c53030是編譯后的實際值與 DESIGN.md 中#16A34A / #D97706 / #DC2626不完全一致——這正是聲明色板與編譯令牌兩份文檔存在同步偏差的實例接入時應(yīng)以tokens.css的取值作為運行基準(zhǔn)。3.3 組件中的色板用法來自 components.htmlcomponents.html 中色板通過.swatch系列類直觀呈現(xiàn)四塊色板對應(yīng)--accent近黑、--surface、--surface-warm、--fg。按鈕體系的實現(xiàn)印證了色彩分工.btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }即主行動用高對比實色塊黑底白字次行動用淺表面加描邊hover 時以--accent作為統(tǒng)一交互信號。這正是DESIGN.mdPrimary 用于 CTA 強調(diào)、Secondary 保持中性原則的代碼級落地。四、排版桌面優(yōu)先的強力字階DESIGN.md的排版章節(jié)給出三個關(guān)鍵決策Scale桌面優(yōu)先的富有表現(xiàn)力的字階desktop-first expressive scaleFamiliesprimaryArchivo BlackdisplayArchivo BlackmonoJetBrains MonoWeights100–900 全字重tokens.css將其編譯為可運行的令牌--font-display: Arial Black, Impact, sans-serif; --font-body: Inter, system-ui, sans-serif; --font-mono: SF Mono, ui-monospace, Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 36px; --text-3xl: 54px; --text-4xl: 76px; --leading-body: 1.52; --leading-tight: 1.06; --tracking-display: -0.025em;同樣存在聲明與編譯的差異DESIGN.md聲明 Archivo Black / JetBrains Mono而編譯令牌使用 Arial Black / Impact 與 SF Mono 棧。從代碼結(jié)構(gòu)看編譯棧選擇的是無需外部字體加載即可穩(wěn)定渲染的系統(tǒng)字體組合這保證了任意環(huán)境下 bold 風(fēng)格都能成立黑體家族帶來粗重字形Impact 強化標(biāo)題沖擊力。components.html展示了字階的實際用法h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; } h2 { font-size: var(--text-3xl); font-weight: 700; } h3 { font-size: var(--text-xl); font-weight: 700; } .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }設(shè)計語言上遵循DESIGN.md的核心原則標(biāo)題承載風(fēng)格個性粗重 display 字體 收緊字距 緊湊行高 1.06正文優(yōu)化掃描性與對比度1.52 行高。--tracking-display: -0.025em的負(fù)字距讓大字標(biāo)題更緊湊有力。五、間距與網(wǎng)格可預(yù)測的垂直節(jié)奏DESIGN.md規(guī)定間距刻度為4/8/12/16/24/32并要求各區(qū)塊與組件間保持一致的垂直節(jié)奏列與模塊對齊到可預(yù)測的網(wǎng)格避免隨意偏移。tokens.css將其擴展為完整的間距階梯并在結(jié)構(gòu)層補充了分端口的區(qū)塊縱向間距--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 96px; --section-y-tablet: 68px; --section-y-phone: 48px;components.html中section的縱向內(nèi)邊距與.container的橫向內(nèi)邊距都直接消費這些令牌并通過媒體查詢在桌面默認(rèn)/平板≤1023px/手機≤639px三檔切換實現(xiàn)響應(yīng)式節(jié)奏的單一來源管理.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); } section { padding-block: var(--section-y-desktop); } media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } } media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }六、布局與構(gòu)成清晰的層次與克制的裝飾DESIGN.md的布局章節(jié)提出三條構(gòu)成原則傾向采用內(nèi)容塊清晰、內(nèi)部內(nèi)邊距一致的布局保持明顯的層級標(biāo)題 → 支撐文字 → 主行動先用留白分隔關(guān)注點再考慮邊框或陰影。components.html的 Hero 區(qū)即是這三條原則的樣板grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr)的左文右卡雙欄配以.stack * *的間距疊放、.actions的行動按鈕組而h1的max-width: 840px、.lead的max-width: 640px都在用行長控制強化可讀性。升起的面板.panel使用--elev-raised: 0 16px 40px rgba(0,0,0,0.10)這一柔和投影避免喧賓奪主——裝飾服務(wù)于層級而非覆蓋層級。七、組件體系清單驅(qū)動的可復(fù)用部件DESIGN.md的組件章節(jié)對三類部件給出約束Buttons主行動用#0077BC編譯后為--accent體系次行動作保持中性Inputs強 focus-visible 狀態(tài)、清晰標(biāo)簽、可預(yù)測的錯誤信息Cards/sections跨頁面保持一致的圓角、間距與抬升策略。components.manifest.json 將這些約束結(jié)構(gòu)化為組件分組groups清單共 48 個選擇器、26 個類名、19 個元素覆蓋buttons、inputs、cards、badges、links、typography、layout七組keyboard 與 icons 組標(biāo)記為present: false。清單同時記錄每個組實際引用的令牌例如buttons 組引用--accent / --accent-on / --border / --ease-standard / --elev-ring / --focus-ring / --radius-md / --space-5 / --surface / --text-sm / --motion-fast等 12 個令牌inputs 組引用--border / --radius-sm / --space-2 / --space-4 / --space-5 / --surfacecards 組引用--border / --elev-raised / --radius-lg / --surfacelayout 組引用--container-gutter-* / --section-y-desktop。該清單還承擔(dān)令牌衛(wèi)生審計declared56 個聲明令牌與referenced組件實際引用對照列出 7 個已聲明但未被組件引用的令牌--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn而undeclaredReferenced為空——說明組件夾具沒有使用任何未聲明令牌契約閉合。7.1 表單控件的可訪問性細(xì)節(jié).field采用 grid 布局在標(biāo)簽與輸入框之間建立--space-2的間距input最小高度 46px滿足觸控目標(biāo)focus 時以--focus-ring: 0 0 0 3px rgba(17,17,17,0.18)配合border-color: var(--accent)給出強 focus 信號。這印證了DESIGN.mdstrong focus-visible states, clear labels, and predictable error messaging的要求。八、動效與交互短促、有目的、以強調(diào)色為信號DESIGN.md的動效章節(jié)規(guī)定使用微妙過渡以 Primary#0077BC作為交互信號默認(rèn)短促、有目的的過渡150–250ms配合穩(wěn)定緩動hover、focus-visible、active、disabled、loading 狀態(tài)必須顯式存在。tokens.css將動效參數(shù)化--motion-fast: 150ms; --motion-base: 240ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);components.html中的按鈕過渡完整覆蓋背景色、邊框色、文字色、位移與陰影五個維度全部使用var(--motion-fast) var(--ease-standard)hover 時transform: translateY(-1px)提供輕微的物理反饋:focus-visible以--focus-ring保證鍵盤可達性。整套體系把短促、有目的落到具體的時長與緩動參數(shù)上。九、語音與品牌行動導(dǎo)向的微文案DESIGN.md的 Voice Brand 章節(jié)要求語調(diào)與視覺風(fēng)格一致簡潔、自信、面向產(chǎn)品微文案行動導(dǎo)向避免泛泛的填充語言在標(biāo)題中保留風(fēng)格身份同時讓 UI 標(biāo)簽字面、清晰。components.html中 Hero 的文案High-contrast campaign system / Large type, confident blocks, and direct action patterns以及按鈕文案Primary action / Secondary action正是這一語調(diào)的示范——標(biāo)題保留宣言氣質(zhì)控件標(biāo)簽則直接了當(dāng)。十、反模式清單質(zhì)量守門員DESIGN.md明確列出四條不可逾越的反模式不引入調(diào)色板之外的色值——已有令牌能解決的問題就不要硬編碼新顏色不用同一字號/字重扁平化層級——層級必須通過類型差異顯式表達不添加降低可讀性或可訪問性的裝飾效果不在同一界面混用無關(guān)的視覺隱喻。USAGE.md對此給出了配套的工程化禁令不在拷貝的:root令牌塊之外使用裸十六進制色值不脫離tokens.css單獨重定義 Tailwind 或 design-token 值不添加components.html或DESIGN.md中不存在的組件配方。十一、接入與使用Agent 與審查者的完整工作流USAGE.md 規(guī)定了標(biāo)準(zhǔn)讀取順序先讀USAGE.md理解包契約再讀DESIGN.md獲取視覺意圖、約束與反模式將tokens.css粘貼進第一個 artifact 的style塊再編寫組件 CSS用components.manifest.json做緊湊的組件清單需要精確選擇器或狀態(tài)時打開components.html需要視覺核驗時查看preview/頁面colors、typography、spacing。其中三條關(guān)鍵紀(jì)律保留 schema 令牌名完全一致以保證跨品牌切換的可靠性open-design 支持在不同設(shè)計系統(tǒng)包之間切換令牌名即切換契約--accent用于主行動、鏈接、focus 狀態(tài)以及頁面中唯一清晰的焦點元素將source/文件視為捆綁夾具回填的審計證據(jù)source/evidence.md、source/token-contract.report.json、source/tokens.source.json。11.1 Tailwind v4 映射令牌的框架化接入若項目使用 Tailwind v4可直接引入派生的 tailwind-v4.css。它以tokens.css為事實源在theme塊中把語義令牌映射為 Tailwind 設(shè)計令牌--color-accent、--font-display、--text-4xl、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-standard等從而讓bg-accent、text-4xl、shadow-raised這類 Tailwind 工具類直接落到 Bold 的語義令牌上。文件頭注釋明確Derived from tokens.css. Keep tokens.css as the source of truth即任何令牌調(diào)整都應(yīng)改tokens.css而非映射層。11.2 令牌契約與質(zhì)量報告design-tokens.json 是令牌契約的機器可讀快照其 summary 顯示該包共 56 個令牌、56 個均聲明且均有來源支撐契約評分100 分 / excellent 級recommendRebuild: false。每個令牌條目都帶layerA1-identity / B-slot / A2 / A1-structure、confidence: high與sources精確到tokens.css:行號例如--bg的sources為tokens.css:7。這套數(shù)據(jù)由source/token-contract.report.json生成與tokens.css強制一致見 design-systems/README.md 中派生產(chǎn)物是緩存而非競爭性事實源的說明。十二、在 open-design 中的定位與約束Bold 包遵循design-systems/目錄的 v1 manifest 約定schemaVersion: od-design-system-project/v1文件夾 slug 與manifest.id均為bold類別Bold Expressive。運行期 open-design 會以 manifest 元數(shù)據(jù)優(yōu)先于 Markdown H1 與 Category:約定后者作為舊版包的可讀回退。包內(nèi)聲明的每個路徑都必須安全、相對且真實存在——這些由包質(zhì)量守衛(wèi)package-quality guards在倉庫 CI 中校驗。最后重申DESIGN.md的一貫立場Bold 的目標(biāo)不是為風(fēng)格而風(fēng)格而是在保持輸出可識別的同時守住可用性與可讀性底線。接入該包時請始終以 tokens.css 為運行基準(zhǔn)以 USAGE.md 的讀取順序組織生成流程并用 components.manifest.json 約束組件復(fù)用邊界——這正是 open-design 設(shè)計系統(tǒng)包從風(fēng)格文檔走向可執(zhí)行契約的完整閉環(huán)?！久赓M下載鏈接】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創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考