この記事ではUIデザインに特化して解説します。デザインシステム・UI生成全般は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに完全解説 をご覧ください。
概要
Nothing Design Skillは、Claude Codeに対してNothingのビジュアル言語に基づくデザイン知識を提供するオープンソーススキル。モノクロ、タイポグラフィ、インダストリアルスタイルの設計原則を構造化した形式で提供する。AIとデザインの融合を模索する開発者から注目を集めている。
プロジェクトの背景には、生成AIが視覚的一貫性やブランドに特化した設計判断を苦手とする点がある。Claude Code利用時に同じデザイン規則を繰り返し説明する手間を削減するため、デザイナーの知識を再利用可能なスキルとして形式化するアプローチを採用。
主な機能
- ビジュアル言語の統一：Nothingブランド特有の色彩（OLED blacks）、タイポグラフィ（Space Grotesk + Space Mono + Doto）、コンポーネント設計（セグメント化されたプログレスバー、機械的トグル、インストルメントスタイルウィジェット）を定義
- 三層階層構造：Display、Body、Metadataレベルの視覚階層を明示
- マルチプラットフォーム対応：HTML/CSS、SwiftUI、React/Tailwindの3形式で実装例を提供
- ダーク・ライトモード対応：完全なトークンシステムで両モードをサポート
- コミュニティ主導の拡張性：オープンソース形式で新しいスキルの追加・改善が可能
クイックスタート
1. リポジトリのクローン
git clone https://github.com/dominikmartn/nothing-design-skill.git
2. スキルの インストール
nothing-designフォルダをClaudeのスキルディレクトリにコピー：
cp -r nothing-design-skill/nothing-design ~/.claude/skills/
3. Claude Codeでの使用
次回Claude Code起動時、スキルが利用可能に。以下の方法で呼び出し：
/nothing-designコマンドを使用- 「Nothing style」と指示
Claude Codeはこれらの原則に従ったUI生成を実行。
アーキテクチャ
Nothing Design Skillの構成は、デザイン知識を参照可能な形式で整理するシンプルなモジュール構造である。
nothing-design/
├── SKILL.md # デザイン哲学・ワークフロー
├── references/
│ ├── tokens.md # 色・フォント・スペーシング・モーショントークン
│ ├── components.md # ボタン・カード・リスト・テーブル・オーバーレイ
│ └── platform-mapping.md # CSS/SwiftUI/React出力マッピング
構成要素説明：
- SKILL.md：Nothingのビジュアル言語における設計原則とワークフローを記載
- tokens.md：実装に必要な色パレット、フォントスタック、スペーシング値、アニメーション定義
- components.md：UI要素ごとの実装ガイダンスと例
- platform-mapping.md：各プラットフォーム（CSS/SwiftUI/React）への設計規則の変換方法
競合ツールとの比較
| 項目 | Nothing Design Skill | 一般的なデザインシステムドキュメント | プロンプトエンジニアリングガイド |
|---|---|---|---|
| 目的 | Claude Codeへのブランド設計知識提供 | デザイン規約・コンポーネント共有 | LLMプロンプト最適化 |
| 形式 | マークダウンスキルモジュール | コンポーネントカタログ・トークン定義 | ガイドテキスト・チュートリアル |
| 対象ユーザー | Claude Code利用開発者 | デザイナー + フロントエンド開発者 | LLMエンジニア |
| AI直接統合 | ○（Claude Code機能として統合） | ×（主に人間向けドキュメント） | △（手動で文脈に含める） |
| 拡張性 | 中（Claudeのスキル形式に準拠） | 高（トークン・コンポーネント追加容易） | 中（テンプレートベース） |
| 学習曲線 | 低（Claude Codeユーザーなら即利用可） | 中（デザイン規約の理解が必要） | 低（テキストリーディング） |
ブランドデザインをMarkdown仕様書で渡すアプローチは awesome-design-md（58ブランド対応DESIGN.md集） と発想が近い。Nothing Design Skillが「スキル形式」で単一ブランドを深く表現するのに対し、awesome-design-mdはVercel・Stripe・Linearなど複数ブランドをDESIGN.md形式で横並びに提供する。併用するとClaude Codeが「どのブランド風で書くか」を切り替えやすくなる。
実践的な使い方
ユースケース1：ブランド統一されたUI生成
Claude Codeで複数のUI画面やコンポーネントを生成する際、毎回デザイン要件を説明する代わりに、Nothingスキルを参照させることで一貫性を確保。
手順：
- Claude Codeでプロジェクト開始
/nothing-designまたは「Nothing style」と入力- スキルが読み込まれ、以降の生成がNothingのビジュアル言語に従う
- HTML/CSS、SwiftUI、React/Tailwindいずれかの形式で出力受取
期待される結果：
- モノクロームパレットの統一
- Space フォントスタックの一貫適用
- セグメント化されたプログレスバーなどNothingコンポーネントの自動采用
ユースケース2：ブランドのビジュアル言語定義
新規ブランドやプロダクトのビジュアル言語を、このスキルモデルを参考に形式化。設計原則をマークダウンで記載し、チーム内で参照可能なスキルモジュールとして構築。
実装フロー：
- ブランドの色、フォント、コンポーネント規則をドキュメント化
tokens.md、components.md形式で構造化- AIアシスタントに参照させることで、設計一貫性を自動化
ユースケース3：デザイナーと開発者の協働効率化
デザイナーがNothingスキルを拡張・カスタマイズし、開発チームがClaude Codeで実装。ビジュアル仕様の解釈ズレを削減し、実装スピードアップ。
ワークフロー例：
- デザイナーが新しいコンポーネント仕様をcomponents.mdに追加
- 開発者がClaude Codeで該当コンポーネント生成を指示
- 複数プラットフォーム（CSS/SwiftUI/React）の実装が自動生成される
まとめ
Nothing Design Skillは、Claude Codeでブランド固有のビジュアル言語を確実に反映させるための実用的なスキルモジュール。次のシーンで特に有用。
推奨対象ユーザー：
- Nothingブランド採用企業の開発チーム
- Claude Codeを活用したプロトタイピング・ UI生成の効率化を求める開発者
- ブランド統一されたUI生成を自動化したいプロダクトチーム
- 既存デザインシステムをClaude Codeと連携させたい組織
利活用のポイント：
スキルモジュールはテンプレート・出発点。プロダクト固有の拡張やカスタマイズが可能。tokens.mdやcomponents.mdを自組織のガイドラインに合わせて調整することで、より高い精度を実現できる。
注意点・制限事項：
- Claude Codeの特定機能向けスキル。他のLLM/Vision APIでは直接利用不可
- スキル品質の維持にはピアレビュープロセスやメンテナーの確認体制が必要
- AIモデルが設計原則を確実に遵守する保証はない。生成結果の検証テストサイクルが重要
- Nothingブランド以外のプロダクトで使用する場合は、自ブランドの設計規則に合わせた改変が必須
デザインスキルをさらに発展させたい場合は、DESIGN.md入門でAI向けデザイン仕様書の書き方を学ぶか、Claude Designでコードベースからデザインシステムを自動構築する方法も参考になる。デザインシステムの基礎概念はデザインシステム入門ガイドで解説している。
