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