modbender/skill-library-mcp

Design Style Skill

目的

このスキルは、Claude Codeが美しく特徴的なフロントエンドインターフェースを作成するのを支援します。prompts/ディレクトリからデザインシステムプロンプトを自動的に取得することで、汎用的なUIではなく、Neo-brutalism、Modern Dark、Luxury、Cyberpunkなどの特定のデザイン美学に基づいたインターフェースを構築できるようにします。

使用タイミング

このスキルは、以下の場合に自動的に呼び出されます:

• ユーザーがWebページ、ランディングページ、またはWebアプリケーションの構築を依頼した場合
• ユーザーが特定のデザインスタイルのUIコンポーネントを要求した場合
• ユーザーがフロントエンド、React、Vue、またはWeb開発に言及した場合
• ユーザーが特定の美学を要求した場合（例：「モダンでダークな見た目にして」「ブルータリズムスタイルを使って」）

利用可能なデザインスタイル

prompts/ディレクトリでは、以下のデザインシステムが利用可能です:

• Academia - 学術的、クラシック、洗練
• ArtDeco - 豪華な1920年代の魅力
• Bauhaus - 機能主義的、幾何学的ミニマリズム
• BoldTypography - タイポグラフィ主導のデザイン
• Botanical - 自然にインスパイアされたオーガニック
• Claymorphism - ソフトで粘土のような3D要素
• Cyberpunk - 未来的、ネオン、ハイテク
• Enterprise - プロフェッショナル、コーポレート、スケーラブル
• FlatDesign - クリーン、ミニマル、2D
• Fluent2 - Microsoft Fluent 2 Design System
• HumanistLiterary - 温かみのある、文学的な、会話調（Claudeの美学）
• Industrial - ラフ、メカニカル、実用的
• Kinetic - ダイナミック、モーションフォーカス
• Luxury - プレミアム、エレガント、洗練
• Material - Google Material Design
• Maximalism - 大胆、表現豊か、豊富
• MinimalDrak - ミニマルダークテーマ（原文のまま）
• ModernDark - 奥行きのある現代的なダークUI
• Monochrome - 白黒、ハイコントラスト
• Neo-brutalism - 大胆、ラフ、カラフルなブルータリズム
• Neumorphism - ソフトUI、スキューモーフィズム
• Newsprint - 新聞にインスパイア
• Organic - 自然で流れるようなフォルム
• PlayfulGeometric - 楽しい幾何学模様
• Professional - クリーン、ビジネス向け
• Retro - ヴィンテージ、ノスタルジック
• Saas - モダンなSaaSの美学
• Sketch - 手書き風、アーティスティック
• Swiss - International Typographic Style
• TerminalCLI - コマンドラインインターフェースの美学
• Vaporwave - 80年代/90年代の美学、ノスタルジック
• Web3 - 分散型、暗号通貨にインスパイア

仕組み

ステップ1: ユーザーの意図を理解する

ユーザーがフロントエンドの作業を要求した場合、まず以下を判断します:

1. 技術スタック - どのフレームワークを使用していますか？（React、Vue、Next.jsなど）
2. デザインの好み - 特定のスタイルや美学に言及しましたか？
3. コンポーネントの範囲 - 単一コンポーネント、ページ全体、またはアプリケーション全体？

ステップ2: デザインスタイルを選択する

ユーザーがスタイルを指定した場合:

• リクエストを利用可能なスタイルにマッピングします（例：「ブルータリズム」→ Neo-brutalism）
• 大文字小文字を区別しません（brutalism、Brutalism、BRUTALISMはすべて機能します）

ユーザーが指定しなかった場合:

• モダンでプロフェッショナルなプロジェクトには → ModernDark または Professional
• クリエイティブで大胆なプロジェクトには → Neo-brutalism または BoldTypography
• ミニマルでクリーンなプロジェクトには → FlatDesign または Swiss
• エンタープライズ/コーポレートには → Enterprise

どのスタイルが適切か不明な場合は、ユーザーに質問してください。

ステップ3: デザインシステムを取得する

Readツールを使用して、適切なプロンプトファイルを読み込みます:

Read: prompts/<StyleName>.md

例:

• prompts/Neo-brutalism.md
• prompts/ModernDark.md
• prompts/Cyberpunk.md

ステップ4: デザインシステムを適用する

デザインシステムプロンプトを読み込んだら:

1. デザイン哲学を内在化する - 核となる原則、視覚的特徴、差別化要因を理解する
2. デザイントークンを抽出する - 色、タイポグラフィ、スペーシング、シャドウ、ボーダー
3. コンポーネントパターンに従う - 指定されたボタンスタイル、カードレイアウトなどを使用する
4. 「大胆要素」を適用する - デザインを本物にするための特徴的な要素を実装する
5. アンチパターンを避ける - 美学を損なうテクニックを使用しない

ステップ5: コンテキストを考慮して構築する

コードを書く前に:

• ユーザーの既存の技術スタックを特定する
• コンポーネントアーキテクチャを理解する
• 制約事項（CSSフレームワーク、デザインライブラリなど）を確認する

コードを書くとき:

• 既存のパターンと規約に合わせる
• デザイントークンをCSS変数または設定ファイルに集中させる
• 再利用可能で構成可能なコンポーネントを作成する
• アーキテクチャ上の選択について簡潔に説明する

品質基準:

• アクセシビリティを維持または改善する
• デバイス間でレスポンシブデザインを確保する
• 意図的で創造的なデザイン選択を行う（汎用的なボイラープレートではない）
• コードベースを見つけた時よりもクリーンな状態で残す

例

例1: ユーザーがスタイルを指定する場合

ユーザー: 「SaaS製品のランディングページを、ネオ・ブルータリズムデザインで作成してください」

スキルのアクション:

1. キーワードを検出: 「ランディングページ」、「ネオ・ブルータリズム」
2. 「ネオ・ブルータリズム」→ prompts/Neo-brutalism.md にマッピング
3. デザインシステムプロンプトを読み込む
4. 明確化のための質問: 「どの技術スタックを使用していますか？ React、Vue、それともプレーンなHTML/CSSですか？」
5. Neo-brutalismの原則（太いボーダー、ハードシャドウ、大胆な色など）に従ってランディングページを構築する

例2: ユーザーがスタイルを指定しない場合

ユーザー: 「ポートフォリオウェブサイトの構築を手伝ってください」

スキルのアクション:

1. 検出: 「ポートフォリオウェブサイト」（クリエイティブコンテキスト）
2. オプションを提案: 「特定のデザインスタイルはお好みですか？ Modern Dark（洗練）、Neo-brutalism（大胆でクリエイティブ）、Swiss（ミニマルでクリーン）で作成できます。」
3. ユーザーが好みを回答
4. 適切なプロンプトを読み込んで構築する

例3: コンポーネントのリクエスト

ユーザー: 「Next.jsアプリに問い合わせフォームを追加してください。モダンでプロフェッショナルな外観にしてください。」

スキルのアクション:

1. キーワード: 「Next.js」、「モダンでプロフェッショナル」
2. 選択: ModernDark.md（モダン）または Professional.md（プロフェッショナル）
3. デザインシステムを読み込む
4. Next.jsのパターンに合わせたフォームコンポーネントを構築する
5. プロンプトからデザイントークン（色、タイポグラフィ、シャドウなど）を使用する

クイックリファレンスコマンド

実装時には、特定のセクションをすばやく参照できます:

色:

Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"

タイポグラフィ:

Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"

コンポーネントパターン:

Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"

最良の結果を得るためのヒント

1. プロンプト全体を読む - 流し読みしないでください。デザイン哲学と差別化のセクションは重要です。
2. 特徴的な要素を実装する - すべてのデザインシステムには「大胆要素」セクションがあります。これらの要素がデザインを本物にします。
3. アンチパターンを避ける - 各プロンプトには、やってはいけないことがリストされています。これらのルールに厳密に従ってください。
4. 質問をする - ユーザーのニーズが不明確な場合は、構築する前に質問してください。
5. 既存のコードに合わせる - 技術スタックと戦わないでください。デザインシステムを既存のパターンに統合してください。

備考

• すべてのデザインシステムプロンプトは同じ構造に従っています: <role> および <design-system> セクション
• プロンプトには、詳細なカラーパレット、タイポグラフィスケール、コンポーネントパターン、実装例が含まれています
• 各スタイルはプロダクション対応であり、視覚的な差別化のために注意深く設計されています
• プロンプトは、AIが生成したような汎用的なインターフェースを防ぐように設計されています

将来の機能拡張

このスキルの潜在的な改善点:

• スタイルの組み合わせサポート（例：「Cyberpunk + Minimal」）
• カスタムスタイル作成ワークフロー
• JSON/CSSへのデザイントークン抽出
• プロンプトからのコンポーネントライブラリ生成