為什么 Nothing 風(fēng)格如此高級Nothing Design Skill 單色、排版與工業(yè)美學(xué)的終極拆解【免費(fèi)下載鏈接】nothing-design-skillA Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial.項目地址: https://gitcode.com/gh_mirrors/no/nothing-design-skill一句話簡介Nothing Design Skill 是一個專為 Claude Code 打造的設(shè)計系統(tǒng)技能包讓 AI 按照 Nothing 品牌標(biāo)志性的單色、排版驅(qū)動、工業(yè)美學(xué)風(fēng)格生成 UI 界面——深色 OLED 黑、機(jī)械感進(jìn)度條、點(diǎn)陣數(shù)字高級感拉滿。上圖就是 Nothing Design Skill 生成的真實(shí)界面點(diǎn)陣數(shù)字時鐘、分段進(jìn)度條、等寬字體數(shù)據(jù)面板典型的 Nothing 設(shè)計語言。一、什么是 Nothing Design Skill如果你刷過 Nothing 的手機(jī)、耳機(jī)產(chǎn)品一定被那種黑到發(fā)亮 點(diǎn)陣數(shù)字 機(jī)械感的界面打動過。Nothing Design Skill就是把這套視覺語言打包成了一個可復(fù)用的技能包直接裝進(jìn) Claude Code。你只需要說一句 Nothing style 或輸入/nothing-designAI 就會自動遵循這套設(shè)計系統(tǒng)生成界面代碼輸出 HTML/CSS、SwiftUI 或 React/Tailwind 三種格式。它解決了一個很真實(shí)的痛點(diǎn)作者之前每次都要反復(fù)向 Claude 解釋我要瑞士排版、OLED 黑底、分段進(jìn)度條、點(diǎn)陣風(fēng)格現(xiàn)在一句話搞定。項目結(jié)構(gòu)一覽都在 nothing-design/ 目錄下文件內(nèi)容SKILL.md設(shè)計哲學(xué)、工藝規(guī)則、工作流程references/tokens.md顏色、字體、間距、動效令牌references/components.md按鈕、卡片、列表、表格等組件規(guī)范references/platform-mapping.md各平臺輸出映射CSS / SwiftUI / React二、單色美學(xué)為什么只有黑白色反而更高級普通人做界面先挑一個五彩斑斕的配色板。 Nothing 做界面先刪掉顏色。2.1 灰度本身就是層級在這套系統(tǒng)里顏色層級被嚴(yán)格限制在4 級灰度令牌不透明度用途--text-display100%主數(shù)字、標(biāo)題每屏只允許一個--text-primary90%正文、主要內(nèi)容--text-secondary60%標(biāo)簽、說明文字--text-disabled40%時間戳、弱化信息當(dāng)顏色被拿掉之后對比度、字號、間距就成了唯一的設(shè)計工具——這也逼著設(shè)計回歸信息本身。2.2 紅色是事件不是默認(rèn)值整套系統(tǒng)里唯一的強(qiáng)調(diào)色是信號紅#D71921。規(guī)則很殘酷它不屬于灰度層級是一個打斷——意思是看這里、現(xiàn)在如果沒有任何緊急信息屏幕上一個紅點(diǎn)都不該有這就是高級感的來源克制到極致一點(diǎn)紅才有分量。三、排版驅(qū)動文字就是重活主力Nothing 風(fēng)格的第二根支柱是瑞士排版?zhèn)鹘y(tǒng)。核心規(guī)則可以用一句話概括層級靠文字大小和字重建立不靠顏色、不靠圖標(biāo)、不靠邊框。3.1 三層視覺層級法則SKILL.md 中明確規(guī)定每個屏幕恰好有三層重要性多一層少一層都不行層級放什么怎么表現(xiàn)主層用戶第一眼看到的東西超大號展示字體48–96px 呼吸空間次層輔助上下文、描述正文/小標(biāo)題與主層緊密成組底層元數(shù)據(jù)、導(dǎo)航、系統(tǒng)信息等寬字體、全大寫、推到邊緣 官方給的檢驗方法很形象瞇起眼看屏幕還能不能分清什么最重要如果兩樣?xùn)|西在打架就縮小、變淡或挪走其中一個。3.2 字體預(yù)算制2 字體 3 字號 2 字重這套系統(tǒng)把字體當(dāng)預(yù)算來管字體家族最多 2 個Space Grotesk正文 Space Mono數(shù)據(jù)標(biāo)簽Doto點(diǎn)陣字體只留給主角時刻字號最多 3 個一大、一中、一小字重最多 2 個Regular 一個其他 一個實(shí)用經(jīng)驗當(dāng)你想加一個新字號時多半是間距問題——加距離而不是加字號。有趣的細(xì)節(jié)Space Grotesk 和 Space Mono 都出自 Colophon 字體廠與 Nothing 自家字體的設(shè)計血統(tǒng)相同連字體都是按神似來選的詳見 references/tokens.md 的 Typography 章節(jié)。四、工業(yè)美學(xué)把界面做成儀表盤Nothing 風(fēng)格的第三根支柱來自 Braun 和 Teenage Engineering 式的工業(yè)設(shè)計控件就該長得像控件——開關(guān)就是物理撥桿儀表盤就是儀表。4.1 標(biāo)志性組件分段進(jìn)度條這是整套系統(tǒng)最出片的組件見上方預(yù)覽圖的 CPU LOAD 和 BATTERY 區(qū)塊由一個個方形小段組成的離散進(jìn)度條2px 間隙無圓角填充部分用純色空的部分是暗色描邊視覺感受機(jī)械、精密、像老式電平表完整規(guī)范在 references/components.md 的 SEGMENTED PROGRESS BARS 一節(jié)。4.2 間距即語義這套系統(tǒng)給間距賦予了對話能力8px 基準(zhǔn)節(jié)奏間距語義緊湊4–8px這些東西是一體的圖標(biāo)標(biāo)簽、數(shù)字單位標(biāo)準(zhǔn)16px同組但不同項列表項、表單字段寬松32–48px新分組開始巨大64–96px這是全新的上下文規(guī)則毒辣但有效如果你需要一條分割線說明間距大概率不夠。分割線只是間距失效后的補(bǔ)救藥。4.3 反模式清單這些高級感殺手一律禁止SKILL.md 專門列了一頁絕不做什么堪稱反面教材合集? UI 骨架里的漸變色? 陰影、模糊——只用扁平表面 邊框分隔? 骨架屏加載動畫改用[LOADING...]文字? Toast 彈窗改用內(nèi)聯(lián)狀態(tài)文字[SAVED]? 悲傷表情插圖、可愛吉祥物? 表格斑馬紋? 彈跳緩動動畫只允許克制的 ease-out你會發(fā)現(xiàn)高級感不是加了什么而是拒絕了多少。五、暗色/亮色雙模式兩個都是一等公民很多設(shè)計系統(tǒng)的暗色模式是把亮色反一下色Nothing Design Skill 的態(tài)度完全不同暗色黑屋子里的儀表盤——OLED 純黑#000000底白色數(shù)據(jù)發(fā)光亮色印刷版技術(shù)手冊——米白紙面#F5F5F5 黑色油墨白色卡片自帶紙面浮起的微妙層次兩種模式擁有完全獨(dú)立的完整令牌表見 references/tokens.mdAI 在生成前甚至?xí)鲃訂柲阆茸霭瞪€是亮色六、如何安裝使用三步搞定 安裝方式極簡——把技能文件夾放進(jìn) Claude Code 的 skills 目錄即可git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design-skill/nothing-design ~/.claude/skills/下次啟動 Claude Code說 Nothing style 或/nothing-design技能就會自動激活。它的工作流程定義在 SKILL.md 的 Workflow 章節(jié)聲明所需字體Doto / Space Grotesk / Space Mono詢問暗色/亮色模式先草圖規(guī)劃三層視覺層級再動手按工藝規(guī)則組裝界面查令牌表取精確值查組件規(guī)范生成組件按目標(biāo)平臺Web / iOS / React映射輸出七、總結(jié)Nothing 風(fēng)格高級感的秘密配方支柱核心手法 單色4 級灰度建層級紅色只給緊急事件?? 排版三層重要性 字體預(yù)算制間距代替分割線?? 工業(yè)分段進(jìn)度條、機(jī)械開關(guān)、數(shù)據(jù)即美一句話總結(jié)這個項目的設(shè)計哲學(xué)Subtract, dont add做減法而非加法。如果你受夠了五彩斑斕的白式 AI 生成界面Nothing Design Skill 就是一個低門檻的審美外掛——不用學(xué)設(shè)計理論一句話讓 AI 替你執(zhí)行 20 年工業(yè)設(shè)計 瑞士排版的肌肉記憶。【免費(fèi)下載鏈接】nothing-design-skillA Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial.項目地址: https://gitcode.com/gh_mirrors/no/nothing-design-skill創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考