Nothing Design Skill

為什麼要用

核心特性

嚴格的單色調色板（僅白色／黑色／紅色強調色）
點陣矩陣格線背景和裝飾數字
工業字體搭配（等寬字體 + 無襯線怪誕體）
透明／玻璃層疊元件
元件配方：hero、功能格格、CTA、資料表格
Tailwind 就緒輸出

即時演示

實際使用效果

就緒

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： Nothing Design Skill

建立 Nothing 風格的登陸頁面

👤 前端開發者／設計開發者 ⏱ ~45 min intermediate

何時使用： 品牌簡報說「工業／極簡」；你想要 Nothing 風格的登陸頁面，不想從頭發明一個設計系統。

步驟

建立設計 token

Nothing-design：輸出我的 Tailwind config 的設計 token（顏色、字型比例、間距）。✓ 已複製

→ 帶有單色調色板 + 等寬／怪誕體字型的 Tailwind 擴充片段
組合 hero 區塊

生成一個 hero 區塊：超大數字「01.」、標題、副標題、點陣矩陣格線背景。只用 Tailwind，無圖片。✓ 已複製

→ 符合品牌語言的 Hero JSX
精修

標題應該更有力 — Nothing 使用高對比和怪誕體。調整。✓ 已複製

→ 字體粗細和字距改變以符合品牌

結果： 登陸頁面看起來像 Nothing 相關產品的設計。

注意事項

加入暖色系破壞了品牌語言 — Skill 在被詢問時會拒絕超出色板的建議；善用它

搭配使用： filesystem · shadcn-ui-mcp

用 Nothing 風格重新設計現有儀表板

👤 維護內部工具的開發者 ⏱ ~60 min advanced

何時使用： 內部管理介面看起來像 Bootstrap 4；你想讓它有設計感。

步驟

盤點

Nothing-design：掃描 src/components/。列出元件，並為每個提議 Nothing 語言的對應版本。✓ 已複製

→ 每個元件的提議
重構一個

以 Nothing 風格重構 DataTable.tsx。數字使用等寬字體、點陣矩陣分隔線，強調色只在行懸停時出現。✓ 已複製

→ 更新後的元件符合品牌語言

結果： 統一的單色調儀表板。

注意事項

一眼難以閱讀 — 增加對比度；Nothing 是高對比，不是低對比

生成 Nothing 美學的行銷投影片

👤 行銷開發者 ⏱ ~30 min intermediate

何時使用： 你想要一套不像通用模板的投影片。

步驟

組合

Nothing-design：為產品發表生成 12 張 HTML 投影片。使用超大數字作為章節標記。✓ 已複製

→ 符合品牌語言的單一 HTML 投影片組

結果： 不費力就能強化品牌的投影片。

注意事項

在明亮投影機房間太暗 — Skill 有「亮色」反轉版 — 請求使用它

搭配使用： guizang-ppt-skill

組合

與其他 MCP 搭配，撬動十倍槓桿

nothing-design-skill + shadcn-ui-mcp

使用 shadcn 元件，套用 Nothing 主題

shadcn：取得 Form。Nothing-design：以品牌語言重新設計它。✓ 已複製

nothing-design-skill + filesystem

套用到整個專案

Nothing-design：掃描 components/，提議重新設計，然後逐一套用。✓ 已複製

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫
emit_tokens	(none)	專案設定
generate_component	kind: hero\|cta\|table\|card, content	新增區塊
restyle_existing	path, target_kind	將舊元件統一到品牌語言

成本與限制

運行它的成本

API 配額: N/A
每次呼叫 Token 數: 500–3000
費用: 免費
提示: 只需產生一次 token，然後逐步設計元件 — 不要每次呼叫都重新產生 token

安全

權限、密鑰、影響範圍

最小權限： filesystem-read filesystem-write

憑證儲存： 無

資料出站： 無

這是愛好者的詮釋版本；與 Nothing 公司無關聯

故障排查

常見錯誤與修復

輸出使用了其他顏色

重新提示：「僅單色調，強調紅允許在小於 10% 表面積的情況下使用」

字體搭配感覺不對

在提示詞中指定確切的等寬 + 怪誕體字型；預設是 JetBrains Mono + Inter

點陣矩陣背景看起來像雜訊

降低點的密度；Skill 的預設在某些螢幕上太密

替代方案