/ ディレクトリ / プレイグラウンド / Nothing Design Skill
● コミュニティ dominikmartn ⚡ 即起動

Nothing Design Skill

作者 dominikmartn · dominikmartn/nothing-design-skill

NothingスタイルのUIを生成 — モノクロ・ドットマトリクス・インダストリアルフォント・透明なレイヤー — inspect-elementからCSSをコピー&ペーストせずに。

Nothing Design Skillは、Nothing(スマートフォンメーカー)のブランドビジュアル言語をClaude Codeスキルとしてエンコードします。ドットマトリクスのアクセントと自信あふれるタイポグラフィを持つモノクロ・インダストリアル・ミニマルなスタイルのランディングページ・ダッシュボード・マーケティングサイト・アプリUIに使用します。言語の実際の慣習に合った慣用的な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フレーバーのランディングが欲しい場合。

前提条件
  • スキルのインストール — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
  • Tailwindプロジェクト — 既存のNext.jsまたはVite+Tailwindのセットアップ
フロー
  1. デザイントークンを設定
    Nothing-design: emit the design tokens (colors, type scale, spacing) for my Tailwind config.✓ コピーしました
    → モノクロパレット+モノ/グロテスクフォント付きのTailwind拡張スニペット
  2. ヒーローを構成
    Generate a hero section: oversized numeral '01.', headline, subhead, dot-matrix grid background. Tailwind only, no images.✓ コピーしました
    → 言語に合ったヒーローJSX
  3. 改善
    The headline should be more confident — Nothing uses high contrast and grotesk. Adjust.✓ コピーしました
    → フォントウェイトとトラッキングがブランドに合わせて変更される

結果: Nothing隣接製品に属するように見えるランディングページ。

注意点
  • 暖色系の色を追加するとビジュアル言語が崩れる — スキルはパレット外の提案を拒否できる;それを活用する
組み合わせ: filesystem · shadcn-ui-mcp

既存のダッシュボードをNothingスタイルに再スタイリングする

👤 社内ツールをメンテナンスする開発者 ⏱ ~60 min advanced

使うタイミング: 社内の管理画面がBootstrap 4のように見える;意図的に感じさせたい場合。

フロー
  1. インベントリ
    Nothing-design: scan src/components/. List components and propose a Nothing-language counterpart for each.✓ コピーしました
    → コンポーネントごとの提案
  2. 1つをリファクタ
    Refactor DataTable.tsx to the Nothing style. Mono font for numerics, dot-matrix dividers, accent only on row hover.✓ コピーしました
    → 更新されたコンポーネントが言語に合っている

結果: 一貫したモノクロのダッシュボード。

注意点
  • 一目で読みにくい — コントラストを上げる;NothingはローコントラストではなくハイコントラスA

Nothingの美学でマーケティングデッキを生成する

👤 マーケティング開発者 ⏱ ~30 min intermediate

使うタイミング: 汎用テンプレートのように見えないスライドデッキが欲しい場合。

フロー
  1. 構成
    Nothing-design: generate a 12-slide HTML deck for product launch. Use oversized numerals as section markers.✓ コピーしました
    → 言語に合った単一のHTMLデッキ

結果: 労力なしにブランドを強化するデッキ。

注意点
  • 明るいプロジェクタールームには暗すぎる — スキルには「light」反転バリアントが同梱されている — リクエストする
組み合わせ: guizang-ppt-skill

組み合わせ

他のMCPと組み合わせて10倍の力を

nothing-design-skill + shadcn-ui-mcp

shadcnコンポーネントをNothingにテーマ変更して使用する

shadcn: get Form. Nothing-design: restyle it to the brand language.✓ コピーしました
nothing-design-skill + filesystem

プロジェクト全体に適用する

Nothing-design: scan components/, propose restyles, then apply one by one.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
emit_tokens (none) プロジェクトのセットアップ 0
generate_component kind: hero|cta|table|card, content セクションを追加 0
restyle_existing path, target_kind レガシーコンポーネントを統一する 0

コストと制限

運用コスト

APIクォータ
N/A
呼び出しあたりのトークン
500〜3000
金額
無料
ヒント
トークンを一度生成し、コンポーネントを段階的にスタイリングする — 呼び出しのたびにトークンを再発行しないこと

セキュリティ

権限、シークレット、影響範囲

最小スコープ: filesystem-read filesystem-write
認証情報の保管: なし
データ送信先: なし

トラブルシューティング

よくあるエラーと対処法

Output uses other colors

再prompt:「モノクロのみ、アクセント赤は面積の<10%まで許可」

Type pairing feels off

promptで具体的なモノ+グロテスクフォントを指定する;デフォルトはJetBrains Mono+Inter

Dot-matrix background looks like noise

ドット密度を下げる;スキルのデフォルトは一部のスクリーンには密すぎる

代替案

Nothing Design Skill 他との比較

代替案代わりに使う場面トレードオフ
shadcn/ui defaultsより一般的な外見が欲しい場合汎用的;ブランドボイスなし
Tailwind UI洗練されているが汎用的なものが欲しい場合他のすべてのTailwind UIサイトのように見える
Custom design systemブランドデザイナーがいる場合遅い;高コスト

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る