/ 目錄 / 演練場 / Nothing Design Skill
● 社群 dominikmartn ⚡ 即開即用

Nothing Design Skill

作者 dominikmartn · dominikmartn/nothing-design-skill

生成 Nothing 美學的介面 — 單色調、點陣矩陣、工業字體、透明圖層 — 無需從開發者工具複製貼上 CSS。

Nothing Design Skill 將 Nothing 品牌語言(手機製造商的視覺識別)編碼為 Claude Code skill。當你想要那種黑白工業極簡風格搭配點陣矩陣裝飾和自信的字體排版時,可用於登陸頁面、儀表板、行銷網站或應用程式介面。輸出符合該語言實際慣例的慣用 Tailwind/CSS。

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "nothing-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "nothing-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/nothing-design-skill",
          "~/.claude/skills/nothing-design"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add nothing-design-skill -- git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Nothing Design Skill

建立 Nothing 風格的登陸頁面

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

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

前置條件
  • 已安裝 Skill — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
  • Tailwind 專案 — 現有的 Next.js 或 Vite + Tailwind 設定
步驟
  1. 建立設計 token
    Nothing-design:輸出我的 Tailwind config 的設計 token(顏色、字型比例、間距)。✓ 已複製
    → 帶有單色調色板 + 等寬/怪誕體字型的 Tailwind 擴充片段
  2. 組合 hero 區塊
    生成一個 hero 區塊:超大數字「01.」、標題、副標題、點陣矩陣格線背景。只用 Tailwind,無圖片。✓ 已複製
    → 符合品牌語言的 Hero JSX
  3. 精修
    標題應該更有力 — Nothing 使用高對比和怪誕體。調整。✓ 已複製
    → 字體粗細和字距改變以符合品牌

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

注意事項
  • 加入暖色系破壞了品牌語言 — Skill 在被詢問時會拒絕超出色板的建議;善用它
搭配使用: filesystem · shadcn-ui-mcp

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

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

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

步驟
  1. 盤點
    Nothing-design:掃描 src/components/。列出元件,並為每個提議 Nothing 語言的對應版本。✓ 已複製
    → 每個元件的提議
  2. 重構一個
    以 Nothing 風格重構 DataTable.tsx。數字使用等寬字體、點陣矩陣分隔線,強調色只在行懸停時出現。✓ 已複製
    → 更新後的元件符合品牌語言

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

注意事項
  • 一眼難以閱讀 — 增加對比度;Nothing 是高對比,不是低對比

生成 Nothing 美學的行銷投影片

👤 行銷開發者 ⏱ ~30 min intermediate

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

步驟
  1. 組合
    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) 專案設定 0
generate_component kind: hero|cta|table|card, content 新增區塊 0
restyle_existing path, target_kind 將舊元件統一到品牌語言 0

成本與限制

運行它的成本

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

安全

權限、密鑰、影響範圍

最小權限: filesystem-read filesystem-write
憑證儲存:
資料出站:

故障排查

常見錯誤與修復

輸出使用了其他顏色

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

字體搭配感覺不對

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

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

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

替代方案

Nothing Design Skill 對比其他方案

替代方案何時用它替代權衡
shadcn/ui 預設你想要更傳統的外觀通用;沒有品牌語氣
Tailwind UI你想要精緻但通用的設計看起來像所有其他 Tailwind UI 網站
自訂設計系統你有品牌設計師慢;昂貴

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills