計(jì)系統(tǒng)：從黑白色板到 Agent 可執(zhí)行的完整設(shè)計(jì)規(guī)范)
AI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成【免費(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點(diǎn)擊查看免費(fèi)下載本文圍繞 OpenDesign 倉庫中 design-systems/uber/DESIGN-fr.md法語版對應(yīng)英文原版 design-systems/uber/DESIGN.md展開。該文檔完整定義了 Uber 風(fēng)格設(shè)計(jì)系統(tǒng)的視覺語言——純黑純白、膠囊形交互元素、UberMove 字體層級與低透明度陰影體系并配套 tokens.css、components.html、tailwind-v4.css 等可直接落地的工程資產(chǎn)。讀完本文你將掌握這套設(shè)計(jì)系統(tǒng)從色彩令牌、排版規(guī)則到組件樣式、響應(yīng)式策略的完整規(guī)格并能在 Claude Code、Codex、Cursor 等 Agent 環(huán)境中用文中給出的提示詞模板讓編碼代理直接產(chǎn)出高保真的 Uber 風(fēng)格原型、落地頁或儀表盤。1. 視覺主題與氛圍自信的極簡主義Uber 的設(shè)計(jì)語言是有底氣留白的極簡主義教科書——整個(gè)體驗(yàn)建立在墨黑#000000與純白#ffffff的鋒利二元對立之上UI 框架中幾乎沒有中間灰階來稀釋信息。這不是一家尚未完成設(shè)計(jì)的初創(chuàng)公司那種蒼白極簡而是一個(gè)足夠成熟、敢于輕聲說話的品牌所展現(xiàn)的克制。這種克制在排版上體現(xiàn)為簽名式字體UberMove一款具有明顯方形、工程感氣質(zhì)的專有幾何無襯線字體。52px 的 UberMove Bold 標(biāo)題帶有廣告牌般的重量感配套的UberMoveText以中等字重500承擔(dān)正文與按鈕文字更柔和、更易讀。兩者共同構(gòu)成一套像交通圖一樣的排版系統(tǒng)清晰、高效、為快速掃讀而生。真正讓 Uber 風(fēng)格與眾不同的是滿幅攝影/插畫 膠囊形border-radius 999px交互元素的組合。導(dǎo)航 chips、CTA 按鈕、分類選擇器共享這種膠囊形態(tài)形成一種觸感友好、適合拇指操作的界面語言。溫暖的、略帶風(fēng)格化的人物插畫司機(jī)、乘客、城市景觀為人本可能冷冰冰的單色系統(tǒng)注入了人情味。頁面在白色內(nèi)容區(qū)與全黑頁腳之間交替卡片布局使用最輕柔的陰影rgba(0,0,0,0.12-0.16)在不破壞扁平美學(xué)的前提下制造輕微抬升。關(guān)鍵特征速覽純黑純白基底UI 框架幾乎無中間灰階UberMove標(biāo)題 UberMoveText正文/UI雙字體系統(tǒng)萬物皆膠囊按鈕、chips、導(dǎo)航項(xiàng)一律 999px border-radius溫暖人物插畫與冷峻單色界面形成對比卡片布局使用耳語級陰影0.12–0.16 透明度8px 間距網(wǎng)格布局緊湊、信息密度高滿幅攝影用作 hero 背景黑色頁腳以高對比度暗色環(huán)境錨定頁面2. 色彩系統(tǒng)二元對立中的完整角色分工Uber 色彩系統(tǒng)的核心是沒有漸變。黑白二元與扁平色塊構(gòu)成了全部視覺層級——每一塊表面都是純色每一次過渡都是硬邊或陰影。倉庫中的 tokens.css 將這套角色分工固化為 56 個(gè)結(jié)構(gòu)化令牌design-tokens.json統(tǒng)計(jì)totalTokens: 56評分score: 100/grade: excellent可直接在 CSS 中使用。2.1 主色令牌值角色--bg/--surface#ffffff頁面底色與卡片表面卡片靠陰影而非顏色區(qū)分--fg/--fg-2#000000真正無妥協(xié)的黑色用于主按鈕、標(biāo)題、導(dǎo)航文本、頁腳2.2 交互態(tài)與按鈕令牌值角色--accent-hoverHover Gray#e2e2e2白色按鈕 hover 態(tài)——干凈偏冷的淺灰反饋清晰而無溫度Hover Light#f3f3f3懸浮白色按鈕的微妙 hover幾乎不可察覺Chip Gray#efefef次級/篩選按鈕與導(dǎo)航 chips 的底色2.3 文本與內(nèi)容令牌值角色--mutedBody Gray#4b4b4b次級文本與頁腳鏈接無冷暖偏置的真正中灰--metaMuted Gray#afafaf三級文本、弱化頁腳鏈接、占位內(nèi)容2.4 邊框與層級令牌值角色--border#0000001px 結(jié)構(gòu)邊框僅用于分隔線與表單容器惜用--border-softrgba(0,0,0,0.1)chip/卡片分隔--elev-raisedrgba(0,0,0,0.12) 0px 4px 16px 0px卡片標(biāo)準(zhǔn)抬升耳語級陰影中檔rgba(0,0,0,0.16)懸浮按鈕與 overlay--accent-activeButton Pressrgba(0,0,0,0.08)inset次級按鈕按下態(tài)的內(nèi)陰影--focus-ringrgb(255,255,255) 0px 0px 0px 2px inset鍵盤焦點(diǎn)指示器2.5 鏈接態(tài)與語義色Default Link Blue#0000ee正文中帶下劃線的標(biāo)準(zhǔn)瀏覽器藍(lán)Link White#ffffff深色表面頁腳、暗色區(qū)上的鏈接Link Black#000000淺色表面上的下劃線鏈接需要特別指出的是tokens.css 中的設(shè)計(jì)決策注釋明確寫道在純黑白系統(tǒng)中黑色本身就是主 CTA 色--accent: #000000。與此同時(shí)令牌表還保留了--success: #16a34a、--warn: #eab308、--danger: #dc2626三個(gè)語義色用于狀態(tài)反饋但這三個(gè)顏色不應(yīng)出現(xiàn)在界面框架UI chrome中。3. 排版規(guī)則雙字體、嚴(yán)格分工3.1 字體家族與替代方案--font-display: UberMove, UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;注意UberMove 與 UberMoveText 均為專有字體。外部實(shí)現(xiàn)中建議使用system-ui或 Inter 作為最接近的替代UberMove 的幾何方形特質(zhì)可用 Inter 或 DM Sans 近似。3.2 完整字號層級表角色字體字號字重行高說明Display/HeroUberMove52px (3.25rem)7001.23緊湊最大沖擊力廣告牌存在感區(qū)塊標(biāo)題UberMove36px (2.25rem)7001.22緊湊主要區(qū)塊錨點(diǎn)卡片標(biāo)題UberMove32px (2rem)7001.25緊湊卡片與功能標(biāo)題副標(biāo)題UberMove24px (1.5rem)7001.33次級區(qū)塊標(biāo)題小標(biāo)題UberMove20px (1.25rem)7001.40緊湊標(biāo)題、列表標(biāo)題導(dǎo)航/大 UIUberMoveText18px (1.13rem)5001.33導(dǎo)航鏈接、顯著 UI 文本正文/按鈕UberMoveText16px (1rem)400–5001.25–1.50標(biāo)準(zhǔn)正文、按鈕標(biāo)簽說明文字UberMoveText14px (0.88rem)400–5001.14–1.43元數(shù)據(jù)、描述、小鏈接MicroUberMoveText12px (0.75rem)4001.67舒展小字、法律文本components.html 的源碼印證了這套規(guī)則h1, h2, h3統(tǒng)一使用var(--font-display)且font-weight: 700始終加粗——廣告牌級力量h1采用--text-4xl--leading-tight1.23且無字距h2行高 1.22h3行高 1.33與規(guī)范表一一對應(yīng)。3.3 四條鐵律標(biāo)題加粗、正文中重UberMove 標(biāo)題只允許字重 700正文/UI 用 UberMoveText 400–500通過字重對比建立視覺層級。標(biāo)題行高收緊所有標(biāo)題行高 1.22–1.40緊湊有力適合掃讀而非精讀。功能型排版全系統(tǒng)沒有任何裝飾性文字處理——無字距、無大小寫轉(zhuǎn)換、無裝飾性字號每個(gè)文本元素都服務(wù)于直接溝通。雙字體、嚴(yán)格分工UberMove 只用于標(biāo)題UberMoveText 只用于正文、按鈕、鏈接與 UI邊界從不逾越。tokens.css 中--tracking-display: normal正是這一功能性排版原則的工程落地。4. 組件樣式規(guī)格4.1 按鈕體系主按鈕·黑CTA背景Uber Black#000000文字Pure White#ffffff內(nèi)邊距10px 12px圓角999px完整膠囊無描邊焦點(diǎn)內(nèi)嵌環(huán)rgb(255,255,255) 0px 0px 0px 2px大膽、高對比、不可錯(cuò)過的首要動作按鈕次級按鈕·白背景Pure White文字Uber Black內(nèi)邊距10px 12px圓角999pxHover背景變?yōu)?Hover Gray#e2e2e2Focus背景變灰并出現(xiàn)內(nèi)嵌環(huán)用于深色表面或與主黑按鈕組成雙動作布局Chip/篩選背景Chip Gray#efefef文字Uber Black內(nèi)邊距14px 16px圓角999px激活態(tài)內(nèi)陰影rgba(0,0,0,0.08)用于導(dǎo)航 chips、分類選擇器、篩選開關(guān)懸浮動作按鈕背景Pure White文字Uber Black內(nèi)邊距14px圓角999px陰影rgba(0,0,0,0.16) 0px 2px 8px 0px位移translateY(2px)Hover背景變?yōu)?f3f3f3用于地圖控件、回到頂部、懸浮 CTAcomponents.html 中的.btn實(shí)現(xiàn)補(bǔ)充了工程細(xì)節(jié)按鈕采用inline-flexgap: var(--space-2)transition: background-color var(--motion-fast) var(--ease-standard)150ms cubic-bezier(0.2, 0, 0, 1).btn-black:hover微調(diào)為#222.btn-white用 1px--border-soft描邊界定邊界。4.2 卡片與容器背景白頁上的 Pure White卡片與背景不做色彩區(qū)分默認(rèn)無邊框——卡片靠陰影而非描邊定義圓角普通內(nèi)容卡 8px主推/促銷卡 12px陰影rgba(0,0,0,0.12) 0px 4px 16px 0px標(biāo)準(zhǔn)抬升卡片信息密度高、內(nèi)邊距最小化圖片主導(dǎo)的卡片使用滿幅圖 文字疊加或置于圖下4.3 輸入框與表單文字 Uber Black、背景 Pure White邊框1px 純黑——全系統(tǒng)唯一醒目出現(xiàn)可見邊框的地方圓角8px內(nèi)邊距標(biāo)準(zhǔn)舒適間距焦點(diǎn)無自定義焦點(diǎn)態(tài)依賴瀏覽器標(biāo)準(zhǔn)焦點(diǎn)環(huán)在 components.html 中.field input:focus實(shí)際補(bǔ)充了box-shadow: 0 0 0 2px rgba(0,0,0,0.1)的輕量焦點(diǎn)增強(qiáng)占位符使用--meta灰。4.4 導(dǎo)航白色背景粘性頂欄Logo 為 24×24px 黑色 Uber 字標(biāo)/圖標(biāo)鏈接UberMoveText 14–18px、字重 500、Uber Black膠囊形導(dǎo)航 chipsChip Gray 底用于分類導(dǎo)航Ride/Réserver、Drive/Conduire、Business/Entreprise、Uber Eats菜單開關(guān)50% 圓角的圓形按鈕移動端使用漢堡菜單4.5 圖片處理功能區(qū)塊使用溫暖的手繪插畫場景而非照片插畫風(fēng)格略風(fēng)格化的人物、插畫內(nèi)暖色調(diào)、當(dāng)代氛圍Hero 區(qū)塊使用大膽照片或插畫作為全寬背景應(yīng)用下載 CTA 使用 QR 碼卡片內(nèi)的所有圖片統(tǒng)一使用 8px 或 12px 圓角4.6 三個(gè)標(biāo)志性組件分類膠囊導(dǎo)航一排橫向膠囊按鈕構(gòu)成一級導(dǎo)航每顆膠囊為 Chip Gray 底 黑字 999px 圓角激活態(tài)反轉(zhuǎn)成黑底白字。雙動作 Hero左右分欄——左側(cè)文字/CTA右側(cè)地圖/插畫卡片上下并排兩個(gè)出發(fā)/目的地輸入框黑色膠囊 See prices/Voir les prix CTA 按鈕。該結(jié)構(gòu)在 components.html 中被完整實(shí)現(xiàn).hero-grid雙列網(wǎng)格 .chip-row膠囊導(dǎo)航 .field雙輸入 .btn-black全寬 CTA。Plan-Ahead 卡片推廣 Uber Reserve 與行程規(guī)劃類功能插畫豐富、人物溫暖底部為黑底白字 CTA 按鈕。5. 布局原則5.1 間距系統(tǒng)基礎(chǔ)單位8px完整刻度4px、6px、8px、10px、12px、14px、16px、18px、20px、24px、32px按鈕內(nèi)邊距10px 12px緊湊或 14px 16px舒適卡片內(nèi)邊距約 24–32px區(qū)塊垂直間距慷慨但高效主區(qū)塊間約 64–96pxtokens.css 將間距固化為--space-1至--space-12并將區(qū)塊節(jié)奏參數(shù)化為--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px——即文檔64–96px區(qū)間的工程化取值。5.2 網(wǎng)格與容器容器最大寬度約1136px居中Hero左右分欄左文右圖功能區(qū)塊2 列卡片網(wǎng)格或單列全寬頁腳黑底多列鏈接網(wǎng)格全寬區(qū)塊延伸到視口邊緣5.3 留白哲學(xué)高效而非空靈Uber 的留白是功能性的——足以分隔絕不顯得空曠。這是交通系統(tǒng)的間距緊湊、清晰、目標(biāo)驅(qū)動。內(nèi)容密集型卡片卡片以最小內(nèi)部間距密集打包信息靠陰影與圓角界定邊界。區(qū)塊呼吸空間主區(qū)塊獲得慷慨的垂直間距但區(qū)塊內(nèi)部元素緊密成組。5.4 圓角刻度級別取值用途銳角0px交互元素不使用方角標(biāo)準(zhǔn)8px內(nèi)容卡片、輸入框、列表框舒適12px主推卡片、大型容器、鏈接卡片完整膠囊999px所有按鈕、chips、導(dǎo)航項(xiàng)、膠囊圓形50%頭像、圖標(biāo)容器、圓形控件6. 深度與層級耳語級陰影層級處理用途扁平L0無陰影、純色底頁面背景、內(nèi)聯(lián)內(nèi)容、文本區(qū)微妙L1rgba(0,0,0,0.12) 0px 4px 16px標(biāo)準(zhǔn)內(nèi)容卡、功能塊中等L2rgba(0,0,0,0.16) 0px 4px 16px抬升卡片、overlay 元素懸浮L3rgba(0,0,0,0.16) 0px 2px 8px translateY(2px)懸浮動作按鈕、地圖控件下壓L4rgba(0,0,0,0.08) inset999px spread按鈕激活/按下態(tài)焦點(diǎn)環(huán)rgb(255,255,255) 0px 0px 0px 2px inset鍵盤焦點(diǎn)指示陰影哲學(xué)Uber 將陰影純粹視為結(jié)構(gòu)工具絕不做裝飾。陰影始終是極低透明度0.08–0.16的黑色只提供分離內(nèi)容層所需的最小抬升模糊半徑適中8–16px自然但絕不戲劇化沒有彩色陰影、沒有陰影堆疊、沒有環(huán)境光暈。深度更多由黑白區(qū)塊對比傳達(dá)而非陰影抬升。在工程側(cè)tailwind-v4.css 將這三檔陰影映射為--shadow-flat、--shadow-ring、--shadow-raised、--shadow-focus-ring可直接在 Tailwind v4 主題中使用。7. 該做什么與不該做什么該做Do使用真黑#000000與純白#ffffff作為主色板——強(qiáng)烈的對比本身就是 Uber所有按鈕、chips、膠囊形導(dǎo)航元素使用 999px border-radius所有標(biāo)題保持 UberMove Bold700達(dá)到廣告牌級沖擊力卡片抬升使用耳語級陰影0.12–0.16 透明度——幾乎不可見保持緊湊、信息密度高的布局——Uber 優(yōu)先效率而非空靈用溫暖、以人為中心的插畫柔化單色界面內(nèi)容卡用 8px 圓角主推容器用 12px導(dǎo)航與顯著 UI 文本使用字重 500 的 UberMoveText黑色主按鈕配白色次按鈕構(gòu)建雙動作布局不該做Dont不要在 UI 框架中引入顏色——Uber 界面嚴(yán)格黑、白、灰按鈕不要使用小于 999px 的圓角——完整膠囊形態(tài)是核心身份元素不要使用高透明度的重陰影或 drop-shadow——深度是耳語級的任何地方都不要用襯線字體——Uber 排版專屬幾何無襯線不要創(chuàng)造過度留白的空曠布局——Uber 的密度是刻意的不要使用漸變或顏色疊加——每塊表面都是扁平純色不要將 UberMove 混入正文也不要把 UberMoveText 混入標(biāo)題——層級嚴(yán)格不要使用裝飾性邊框——邊框要么功能化輸入框、分隔線要么干脆沒有不要用米白或近黑軟化黑白對比——這種二元對立是刻意的8. 響應(yīng)式行為8.1 斷點(diǎn)表名稱寬度關(guān)鍵變化小屏手機(jī)320px最小布局、單列、輸入框堆疊、緊湊排版手機(jī)600px標(biāo)準(zhǔn)移動端、堆疊布局、漢堡導(dǎo)航小平板768px雙列網(wǎng)格開始、卡片布局?jǐn)U展平板1119px完整平板布局、hero 內(nèi)容并排小桌面1120px桌面網(wǎng)格激活、橫向?qū)Ш侥z囊桌面1136px完整桌面布局、容器最大寬度、分欄 hero8.2 觸控目標(biāo)所有膠囊按鈕最小高度 44px10–14px 垂直內(nèi)邊距 行高導(dǎo)航 chips 使用 14px 16px 的慷慨內(nèi)邊距拇指點(diǎn)按舒適圓形控件菜單、關(guān)閉50% 圓角保證大而易點(diǎn)的目標(biāo)移動端卡片表面作為整區(qū)觸控目標(biāo)8.3 折疊策略導(dǎo)航橫向膠囊導(dǎo)航折疊為漢堡菜單 圓形開關(guān)Hero分欄布局文本 地圖/視覺堆疊為單列——上文本下視覺輸入框并排的出發(fā)/目的地輸入垂直堆疊功能卡2 列網(wǎng)格折疊為全寬堆疊卡片標(biāo)題52px 顯示字號依次縮放至 36px、32px、24px、20px頁腳多列鏈接網(wǎng)格折疊為手風(fēng)琴或單列堆疊分類膠囊小屏下橫向滾動 溢出components.html 的實(shí)際實(shí)現(xiàn)采用 1023px 與 639px 兩個(gè)媒體查詢平板以下容器 gutter 從 24px 降至 16px、區(qū)塊垂直間距從 80px 降至 48px/32px.hero-grid在 1023px 以下切換為單列.features-grid依次從 3 列 → 2 列 → 1 列。8.4 圖片行為插畫在容器內(nèi)等比縮放Hero 圖片保持寬高比小屏可能裁剪QR 碼區(qū)塊在移動端隱藏應(yīng)用下載切換為直接商店鏈接卡片圖片在所有尺寸下保持 8–12px 圓角9. Agent 提示詞指南讓編碼代理生成 Uber 風(fēng)格界面這一節(jié)是該設(shè)計(jì)系統(tǒng)在 OpenDesign 工作流中的落地接口——DESIGN-fr.md 明確面向 AgentClaude Code、Codex、Cursor 等提供可復(fù)制的提示詞模板。9.1 快速顏色速查表元素提示詞中應(yīng)寫主按鈕Uber Black (#000000)頁面背景Pure White (#ffffff)按鈕文字黑底Pure White (#ffffff)按鈕文字白底Uber Black (#000000)次級文本Body Gray (#4b4b4b)三級文本Muted Gray (#afafaf)Chip 背景Chip Gray (#efefef)Hover 態(tài)Hover Gray (#e2e2e2)卡片陰影rgba(0,0,0,0.12) 0px 4px 16px頁腳背景Uber Black (#000000)9.2 組件提示詞示例可直接復(fù)制Hero 區(qū)塊在 Pure White (#ffffff) 上創(chuàng)建 hero 區(qū)塊標(biāo)題為 52px UberMove Bold (700)、行高 1.23、Uber Black (#000000) 文字。副標(biāo)題用 Body Gray (#4b4b4b)、16px UberMoveText、字重 400、行高 1.50。放置一個(gè) Uber Black (#000000) 膠囊 CTA 按鈕白字、999px 圓角、內(nèi)邊距 10px 12px。分類導(dǎo)航欄設(shè)計(jì)一個(gè)帶橫向膠囊按鈕的分類導(dǎo)航欄。每顆膠囊Chip Gray (#efefef) 背景、Uber Black (#000000) 文字、14px 16px 內(nèi)邊距、999px border-radius。激活膠囊反轉(zhuǎn)成 Uber Black 背景 Pure White 文字。使用 14px 字重 500 的 UberMoveText。功能卡片在 Pure White (#ffffff) 上構(gòu)建 8px 圓角、陰影 rgba(0,0,0,0.12) 0px 4px 16px 的功能卡。標(biāo)題用 24px 字重 700 的 UberMove描述用 Body Gray (#4b4b4b) 16px UberMoveText。底部添加黑色膠囊 CTA 按鈕。深色頁腳在 Uber Black (#000000) 上創(chuàng)建深色頁腳標(biāo)題文字 Pure White (#ffffff)、UberMove 20px 字重 700。頁腳鏈接用 Muted Gray (#afafaf)、14px UberMoveTexthover 變 Pure White。多列網(wǎng)格布局。懸浮動作按鈕設(shè)計(jì)一個(gè)懸浮動作按鈕Pure White (#ffffff) 背景、999px 圓角、14px 內(nèi)邊距、陰影 rgba(0,0,0,0.16) 0px 2px 8px。Hover 背景變?yōu)?#f3f3f3。用于回到頂部或地圖控件。9.3 迭代指南一次只聚焦一個(gè)組件引用嚴(yán)格的黑白調(diào)色板——寫 使用 Uber Black (#000000) 而非 弄暗一點(diǎn)始終為按鈕與膠囊指定 999px 圓角——這是 Uber 身份不可妥協(xié)的元素顯式描述字體家族——標(biāo)題用 UberMove Bold標(biāo)簽用 UberMoveText Medium陰影使用耳語陰影rgba(0,0,0,0.12) 0px 4px 16px——絕不用厚重的 drop-shadow保持布局緊湊、信息密集——Uber 高效而非空靈插畫要溫暖而人性化——描述暖色調(diào)中的風(fēng)格化人物而非抽象形狀黑色 CTA 配白色次級按鈕構(gòu)成平衡的雙動作布局附Uber 設(shè)計(jì)系統(tǒng)包在倉庫中的工程資產(chǎn)該設(shè)計(jì)系統(tǒng)在 OpenDesign 中并非孤立文檔而是一個(gè)完整的、可審計(jì)的包結(jié)構(gòu)詳見 manifest.jsonschemaVersion: od-design-system-project/v1DESIGN.md英文規(guī)范主文檔本文所講法語版 DESIGN-fr.md 的對應(yīng)原文另有 DESIGN-zh.md 等 20 種語言版本tokens.css56 個(gè) CSS 自定義屬性令牌含完整注釋說明每個(gè)設(shè)計(jì)決策的來源品牌身份三段論、schema 決策design-tokens.json結(jié)構(gòu)化令牌清單56 個(gè)令牌全部有source溯源到 tokens.css 行號分層統(tǒng)計(jì)A1-identity 8 個(gè)、A1-structure 18 個(gè)、A2 26 個(gè)、B-slot 4 個(gè)tailwind-v4.cssTailwind v4theme映射層將 tokens.css 橋接到--color-*、--spacing-*、--radius-*、--shadow-*等 Tailwind 命名空間components.html39 個(gè)選擇器、19 個(gè)類、21 個(gè)元素的參考實(shí)現(xiàn) fixture覆蓋 hero、features、dark footer 三大區(qū)塊components.manifest.json組件清單buttons、inputs、cards、badges、links、icons、typography、layout 8 個(gè)分組記錄每個(gè)組件引用的令牌USAGE.md包使用指南——先讀它理解契約再讀 DESIGN.md將 tokens.css 粘貼進(jìn)首個(gè) artifact 的style塊后再寫組件 CSSpreview/colors.html、typography.html、spacing.html 三個(gè)可視化預(yù)覽頁用于視覺抽查source/evidence.md、tokens.source.json、token-contract.report.json 審計(jì)證據(jù)使用順序建議遵循 USAGE.md 的 Read Order先讀本文/ DESIGN-fr.md 建立視覺意圖與約束 → 把 tokens.css 完整復(fù)制進(jìn)生成物首個(gè)style塊 → 用 components.manifest.json 快速檢索組件需要精確選擇器或狀態(tài)時(shí)打開 components.html → 需要視覺校驗(yàn)時(shí)查看 preview/ 頁面。其中一條重要約束是不要脫離 tokens.css 單獨(dú)重定義 Tailwind 或 design-token 值也不要新增 components.html 與 DESIGN.md 中不存在的組件配方從而保證跨品牌切換時(shí)令牌命名保持穩(wěn)定。贊分享AI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成【免費(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點(diǎn)擊查看免費(fèi)下載相關(guān)推薦OpenDesign 中的 NVIDIA 設(shè)計(jì)系統(tǒng)從品牌信號色到 Agent 可執(zhí)行的組件規(guī)范OpenDesign 中的 NVIDIA 設(shè)計(jì)系統(tǒng)從品牌信號色到 Agent 可執(zhí)行的組件規(guī)范 本文以倉庫文檔 design systems/nvidia/DAI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成OpenDesign Contemporary 設(shè)計(jì)系統(tǒng)實(shí)戰(zhàn)解析從設(shè)計(jì)令牌到 Agent 可執(zhí)行的設(shè)計(jì)規(guī)范OpenDesign Contemporary 設(shè)計(jì)系統(tǒng)實(shí)戰(zhàn)解析從設(shè)計(jì)令牌到 Agent 可執(zhí)行的設(shè)計(jì)規(guī)范 Contemporary 是 OpenDesignAI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成Open Design 中的 Uber 風(fēng)格設(shè)計(jì)系統(tǒng)黑白二元、全藥丸組件與可執(zhí)行的 Agent 設(shè)計(jì)規(guī)范Open Design 中的 Uber 風(fēng)格設(shè)計(jì)系統(tǒng)黑白二元、全藥丸組件與可執(zhí)行的 Agent 設(shè)計(jì)規(guī)范 本文以 design systems/uber/DEAI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 OpenDesign 中的 Uber 設(shè)計(jì)系統(tǒng)：從黑白色板到 Agent 可執(zhí)行的完整設(shè)計(jì)規(guī)范
AI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成【免費(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點(diǎn)擊查看免費(fèi)下載本文圍繞 OpenDesign 倉庫中 design-systems/uber/DESIGN-fr.md法語版對應(yīng)英文原版 design-systems/uber/DESIGN.md展開。該文檔完整定義了 Uber 風(fēng)格設(shè)計(jì)系統(tǒng)的視覺語言——純黑純白、膠囊形交互元素、UberMove 字體層級與低透明度陰影體系并配套 tokens.css、components.html、tailwind-v4.css 等可直接落地的工程資產(chǎn)。讀完本文你將掌握這套設(shè)計(jì)系統(tǒng)從色彩令牌、排版規(guī)則到組件樣式、響應(yīng)式策略的完整規(guī)格并能在 Claude Code、Codex、Cursor 等 Agent 環(huán)境中用文中給出的提示詞模板讓編碼代理直接產(chǎn)出高保真的 Uber 風(fēng)格原型、落地頁或儀表盤。1. 視覺主題與氛圍自信的極簡主義Uber 的設(shè)計(jì)語言是有底氣留白的極簡主義教科書——整個(gè)體驗(yàn)建立在墨黑#000000與純白#ffffff的鋒利二元對立之上UI 框架中幾乎沒有中間灰階來稀釋信息。這不是一家尚未完成設(shè)計(jì)的初創(chuàng)公司那種蒼白極簡而是一個(gè)足夠成熟、敢于輕聲說話的品牌所展現(xiàn)的克制。這種克制在排版上體現(xiàn)為簽名式字體UberMove一款具有明顯方形、工程感氣質(zhì)的專有幾何無襯線字體。52px 的 UberMove Bold 標(biāo)題帶有廣告牌般的重量感配套的UberMoveText以中等字重500承擔(dān)正文與按鈕文字更柔和、更易讀。兩者共同構(gòu)成一套像交通圖一樣的排版系統(tǒng)清晰、高效、為快速掃讀而生。真正讓 Uber 風(fēng)格與眾不同的是滿幅攝影/插畫 膠囊形border-radius 999px交互元素的組合。導(dǎo)航 chips、CTA 按鈕、分類選擇器共享這種膠囊形態(tài)形成一種觸感友好、適合拇指操作的界面語言。溫暖的、略帶風(fēng)格化的人物插畫司機(jī)、乘客、城市景觀為人本可能冷冰冰的單色系統(tǒng)注入了人情味。頁面在白色內(nèi)容區(qū)與全黑頁腳之間交替卡片布局使用最輕柔的陰影rgba(0,0,0,0.12-0.16)在不破壞扁平美學(xué)的前提下制造輕微抬升。關(guān)鍵特征速覽純黑純白基底UI 框架幾乎無中間灰階UberMove標(biāo)題 UberMoveText正文/UI雙字體系統(tǒng)萬物皆膠囊按鈕、chips、導(dǎo)航項(xiàng)一律 999px border-radius溫暖人物插畫與冷峻單色界面形成對比卡片布局使用耳語級陰影0.12–0.16 透明度8px 間距網(wǎng)格布局緊湊、信息密度高滿幅攝影用作 hero 背景黑色頁腳以高對比度暗色環(huán)境錨定頁面2. 色彩系統(tǒng)二元對立中的完整角色分工Uber 色彩系統(tǒng)的核心是沒有漸變。黑白二元與扁平色塊構(gòu)成了全部視覺層級——每一塊表面都是純色每一次過渡都是硬邊或陰影。倉庫中的 tokens.css 將這套角色分工固化為 56 個(gè)結(jié)構(gòu)化令牌design-tokens.json統(tǒng)計(jì)totalTokens: 56評分score: 100/grade: excellent可直接在 CSS 中使用。2.1 主色令牌值角色--bg/--surface#ffffff頁面底色與卡片表面卡片靠陰影而非顏色區(qū)分--fg/--fg-2#000000真正無妥協(xié)的黑色用于主按鈕、標(biāo)題、導(dǎo)航文本、頁腳2.2 交互態(tài)與按鈕令牌值角色--accent-hoverHover Gray#e2e2e2白色按鈕 hover 態(tài)——干凈偏冷的淺灰反饋清晰而無溫度Hover Light#f3f3f3懸浮白色按鈕的微妙 hover幾乎不可察覺Chip Gray#efefef次級/篩選按鈕與導(dǎo)航 chips 的底色2.3 文本與內(nèi)容令牌值角色--mutedBody Gray#4b4b4b次級文本與頁腳鏈接無冷暖偏置的真正中灰--metaMuted Gray#afafaf三級文本、弱化頁腳鏈接、占位內(nèi)容2.4 邊框與層級令牌值角色--border#0000001px 結(jié)構(gòu)邊框僅用于分隔線與表單容器惜用--border-softrgba(0,0,0,0.1)chip/卡片分隔--elev-raisedrgba(0,0,0,0.12) 0px 4px 16px 0px卡片標(biāo)準(zhǔn)抬升耳語級陰影中檔rgba(0,0,0,0.16)懸浮按鈕與 overlay--accent-activeButton Pressrgba(0,0,0,0.08)inset次級按鈕按下態(tài)的內(nèi)陰影--focus-ringrgb(255,255,255) 0px 0px 0px 2px inset鍵盤焦點(diǎn)指示器2.5 鏈接態(tài)與語義色Default Link Blue#0000ee正文中帶下劃線的標(biāo)準(zhǔn)瀏覽器藍(lán)Link White#ffffff深色表面頁腳、暗色區(qū)上的鏈接Link Black#000000淺色表面上的下劃線鏈接需要特別指出的是tokens.css 中的設(shè)計(jì)決策注釋明確寫道在純黑白系統(tǒng)中黑色本身就是主 CTA 色--accent: #000000。與此同時(shí)令牌表還保留了--success: #16a34a、--warn: #eab308、--danger: #dc2626三個(gè)語義色用于狀態(tài)反饋但這三個(gè)顏色不應(yīng)出現(xiàn)在界面框架UI chrome中。3. 排版規(guī)則雙字體、嚴(yán)格分工3.1 字體家族與替代方案--font-display: UberMove, UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;注意UberMove 與 UberMoveText 均為專有字體。外部實(shí)現(xiàn)中建議使用system-ui或 Inter 作為最接近的替代UberMove 的幾何方形特質(zhì)可用 Inter 或 DM Sans 近似。3.2 完整字號層級表角色字體字號字重行高說明Display/HeroUberMove52px (3.25rem)7001.23緊湊最大沖擊力廣告牌存在感區(qū)塊標(biāo)題UberMove36px (2.25rem)7001.22緊湊主要區(qū)塊錨點(diǎn)卡片標(biāo)題UberMove32px (2rem)7001.25緊湊卡片與功能標(biāo)題副標(biāo)題UberMove24px (1.5rem)7001.33次級區(qū)塊標(biāo)題小標(biāo)題UberMove20px (1.25rem)7001.40緊湊標(biāo)題、列表標(biāo)題導(dǎo)航/大 UIUberMoveText18px (1.13rem)5001.33導(dǎo)航鏈接、顯著 UI 文本正文/按鈕UberMoveText16px (1rem)400–5001.25–1.50標(biāo)準(zhǔn)正文、按鈕標(biāo)簽說明文字UberMoveText14px (0.88rem)400–5001.14–1.43元數(shù)據(jù)、描述、小鏈接MicroUberMoveText12px (0.75rem)4001.67舒展小字、法律文本components.html 的源碼印證了這套規(guī)則h1, h2, h3統(tǒng)一使用var(--font-display)且font-weight: 700始終加粗——廣告牌級力量h1采用--text-4xl--leading-tight1.23且無字距h2行高 1.22h3行高 1.33與規(guī)范表一一對應(yīng)。3.3 四條鐵律標(biāo)題加粗、正文中重UberMove 標(biāo)題只允許字重 700正文/UI 用 UberMoveText 400–500通過字重對比建立視覺層級。標(biāo)題行高收緊所有標(biāo)題行高 1.22–1.40緊湊有力適合掃讀而非精讀。功能型排版全系統(tǒng)沒有任何裝飾性文字處理——無字距、無大小寫轉(zhuǎn)換、無裝飾性字號每個(gè)文本元素都服務(wù)于直接溝通。雙字體、嚴(yán)格分工UberMove 只用于標(biāo)題UberMoveText 只用于正文、按鈕、鏈接與 UI邊界從不逾越。tokens.css 中--tracking-display: normal正是這一功能性排版原則的工程落地。4. 組件樣式規(guī)格4.1 按鈕體系主按鈕·黑CTA背景Uber Black#000000文字Pure White#ffffff內(nèi)邊距10px 12px圓角999px完整膠囊無描邊焦點(diǎn)內(nèi)嵌環(huán)rgb(255,255,255) 0px 0px 0px 2px大膽、高對比、不可錯(cuò)過的首要動作按鈕次級按鈕·白背景Pure White文字Uber Black內(nèi)邊距10px 12px圓角999pxHover背景變?yōu)?Hover Gray#e2e2e2Focus背景變灰并出現(xiàn)內(nèi)嵌環(huán)用于深色表面或與主黑按鈕組成雙動作布局Chip/篩選背景Chip Gray#efefef文字Uber Black內(nèi)邊距14px 16px圓角999px激活態(tài)內(nèi)陰影rgba(0,0,0,0.08)用于導(dǎo)航 chips、分類選擇器、篩選開關(guān)懸浮動作按鈕背景Pure White文字Uber Black內(nèi)邊距14px圓角999px陰影rgba(0,0,0,0.16) 0px 2px 8px 0px位移translateY(2px)Hover背景變?yōu)?f3f3f3用于地圖控件、回到頂部、懸浮 CTAcomponents.html 中的.btn實(shí)現(xiàn)補(bǔ)充了工程細(xì)節(jié)按鈕采用inline-flexgap: var(--space-2)transition: background-color var(--motion-fast) var(--ease-standard)150ms cubic-bezier(0.2, 0, 0, 1).btn-black:hover微調(diào)為#222.btn-white用 1px--border-soft描邊界定邊界。4.2 卡片與容器背景白頁上的 Pure White卡片與背景不做色彩區(qū)分默認(rèn)無邊框——卡片靠陰影而非描邊定義圓角普通內(nèi)容卡 8px主推/促銷卡 12px陰影rgba(0,0,0,0.12) 0px 4px 16px 0px標(biāo)準(zhǔn)抬升卡片信息密度高、內(nèi)邊距最小化圖片主導(dǎo)的卡片使用滿幅圖 文字疊加或置于圖下4.3 輸入框與表單文字 Uber Black、背景 Pure White邊框1px 純黑——全系統(tǒng)唯一醒目出現(xiàn)可見邊框的地方圓角8px內(nèi)邊距標(biāo)準(zhǔn)舒適間距焦點(diǎn)無自定義焦點(diǎn)態(tài)依賴瀏覽器標(biāo)準(zhǔn)焦點(diǎn)環(huán)在 components.html 中.field input:focus實(shí)際補(bǔ)充了box-shadow: 0 0 0 2px rgba(0,0,0,0.1)的輕量焦點(diǎn)增強(qiáng)占位符使用--meta灰。4.4 導(dǎo)航白色背景粘性頂欄Logo 為 24×24px 黑色 Uber 字標(biāo)/圖標(biāo)鏈接UberMoveText 14–18px、字重 500、Uber Black膠囊形導(dǎo)航 chipsChip Gray 底用于分類導(dǎo)航Ride/Réserver、Drive/Conduire、Business/Entreprise、Uber Eats菜單開關(guān)50% 圓角的圓形按鈕移動端使用漢堡菜單4.5 圖片處理功能區(qū)塊使用溫暖的手繪插畫場景而非照片插畫風(fēng)格略風(fēng)格化的人物、插畫內(nèi)暖色調(diào)、當(dāng)代氛圍Hero 區(qū)塊使用大膽照片或插畫作為全寬背景應(yīng)用下載 CTA 使用 QR 碼卡片內(nèi)的所有圖片統(tǒng)一使用 8px 或 12px 圓角4.6 三個(gè)標(biāo)志性組件分類膠囊導(dǎo)航一排橫向膠囊按鈕構(gòu)成一級導(dǎo)航每顆膠囊為 Chip Gray 底 黑字 999px 圓角激活態(tài)反轉(zhuǎn)成黑底白字。雙動作 Hero左右分欄——左側(cè)文字/CTA右側(cè)地圖/插畫卡片上下并排兩個(gè)出發(fā)/目的地輸入框黑色膠囊 See prices/Voir les prix CTA 按鈕。該結(jié)構(gòu)在 components.html 中被完整實(shí)現(xiàn).hero-grid雙列網(wǎng)格 .chip-row膠囊導(dǎo)航 .field雙輸入 .btn-black全寬 CTA。Plan-Ahead 卡片推廣 Uber Reserve 與行程規(guī)劃類功能插畫豐富、人物溫暖底部為黑底白字 CTA 按鈕。5. 布局原則5.1 間距系統(tǒng)基礎(chǔ)單位8px完整刻度4px、6px、8px、10px、12px、14px、16px、18px、20px、24px、32px按鈕內(nèi)邊距10px 12px緊湊或 14px 16px舒適卡片內(nèi)邊距約 24–32px區(qū)塊垂直間距慷慨但高效主區(qū)塊間約 64–96pxtokens.css 將間距固化為--space-1至--space-12并將區(qū)塊節(jié)奏參數(shù)化為--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px——即文檔64–96px區(qū)間的工程化取值。5.2 網(wǎng)格與容器容器最大寬度約1136px居中Hero左右分欄左文右圖功能區(qū)塊2 列卡片網(wǎng)格或單列全寬頁腳黑底多列鏈接網(wǎng)格全寬區(qū)塊延伸到視口邊緣5.3 留白哲學(xué)高效而非空靈Uber 的留白是功能性的——足以分隔絕不顯得空曠。這是交通系統(tǒng)的間距緊湊、清晰、目標(biāo)驅(qū)動。內(nèi)容密集型卡片卡片以最小內(nèi)部間距密集打包信息靠陰影與圓角界定邊界。區(qū)塊呼吸空間主區(qū)塊獲得慷慨的垂直間距但區(qū)塊內(nèi)部元素緊密成組。5.4 圓角刻度級別取值用途銳角0px交互元素不使用方角標(biāo)準(zhǔn)8px內(nèi)容卡片、輸入框、列表框舒適12px主推卡片、大型容器、鏈接卡片完整膠囊999px所有按鈕、chips、導(dǎo)航項(xiàng)、膠囊圓形50%頭像、圖標(biāo)容器、圓形控件6. 深度與層級耳語級陰影層級處理用途扁平L0無陰影、純色底頁面背景、內(nèi)聯(lián)內(nèi)容、文本區(qū)微妙L1rgba(0,0,0,0.12) 0px 4px 16px標(biāo)準(zhǔn)內(nèi)容卡、功能塊中等L2rgba(0,0,0,0.16) 0px 4px 16px抬升卡片、overlay 元素懸浮L3rgba(0,0,0,0.16) 0px 2px 8px translateY(2px)懸浮動作按鈕、地圖控件下壓L4rgba(0,0,0,0.08) inset999px spread按鈕激活/按下態(tài)焦點(diǎn)環(huán)rgb(255,255,255) 0px 0px 0px 2px inset鍵盤焦點(diǎn)指示陰影哲學(xué)Uber 將陰影純粹視為結(jié)構(gòu)工具絕不做裝飾。陰影始終是極低透明度0.08–0.16的黑色只提供分離內(nèi)容層所需的最小抬升模糊半徑適中8–16px自然但絕不戲劇化沒有彩色陰影、沒有陰影堆疊、沒有環(huán)境光暈。深度更多由黑白區(qū)塊對比傳達(dá)而非陰影抬升。在工程側(cè)tailwind-v4.css 將這三檔陰影映射為--shadow-flat、--shadow-ring、--shadow-raised、--shadow-focus-ring可直接在 Tailwind v4 主題中使用。7. 該做什么與不該做什么該做Do使用真黑#000000與純白#ffffff作為主色板——強(qiáng)烈的對比本身就是 Uber所有按鈕、chips、膠囊形導(dǎo)航元素使用 999px border-radius所有標(biāo)題保持 UberMove Bold700達(dá)到廣告牌級沖擊力卡片抬升使用耳語級陰影0.12–0.16 透明度——幾乎不可見保持緊湊、信息密度高的布局——Uber 優(yōu)先效率而非空靈用溫暖、以人為中心的插畫柔化單色界面內(nèi)容卡用 8px 圓角主推容器用 12px導(dǎo)航與顯著 UI 文本使用字重 500 的 UberMoveText黑色主按鈕配白色次按鈕構(gòu)建雙動作布局不該做Dont不要在 UI 框架中引入顏色——Uber 界面嚴(yán)格黑、白、灰按鈕不要使用小于 999px 的圓角——完整膠囊形態(tài)是核心身份元素不要使用高透明度的重陰影或 drop-shadow——深度是耳語級的任何地方都不要用襯線字體——Uber 排版專屬幾何無襯線不要創(chuàng)造過度留白的空曠布局——Uber 的密度是刻意的不要使用漸變或顏色疊加——每塊表面都是扁平純色不要將 UberMove 混入正文也不要把 UberMoveText 混入標(biāo)題——層級嚴(yán)格不要使用裝飾性邊框——邊框要么功能化輸入框、分隔線要么干脆沒有不要用米白或近黑軟化黑白對比——這種二元對立是刻意的8. 響應(yīng)式行為8.1 斷點(diǎn)表名稱寬度關(guān)鍵變化小屏手機(jī)320px最小布局、單列、輸入框堆疊、緊湊排版手機(jī)600px標(biāo)準(zhǔn)移動端、堆疊布局、漢堡導(dǎo)航小平板768px雙列網(wǎng)格開始、卡片布局?jǐn)U展平板1119px完整平板布局、hero 內(nèi)容并排小桌面1120px桌面網(wǎng)格激活、橫向?qū)Ш侥z囊桌面1136px完整桌面布局、容器最大寬度、分欄 hero8.2 觸控目標(biāo)所有膠囊按鈕最小高度 44px10–14px 垂直內(nèi)邊距 行高導(dǎo)航 chips 使用 14px 16px 的慷慨內(nèi)邊距拇指點(diǎn)按舒適圓形控件菜單、關(guān)閉50% 圓角保證大而易點(diǎn)的目標(biāo)移動端卡片表面作為整區(qū)觸控目標(biāo)8.3 折疊策略導(dǎo)航橫向膠囊導(dǎo)航折疊為漢堡菜單 圓形開關(guān)Hero分欄布局文本 地圖/視覺堆疊為單列——上文本下視覺輸入框并排的出發(fā)/目的地輸入垂直堆疊功能卡2 列網(wǎng)格折疊為全寬堆疊卡片標(biāo)題52px 顯示字號依次縮放至 36px、32px、24px、20px頁腳多列鏈接網(wǎng)格折疊為手風(fēng)琴或單列堆疊分類膠囊小屏下橫向滾動 溢出components.html 的實(shí)際實(shí)現(xiàn)采用 1023px 與 639px 兩個(gè)媒體查詢平板以下容器 gutter 從 24px 降至 16px、區(qū)塊垂直間距從 80px 降至 48px/32px.hero-grid在 1023px 以下切換為單列.features-grid依次從 3 列 → 2 列 → 1 列。8.4 圖片行為插畫在容器內(nèi)等比縮放Hero 圖片保持寬高比小屏可能裁剪QR 碼區(qū)塊在移動端隱藏應(yīng)用下載切換為直接商店鏈接卡片圖片在所有尺寸下保持 8–12px 圓角9. Agent 提示詞指南讓編碼代理生成 Uber 風(fēng)格界面這一節(jié)是該設(shè)計(jì)系統(tǒng)在 OpenDesign 工作流中的落地接口——DESIGN-fr.md 明確面向 AgentClaude Code、Codex、Cursor 等提供可復(fù)制的提示詞模板。9.1 快速顏色速查表元素提示詞中應(yīng)寫主按鈕Uber Black (#000000)頁面背景Pure White (#ffffff)按鈕文字黑底Pure White (#ffffff)按鈕文字白底Uber Black (#000000)次級文本Body Gray (#4b4b4b)三級文本Muted Gray (#afafaf)Chip 背景Chip Gray (#efefef)Hover 態(tài)Hover Gray (#e2e2e2)卡片陰影rgba(0,0,0,0.12) 0px 4px 16px頁腳背景Uber Black (#000000)9.2 組件提示詞示例可直接復(fù)制Hero 區(qū)塊在 Pure White (#ffffff) 上創(chuàng)建 hero 區(qū)塊標(biāo)題為 52px UberMove Bold (700)、行高 1.23、Uber Black (#000000) 文字。副標(biāo)題用 Body Gray (#4b4b4b)、16px UberMoveText、字重 400、行高 1.50。放置一個(gè) Uber Black (#000000) 膠囊 CTA 按鈕白字、999px 圓角、內(nèi)邊距 10px 12px。分類導(dǎo)航欄設(shè)計(jì)一個(gè)帶橫向膠囊按鈕的分類導(dǎo)航欄。每顆膠囊Chip Gray (#efefef) 背景、Uber Black (#000000) 文字、14px 16px 內(nèi)邊距、999px border-radius。激活膠囊反轉(zhuǎn)成 Uber Black 背景 Pure White 文字。使用 14px 字重 500 的 UberMoveText。功能卡片在 Pure White (#ffffff) 上構(gòu)建 8px 圓角、陰影 rgba(0,0,0,0.12) 0px 4px 16px 的功能卡。標(biāo)題用 24px 字重 700 的 UberMove描述用 Body Gray (#4b4b4b) 16px UberMoveText。底部添加黑色膠囊 CTA 按鈕。深色頁腳在 Uber Black (#000000) 上創(chuàng)建深色頁腳標(biāo)題文字 Pure White (#ffffff)、UberMove 20px 字重 700。頁腳鏈接用 Muted Gray (#afafaf)、14px UberMoveTexthover 變 Pure White。多列網(wǎng)格布局。懸浮動作按鈕設(shè)計(jì)一個(gè)懸浮動作按鈕Pure White (#ffffff) 背景、999px 圓角、14px 內(nèi)邊距、陰影 rgba(0,0,0,0.16) 0px 2px 8px。Hover 背景變?yōu)?#f3f3f3。用于回到頂部或地圖控件。9.3 迭代指南一次只聚焦一個(gè)組件引用嚴(yán)格的黑白調(diào)色板——寫 使用 Uber Black (#000000) 而非 弄暗一點(diǎn)始終為按鈕與膠囊指定 999px 圓角——這是 Uber 身份不可妥協(xié)的元素顯式描述字體家族——標(biāo)題用 UberMove Bold標(biāo)簽用 UberMoveText Medium陰影使用耳語陰影rgba(0,0,0,0.12) 0px 4px 16px——絕不用厚重的 drop-shadow保持布局緊湊、信息密集——Uber 高效而非空靈插畫要溫暖而人性化——描述暖色調(diào)中的風(fēng)格化人物而非抽象形狀黑色 CTA 配白色次級按鈕構(gòu)成平衡的雙動作布局附Uber 設(shè)計(jì)系統(tǒng)包在倉庫中的工程資產(chǎn)該設(shè)計(jì)系統(tǒng)在 OpenDesign 中并非孤立文檔而是一個(gè)完整的、可審計(jì)的包結(jié)構(gòu)詳見 manifest.jsonschemaVersion: od-design-system-project/v1DESIGN.md英文規(guī)范主文檔本文所講法語版 DESIGN-fr.md 的對應(yīng)原文另有 DESIGN-zh.md 等 20 種語言版本tokens.css56 個(gè) CSS 自定義屬性令牌含完整注釋說明每個(gè)設(shè)計(jì)決策的來源品牌身份三段論、schema 決策design-tokens.json結(jié)構(gòu)化令牌清單56 個(gè)令牌全部有source溯源到 tokens.css 行號分層統(tǒng)計(jì)A1-identity 8 個(gè)、A1-structure 18 個(gè)、A2 26 個(gè)、B-slot 4 個(gè)tailwind-v4.cssTailwind v4theme映射層將 tokens.css 橋接到--color-*、--spacing-*、--radius-*、--shadow-*等 Tailwind 命名空間components.html39 個(gè)選擇器、19 個(gè)類、21 個(gè)元素的參考實(shí)現(xiàn) fixture覆蓋 hero、features、dark footer 三大區(qū)塊components.manifest.json組件清單buttons、inputs、cards、badges、links、icons、typography、layout 8 個(gè)分組記錄每個(gè)組件引用的令牌USAGE.md包使用指南——先讀它理解契約再讀 DESIGN.md將 tokens.css 粘貼進(jìn)首個(gè) artifact 的style塊后再寫組件 CSSpreview/colors.html、typography.html、spacing.html 三個(gè)可視化預(yù)覽頁用于視覺抽查source/evidence.md、tokens.source.json、token-contract.report.json 審計(jì)證據(jù)使用順序建議遵循 USAGE.md 的 Read Order先讀本文/ DESIGN-fr.md 建立視覺意圖與約束 → 把 tokens.css 完整復(fù)制進(jìn)生成物首個(gè)style塊 → 用 components.manifest.json 快速檢索組件需要精確選擇器或狀態(tài)時(shí)打開 components.html → 需要視覺校驗(yàn)時(shí)查看 preview/ 頁面。其中一條重要約束是不要脫離 tokens.css 單獨(dú)重定義 Tailwind 或 design-token 值也不要新增 components.html 與 DESIGN.md 中不存在的組件配方從而保證跨品牌切換時(shí)令牌命名保持穩(wěn)定。贊分享AI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成【免費(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點(diǎn)擊查看免費(fèi)下載相關(guān)推薦OpenDesign 中的 NVIDIA 設(shè)計(jì)系統(tǒng)從品牌信號色到 Agent 可執(zhí)行的組件規(guī)范OpenDesign 中的 NVIDIA 設(shè)計(jì)系統(tǒng)從品牌信號色到 Agent 可執(zhí)行的組件規(guī)范 本文以倉庫文檔 design systems/nvidia/DAI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成OpenDesign Contemporary 設(shè)計(jì)系統(tǒng)實(shí)戰(zhàn)解析從設(shè)計(jì)令牌到 Agent 可執(zhí)行的設(shè)計(jì)規(guī)范OpenDesign Contemporary 設(shè)計(jì)系統(tǒng)實(shí)戰(zhàn)解析從設(shè)計(jì)令牌到 Agent 可執(zhí)行的設(shè)計(jì)規(guī)范 Contemporary 是 OpenDesignAI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成Open Design 中的 Uber 風(fēng)格設(shè)計(jì)系統(tǒng)黑白二元、全藥丸組件與可執(zhí)行的 Agent 設(shè)計(jì)規(guī)范Open Design 中的 Uber 風(fēng)格設(shè)計(jì)系統(tǒng)黑白二元、全藥丸組件與可執(zhí)行的 Agent 設(shè)計(jì)規(guī)范 本文以 design systems/uber/DEAI 應(yīng)用人工智能AI 技能設(shè)計(jì)系統(tǒng)媒體生成創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考