design-style

デザインスタイルスキル

目的

このスキルは、prompts/ ディレクトリからデザインシステムのプロンプトを自動的に取得し、Claude Code が美しく独自性のあるフロントエンドインターフェイスを作成できるようにします。汎用的な UI を生成するのではなく、ネオブルータリズム、モダンダーク、ラグジュアリー、サイバーパンクなど、特定のデザインテイストを取り入れたインターフェイスを Claude が構築できるようにします。

使用するタイミング

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

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

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

prompts/ ディレクトリでは、以下のデザインシステムを利用できます。

• Academia - 学術的、古典的、洗練されたスタイル
• ArtDeco - 1920 年代の豪華な華やかさ
• Bauhaus - 機能主義的で幾何学的なミニマリズム
• BoldTypography - タイポグラフィ主導のデザイン
• Botanical - 自然をモチーフにした有機的なスタイル
• Claymorphism - 柔らかく粘土のような 3D 要素
• Cyberpunk - 未来的、ネオン、高度なテクノロジー
• Enterprise - プロフェッショナルで企業向け、拡張性の高いスタイル
• FlatDesign - クリーンでミニマルな 2D デザイン
• Fluent2 - Microsoft Fluent 2 デザインシステム
• 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 - 国際タイポグラフィ様式
• 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. ネオブルータリズムの原則（太い枠線、はっきりとした影、大胆な色など）に沿ってランディングページを構築します

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

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

スキルの動作：

1. 「ポートフォリオサイト」（クリエイティブな文脈）を検出します
2. 選択肢を提案します：「特定のデザインスタイルをご希望ですか？モダンダーク（洗練された印象）、ネオブルータリズム（大胆でクリエイティブ）、またはスイス（ミニマルですっきりした印象）で作成できます。」
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 が生成したように見えるインターフェースを防ぐよう設計されています

今後の機能強化

このスキルで改善が考えられる点：

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