Nothing Design Skill — インストール & ライブデモ

なぜ使うのか

主な機能

厳格なモノクロパレット（白／黒／赤アクセントのみ）
ドットマトリクスのグリッド背景と装飾的な数字
インダストリアルなフォントペアリング（モノ＋サンセリフグロテスク）
透明／グラスのレイヤードコンポーネント
コンポーネントレシピ：ヒーロー・フィーチャーグリッド・CTA・データテーブル
Tailwind対応の出力

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Nothing Design Skill

Nothingスタイルのランディングページを構築する

👤 フロントエンド開発者／デザイナー開発者 ⏱ ~45 min intermediate

使うタイミング： ブランドブリーフが「インダストリアル／ミニマル」と言っている；ゼロからシステムを発明せずにNothingフレーバーのランディングが欲しい場合。

フロー

デザイントークンを設定

Nothing-design: emit the design tokens (colors, type scale, spacing) for my Tailwind config.✓ コピーしました

→ モノクロパレット＋モノ/グロテスクフォント付きのTailwind拡張スニペット
ヒーローを構成

Generate a hero section: oversized numeral '01.', headline, subhead, dot-matrix grid background. Tailwind only, no images.✓ コピーしました

→ 言語に合ったヒーローJSX
改善

The headline should be more confident — Nothing uses high contrast and grotesk. Adjust.✓ コピーしました

→ フォントウェイトとトラッキングがブランドに合わせて変更される

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

注意点

暖色系の色を追加するとビジュアル言語が崩れる — スキルはパレット外の提案を拒否できる；それを活用する

組み合わせ： filesystem · shadcn-ui-mcp

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

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

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

フロー

インベントリ

Nothing-design: scan src/components/. List components and propose a Nothing-language counterpart for each.✓ コピーしました

→ コンポーネントごとの提案
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

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

フロー

構成

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)	プロジェクトのセットアップ
generate_component	kind: hero\|cta\|table\|card, content	セクションを追加
restyle_existing	path, target_kind	レガシーコンポーネントを統一する

コストと制限

運用コスト

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

セキュリティ

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

最小スコープ： filesystem-read filesystem-write

認証情報の保管： なし

データ送信先： なし

これはファンメイドの解釈です；Nothing（企業）とは関係ありません

トラブルシューティング

よくあるエラーと対処法

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を見る