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