OpenDesign 設計系統包實戰以 Uber 風格為藍本的黑白膠囊化設計規範與 Token 實現解析【免费下载链接】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/uber/DESIGN-zh-tw.md 為核心骨架深入拆解一套「受 Uber 啟發」的設計系統包——從純黑白色彩哲學、UberMove 字體層級、999px 全膠囊圓角到 Agent 可直接使用的提示詞範本。文末結合 tokens.css、components.html 等倉庫檔案說明這份設計規範如何在 OpenDesign 中落地為可被 Agent 消費的語意 Token 與元件 Fixture。讀完你將掌握這套系統的每一項設計決策、背後的 Token 綁定方式以及如何把它當作「設計引擎」讓 Coding Agent 產出高還原度的 Uber 風格原型。1. 視覺主題與氛圍自信極簡主義的黑白宇宙Uber 的設計語言是自信極簡主義的典範——一個黑白宇宙每一個像素都有其用途沒有任何裝飾是無端存在的。整體體驗建立在鮮明的二元對立之上純黑#000000與純白#ffffff幾乎沒有任何中間灰色來稀釋訊息。這不是尚未完成設計的新創公司那種貧瘠的極簡主義——這是一個足夠成熟的品牌刻意為之的克制。關鍵特徵純黑白基礎UI 主體結構中幾乎不使用中間灰色UberMove標題 UberMoveText正文/UI——專有幾何無襯線字體家族萬物膠囊化按鈕、標籤、導航項目均使用 999px 圓角半徑溫暖的人文插畫與冷峻的單色介面形成對比卡片式版面配以極輕柔的陰影不透明度 0.12–0.168px 間距網格版面緊湊、資訊密度高大膽攝影作品以全出血方式融入英雄區背景黑色頁腳以高對比的深色環境錨定頁面這份「三分鐘品牌定性」在倉庫中也被壓縮進 tokens.css 的檔案頭註解「純黑#000000與純白#ffffff——不是近黑或偏白這種尖銳二元性就是 Uber無色溫、無色調、UI 主體結構中無中間灰僅有 #4b4b4b 次要色與 #afafaf 第三層色」。也就是說視覺主題不只是文字描述而是直接編碼成了 Token 檔案的設計註記。2. 色彩方案與角色二元對立 功能灰階主色Uber Black#000000定義品牌的顏色——用於主要按鈕、標題、導航文字和頁腳。不是「近黑」或「偏黑」而是真正毫不妥協的純黑。Pure White#ffffff主要介面底色與反色文字。用於頁面背景、卡片表面以及黑色元素上的文字。互動與按鈕狀態Hover Gray#e2e2e2白色按鈕的懸停狀態——乾淨、冷靜的淺灰。Hover Light#f3f3f3浮起白色按鈕的微妙懸停——幾乎感受不到的灰。Chip Gray#efefef次要/篩選按鈕及導航標籤的背景——中性、超淺的灰色。文字與內容Body Gray#4b4b4b次要文字和頁腳連結——無冷暖偏向的純中灰色。Muted Gray#afafaf第三層文字、弱化的頁腳連結和佔位內容。邊框與分隔Border Black#000000用於結構界定的細 1px 邊框——少量用於分隔線和表單容器。陰影與深度Shadow Lightrgba(0, 0, 0, 0.12)標準卡片層次。Shadow Mediumrgba(0, 0, 0, 0.16)浮動操作按鈕和疊加層稍強的層次感。Button Pressrgba(0, 0, 0, 0.08)次要按鈕啟用/按下狀態的內嵌陰影。連結狀態Default Link Blue#0000ee正文內容中帶底線的文字連結所用的標準瀏覽器藍色。Link White#ffffff深色表面上的連結——用於頁腳和深色區塊。Link Black#000000淺色表面上帶底線裝飾的連結。漸層系統Uber 的設計完全無漸層。黑白二元對立和平鋪色塊構建了所有視覺層次。系統中任何地方都沒有漸層——每個表面都是純色每次過渡都是硬邊界或陰影。色票在 Token 層的落地方式這份色票並非停留在設計文件層面而是被完整映射為語意 Token。在 tokens.css 中可以逐項對應:root { --bg: #ffffff; /* 頁面背景 */ --surface: #ffffff; /* 卡片由陰影定義而非顏色 */ --surface-warm: #f8f8f8; /* hover 背景 / 略升起的表面 */ --fg: #000000; /* 真正的黑 — 不妥協 */ --fg-2: #000000; /* 相同沒有第二墨階 */ --muted: #4b4b4b; /* body gray — 次要文字 */ --meta: #afafaf; /* muted gray — 第三層、頁腳連結 */ --border: #000000; /* 輸入框邊框 — 唯一明顯的邊框 */ --border-soft: rgba(0, 0, 0, 0.1); /* chip/卡片分隔 */ --accent: #000000; /* 純黑白系統中黑就是主要 CTA */ --accent-on: #ffffff; --accent-hover: #e2e2e2; /* hover gray — 白按鈕懸停 */ --accent-active: rgba(0, 0, 0, 0.08); /* 按下狀態內嵌陰影 */ }值得注意的設計決策是--surface: #ffffff與--accent: #000000卡片不靠顏色差異化而靠陰影CTA 的主色就是黑本身。這是「黑白即品牌」在 Token 契約上的直接體現。--border-soft的rgba(0,0,0,0.1)則用於 chip/卡片之間的極細分隔屬於規格中「邊框是功能性的」的執行細節。3. 字體規範UberMove 與 UberMoveText 的嚴格分工字體家族標題/展示UberMove備用字體UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif正文/UIUberMoveText備用字體system-ui, Helvetica Neue, Helvetica, Arial, sans-serif注意UberMove 和 UberMoveText 是專有字體。外部實作可用system-ui或 Inter 作為最接近的替代。UberMove 的幾何方形比例可用 Inter 或 DM Sans 近似。層級角色字體字級字重行高備註展示/英雄UberMove52px3.25rem7001.23緊湊最大衝擊力廣告牌級存在感區塊標題UberMove36px2.25rem7001.22緊湊主要區塊錨點卡片標題UberMove32px2rem7001.25緊湊卡片與功能標題次級標題UberMove24px1.5rem7001.33次級區塊標題小標題UberMove20px1.25rem7001.40緊湊標題、列表標題導航/UI 大UberMoveText18px1.13rem5001.33導航連結、突出 UI 文字正文/按鈕UberMoveText16px1rem400-5001.25-1.50標準正文、按鈕標籤說明文字UberMoveText14px0.88rem400-5001.14-1.43後設資料、描述、小連結微型文字UberMoveText12px0.75rem4001.67寬鬆細則、法律文字原則粗體標題中等正文UberMove 標題字重統一為 700加粗——每個標題都有廣告牌般的衝擊力。UberMoveText 正文和 UI 文字使用 400-500透過字重對比形成清晰的視覺層次。緊湊標題行高所有標題行高在 1.22-1.40 之間——緊湊有力為快速瀏覽而設計。功能性排版沒有任何裝飾性文字處理。沒有字間距、沒有文字變換、沒有裝飾性尺寸。兩款字體嚴格分工UberMove 專用於標題UberMoveText 專用於正文、按鈕、連結和 UI。邊界從不逾越。Token 中的字體刻度字體層級在 tokens.css 中被完整實體化。例如--text-4xl: 52px對應展示/英雄字級、--leading-tight: 1.23對應 52px 展示字的行高而h236px→ 1.22、h324px→ 1.33 則在 components.html 的 CSS 中逐條落實h1, h2, h3 { font-family: var(--font-display); font-weight: 700; /* 永遠粗體 — 廣告牌級衝擊力 */ color: var(--fg); line-height: var(--leading-tight); } h1 { font-size: var(--text-4xl); } /* 52px display */ h2 { font-size: var(--text-3xl); line-height: 1.22; } h3 { font-size: var(--text-xl); line-height: 1.33; }--tracking-display: normal無字間距正是「功能性排版」原則的 Token 化表達。4. 元件樣式膠囊幾何是身份識別按鈕主要黑色CTA背景Uber Black#000000文字Pure White#ffffff內距10px 12px圓角999px完整膠囊外框無焦點內嵌圓環rgb(255,255,255) 0px 0px 0px 2px主要操作按鈕——粗體、高對比、不可錯過次要白色背景Pure White#ffffff文字Uber Black#000000內距10px 12px圓角999px完整膠囊懸停背景變為 Hover Gray#e2e2e2焦點背景變為 Hover Gray出現內嵌圓環用於深色表面或與主要黑色按鈕並列的次要操作標籤/篩選背景Chip Gray#efefef文字Uber Black#000000內距14px 16px圓角999px完整膠囊啟用內嵌陰影rgba(0,0,0,0.08)導航標籤、分類選擇器、篩選切換浮動操作背景Pure White#ffffff文字Uber Black#000000內距14px圓角999px完整膠囊陰影rgba(0,0,0,0.16) 0px 2px 8px 0px變換translateY(2px)輕微偏移懸停背景變為#f3f3f3地圖控件、返回頂部、浮動 CTA卡片與容器背景白色頁面上使用 Pure White#ffffff無明顯卡片背景差異化邊框預設無——卡片由陰影而非描邊定義圓角標準內容卡片 8px精選/推廣卡片 12px陰影標準層次rgba(0,0,0,0.12) 0px 4px 16px 0px卡片內容密度高內距極少圖片主導卡片使用全出血影像文字疊加或置於下方輸入框與表單文字Uber Black#000000背景Pure White#ffffff邊框1px 純黑#000000——唯一明顯出現邊框的地方圓角8px內距標準舒適間距焦點無自訂焦點狀態提取——依賴標準瀏覽器焦點圓環導航頂部固定導航白色背景標誌24x24px 黑色 Uber 字標/圖示連結UberMoveText14-18px字重 500Uber Black 色膠囊形導航標籤Chip Gray#efefef背景用於分類導航「叫車」、「接單」、「企業」、「Uber Eats」選單切換50% 圓角的圓形按鈕行動裝置漢堡選單模式圖像處理溫暖的手繪插畫場景功能區塊不使用攝影照片插畫風格略帶風格化的人物插畫內使用暖色調富有當代感英雄區塊使用大膽攝影或插畫作為全寬背景應用程式下載 CTA 使用 QR Code所有在卡片內的影像使用標準 8px 或 12px 圓角特色元件分類膠囊導航水平排列的膠囊形按鈕用於頂級導航「叫車」、「接單」、「企業」、「Uber Eats」、「關於」每個膠囊Chip Gray 背景、黑色文字、999px 圓角啟用狀態黑色背景加白色文字反色。雙操作英雄區分割英雄區——左側文字/CTA、右側地圖/插畫並排兩個輸入框用於出發地/目的地黑色膠囊「查看價格」CTA 按鈕。提前計劃卡片推廣「Uber Reserve」和行程規劃等功能的卡片以插畫為主溫暖、以人為中心的影像底部黑底白字 CTA 按鈕。元件在 Fixture 中的實作對照components.html 是這套元件規範的可運行 Fixturecomponents.manifest.json則為其建立了機器可讀索引。以下是實際的類別設計與 Token 綁定.btn { padding: 10px 12px; border-radius: var(--radius-sm); /* 999px 全膠囊 */ font-family: var(--font-body); font-size: var(--text-base); /* 16px */ font-weight: 500; transition: background-color var(--motion-fast) var(--ease-standard); } .btn:focus-visible { box-shadow: var(--focus-ring); } /* 內嵌白環 */ .btn-black { background: var(--fg); color: var(--accent-on); } .btn-white { background: var(--bg); color: var(--fg); border: 1px solid var(--border-soft); } .btn-white:hover { background: var(--accent-hover); } /* #e2e2e2 */ .chip { padding: 14px 16px; border-radius: var(--radius-sm); font-size: var(--text-sm); } .chip:hover { background: #e2e2e2; } .chip.active { background: var(--fg); color: var(--accent-on); } /* 反色 */ .card { background: var(--bg); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--elev-raised); } .card-featured { border-radius: var(--radius-lg); } /* 12px 精選 */components.manifest.json將這些類別歸納為 9 個元件群組buttons、inputs、cards、badges、links、keyboard、icons、typography、layout並記錄每個群組引用的 Token。例如「buttons」群組引用--accent-on、--bg、--border-soft、--radius-sm、--space-2、--text-base等「badges」群組則引用--accent-on、--radius-sm、--text-sm。這份清單同時標註了「已宣告但未引用」的 Token如--accent、--radius-pill、--text-2xl可供後續審計元件與 Token 的一致性。5. 版面原則交通系統式的緊湊與高效間距系統基礎單位8px間距刻度4px、6px、8px、10px、12px、14px、16px、18px、20px、24px、32px按鈕內距10px 12px緊湊或 14px 16px舒適卡片內距約 24-32px區塊垂直間距充裕但高效——主要區塊之間約 64-96px在 tokens.css 中間距刻度被收斂為 8px 基礎的 Token 序列--space-1: 4px到--space-12: 48px並配以響應式區塊節奏--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px。components.html中.stack-3 / .stack-4 / .stack-6這組垂直堆疊工具類直接複用這些 Token例如.stack-4 * * { margin-block-start: var(--space-4); }。網格與容器最大容器寬度約 1136px置中Token--container-max: 1136px英雄區左側文字、右側視覺的分割版面功能區塊兩欄卡片網格或全寬單欄頁腳黑色背景上的多欄連結網格全寬區塊延伸至視埠邊緣容器與網格在 components.html 中有完整執行.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }並在 1023px 與 639px 斷點逐級切換 tablet/phone 的側邊距與區塊節奏。留白哲學高效而非寬鬆Uber 的留白是功能性的——足以分隔絕不讓人感到空曠。這是交通系統式的間距緊湊、清晰、目的明確。資訊密集的卡片卡片以最少的內部間距緊密排布資訊依靠陰影和圓角定義邊界。區塊喘息空間主要區塊獲得充裕的垂直間距但區塊內部元素緊密分組。圓角刻度尖銳0px互動元素中不使用直角標準8px內容卡片、輸入框、列表框舒適12px精選卡片、較大容器、連結卡片完整膠囊999px所有按鈕、標籤、導航項目、膠囊圓形50%頭像圖片、圖示容器、圓形控件圓角刻度在 Token 中對應為--radius-sm: 999px全膠囊、--radius-md: 8px內容卡片、--radius-lg: 12px精選容器、--radius-pill: 9999px——注意「完整膠囊」在 Token 裡同時存在 999px 與 9999px 兩個取值前者是設計規格宣稱的視覺值後者是 CSS 慣用的「永遠是膠囊」保險值兩者都在 tokens.css 中明確定義。6. 深度與層次陰影是結構工具不是裝飾層級處理方式用途平面層級 0無陰影純色背景頁面背景、內嵌內容、文字區塊微妙層級 1rgba(0,0,0,0.12) 0px 4px 16px標準內容卡片、功能區塊中等層級 2rgba(0,0,0,0.16) 0px 4px 16px懸浮卡片、疊加元素浮動層級 3rgba(0,0,0,0.16) 0px 2px 8px translateY(2px)浮動操作按鈕、地圖控件按下層級 4rgba(0,0,0,0.08) inset999px 擴散按鈕啟用/按下狀態焦點圓環rgb(255,255,255) 0px 0px 0px 2px inset鍵盤焦點指示器陰影哲學Uber 將陰影純粹用作結構工具而非裝飾。陰影始終為極低不透明度0.08-0.16的黑色製造分隔內容層所需的最低限度層次感。模糊半徑適中8-16px——足以自然但絕不誇張。沒有彩色陰影、沒有疊加陰影堆疊、沒有環境光暈效果。深度更多透過黑白區塊對比來傳達而非陰影層次。在 Token 層這套層次對應--elev-flat: none、--elev-ring: 0 0 0 1px var(--border-soft)、--elev-raised: rgba(0,0,0,0.12) 0px 4px 16px 0px與--focus-ringtokens.css。「按下」層級則以--accent-active: rgba(0,0,0,0.08)表示——這是全系統唯一的內嵌陰影僅用於按鈕啟用狀態。7. 應做與禁忌把品牌約束變成可執行的檢查清單應做使用純黑#000000和純白#ffffff作為主色調——這種強烈對比本身就是 Uber所有按鈕、標籤和膠囊形導航元素使用 999px 圓角半徑所有標題保持 UberMove Bold700達到廣告牌級衝擊力使用極輕柔的陰影不透明度 0.12-0.16營造卡片層次——幾乎不可見保持緊湊、資訊密集的版面風格——Uber 優先考慮效率而非寬鬆感使用溫暖、以人為中心的插畫軟化單色介面內容卡片使用 8px 圓角精選容器使用 12px 圓角導航和突出 UI 文字使用字重 500 的 UberMoveText雙操作版面中將黑色主按鈕與白色次要按鈕搭配使用禁忌不要在 UI 主體結構中引入顏色——Uber 的介面嚴格限於黑、白、灰不要在按鈕上使用小於 999px 的圓角——完整膠囊形狀是核心身份標識不要使用濃重陰影或高不透明度的投影——深度效果應極度克制不要使用襯線字體——Uber 的字體系統完全是幾何無襯線不要創建留白過多的寬鬆版面——Uber 的密度是有意為之的不要使用漸層或色彩疊加——每個表面都是平鋪純色不要將 UberMove 用於正文也不要將 UberMoveText 用於標題——層次是嚴格的不要使用裝飾性邊框——邊框是功能性的輸入框、分隔線或不存在不要用不純白或不純黑來軟化黑白對比——這種二元性是刻意為之的這份「Do / Dont」清單是給人類設計師與 Agent 的雙重契約Agent 在迭代時可以把它當作靜態檢查規則逐條核對產物是否違反「純黑白、全膠囊、零漸層、輕陰影、高密度、無裝飾字距」六大底線。8. 響應式行為從 320px 到 1136px 的折疊策略中斷點名稱寬度關鍵變化小型行動裝置320px最小版面單欄堆疊輸入框緊湊字體行動裝置600px標準行動裝置堆疊版面漢堡導航小型平板768px開始出現兩欄網格卡片版面擴展平板1119px完整平板版面英雄內容並排顯示小型桌機1120px桌機網格啟動水平導航標籤桌機1136px完整桌機版面最大容器寬度分割英雄區觸控目標所有膠囊按鈕最小高度 44px10-14px 垂直內距 行高導航標籤寬裕的 14px 16px 內距方便拇指點擊圓形控件選單、關閉50% 圓角確保大而易點的目標卡片表面在行動裝置上作為全區域觸控目標折疊策略導航水平膠囊導航折疊為帶圓形切換按鈕的漢堡選單英雄區分割版面文字 地圖/視覺堆疊為單欄——文字在上視覺在下輸入框並排的出發地/目的地輸入框垂直堆疊功能卡片兩欄網格折疊為全寬堆疊卡片標題52px 展示字級逐級縮小至 36px、32px、24px、20px頁腳多欄連結網格折疊為手風琴或單欄堆疊分類膠囊在較小螢幕上水平捲動溢出圖像行為插畫在容器內等比例縮放英雄區影像保持縱橫比在較小螢幕上可能裁切QR Code 區塊在行動裝置上隱藏應用程式下載改為直連商店連結卡片影像在所有尺寸下保持 8-12px 圓角在 Fixture 中響應式行為以 1023px 與 639px 兩個實作斷點呈現components.html 與.features-grid的兩次折疊並透過--section-y-desktop/tablet/phone三個 Token 調整各尺寸下的區塊垂直節奏。規格文件中的 320/600/768/1119/1120/1136px 是設計意圖的完整描述Fixture 則以最貼近實際 CSS 的斷點精簡落地。9. Agent 提示指南把規範翻譯成可執行的指令快速顏色參考主要按鈕「Uber Black#000000」頁面背景「Pure White#ffffff」按鈕文字黑色背景上「Pure White#ffffff」按鈕文字白色背景上「Uber Black#000000」次要文字「Body Gray#4b4b4b」第三層文字「Muted Gray#afafaf」標籤背景「Chip Gray#efefef」懸停狀態「Hover Gray#e2e2e2」卡片陰影「rgba(0,0,0,0.12) 0px 4px 16px」頁腳背景「Uber Black#000000」示範元件提示「在 Pure White#ffffff上建立英雄區標題使用 52px UberMove Bold700行高 1.23。文字使用 Uber Black#000000。添加 Body Gray#4b4b4b副標題16px UberMoveText 字重 400行高 1.50。放置一個 Uber Black#000000膠囊 CTA 按鈕純白文字999px 圓角內距 10px 12px。」「設計分類導航列包含水平膠囊按鈕。每個膠囊Chip Gray#efefef背景Uber Black#000000文字14px 16px 內距999px 圓角。啟用膠囊反色為 Uber Black 背景加純白文字。使用 UberMoveText 14px 字重 500。」「在 Pure White#ffffff上建構功能卡片8px 圓角陰影 rgba(0,0,0,0.12) 0px 4px 16px。標題使用 UberMove 24px 字重 700描述使用 Body Gray#4b4b4b16px UberMoveText。底部添加黑色膠囊 CTA 按鈕。」「在 Uber Black#000000上建立深色頁腳Pure White#ffffff標題文字UberMove 20px 字重 700。頁腳連結使用 Muted Gray#afafaf14px UberMoveText。連結懸停變為純白。多欄網格版面。」「設計浮動操作按鈕Pure White#ffffff背景999px 圓角14px 內距陰影 rgba(0,0,0,0.16) 0px 2px 8px。懸停時背景變為 #f3f3f3。用於返回頂部或地圖控件。」迭代指南每次專注於一個元件引用嚴格的黑白色板——「使用 Uber Black#000000」而非「讓它深一點」始終為按鈕和膠囊指定 999px 圓角——這對 Uber 身份標識不可妥協明確描述字體家族——「標題用 UberMove Bold標籤用 UberMoveText Medium」陰影使用「極輕柔陰影rgba(0,0,0,0.12) 0px 4px 16px」——絕不用濃重投影保持版面緊湊、資訊密集——Uber 追求高效而非寬鬆插畫應溫暖且以人為本——描述「暖色調風格化人物」而非抽象形狀用白色次要按鈕搭配黑色 CTA構建平衡的雙操作版面附錄在 OpenDesign 中消費這個設計系統包這份設計規範並非孤立文檔而是 OpenDesign 設計系統目錄design-systems/README.md 記錄了目錄中 151 個可攜式設計系統包中的一個標準包。按照 USAGE.md 的閱讀順序Agent 與審閱者應這樣使用先讀USAGE.md理解套件契約再讀DESIGN.md即本篇的英文版design-systems/uber/DESIGN.md多語言版本見DESIGN-zh-tw.md等掌握視覺意圖、約束與反模式將tokens.css貼進第一個 artifact 的style區塊再開始撰寫元件 CSS用components.manifest.json取得精簡元件清單需要精確選擇器或狀態時查閱components.html需要視覺檢查時參考preview/下的 colors、typography、spacing 三頁。Token 契約與衍生檔案包內source/目錄承載審計證據source/evidence.md 說明本包源自 OpenDesign 的策展捆綁 Fixture而非對上游品牌網站的新鮮爬取source/token-contract.report.json將每個 TOKEN_SCHEMA 綁定對映回tokens.css的宣告行。design-tokens.json與tailwind-v4.css是衍生輸出前者是 56 個 Token 的結構化清單評分 100 / 等級 excellent後者把tokens.css的 CSS 變數映射為 Tailwind v4 的theme命名空間import tailwindcss; import ./tokens.css; theme { --color-accent: var(--accent); --color-accent-on: var(--accent-on); --color-accent-hover: var(--accent-hover); --font-display: var(--font-display); --font-body: var(--font-body); --radius-sm: var(--radius-sm); --radius-pill: var(--radius-pill); --shadow-raised: var(--elev-raised); --shadow-focus-ring: var(--focus-ring); /* ...其餘映射見 design-systems/uber/tailwind-v4.css */ }manifest.json 記錄了包的中繼資料id: uber、分類Media Consumer、來源類型bundled以及各檔案的宣告路徑。components.manifest.json的 fixture 統計顯示39 個選擇器、19 個類別、21 個元素所有可見值均來自tokens.css——這是「單一事實來源」原則在元件層的驗證。給 Agent 的落地建議在 OpenDesign 中選用此包時Agent 的提示組合會自動帶入USAGE.md、tokens.css、元件資訊與 import mode依 design-systems/README.md 的說明。實作時應遵循 USAGE 的三條避免事項避免在拷貝的:rootToken 區塊之外使用裸 hex 值避免繞過tokens.css獨立重新定義 Tailwind 或設計 Token避免宣稱此包包含原始上游來源證據。只要守住「Token 單一事實來源 元件複用優先」這兩個原則就能讓任何 Coding Agent 穩定產出高還原度的 Uber 風格黑白膠囊介面。【免费下载链接】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），仅供参考