design-system

AI デザインシステムスキル

50 種類以上の、プロが厳選したビジュアルスタイルを備えた AI 搭載デザインシステムを利用できます。このスキルを使うと、ありきたりな「AI っぽい」パターンを避けながら、コンポーネントやインターフェースに統一感のある独自の美しさを適用できます。

主な機能

1. スタイルの適用

厳選された 50 種類以上のスタイルをコンポーネントに適用します。

"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"

2. スタイルのブレンド

複数のスタイルを重み付けして組み合わせます。

"blend japandi with scandinavian 80/20"
"mix brutalist with glassmorphism 60/40"
"combine art-deco with cyberpunk 50/50"

3. コンポーネントの生成

現在有効なスタイルを使って、スタイル付きコンポーネントを生成します。

"create button with current style"
"generate card component in art-deco style"
"build navigation bar using brutalist tokens"

4. トークン管理

デザイントークンにアクセスして適用します。

"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"

スタイルカテゴリ（50 種類以上）

1. ミニマリスト＆モダン（5 種類）

• minimalist：純粋なシンプルさ、最大限の余白、控えめなインタラクション
• brutalist：生の HTML を思わせる美しさ、力強いタイポグラフィ、意図的な「崩れた」デザイン
• scandinavian：明るい木材、柔らかな色、居心地のよい機能性
• japandi：日本のミニマリズムとスカンジナビアの温かみの融合
• swiss：グリッドベース、サンセリフ体のタイポグラフィ、非対称なレイアウト

2. 歴史的＆古典的（5 種類）

• art-deco：幾何学模様、ゴールドのアクセント、高級感のある素材
• art-nouveau：有機的な曲線、自然のモチーフ、装飾的なタイポグラフィ
• baroque：精緻なディテール、劇的なコントラスト、豊かな装飾
• victorian：装飾的な枠線、セリフ体のタイポグラフィ、ヴィンテージカラー
• renaissance：古典的なプロポーション、均整の取れた構成、洗練されたディテール

3. レトロ＆ノスタルジック（5 種類）

• retro-80s：ネオンカラー、幾何学図形、シンセウェーブの雰囲気
• retro-90s：大胆なグラデーション、CD-ROM の美学、初期ウェブへのノスタルジー
• vaporwave：パステルピンク／ブルー、グリッチ効果、シュールなイメージ
• y2k：メタリックな仕上げ、丸みのある文字、2000 年代初期のテック美学
• mid-century：アトミック・エイジのデザイン、大胆な色、有機的な形状

4. デジタル UI（5 種類）

• glassmorphism：曇りガラス効果、背景のぼかし、透明レイヤー
• neumorphism：柔らかな影、控えめな奥行き、触感のある表面
• material-design：エレベーションシステム、大胆な色、モーションの原則
• fluent-design：アクリル素材、奥行きのあるレイヤー、光と影
• skeuomorphic：現実世界のテクスチャ、立体的な影、触感を想起させる表現

5. 未来的＆SF（5 種類）

• cyberpunk：暗闇に映えるネオン、テック系のグランジ、強いコントラスト
• cybernetic：クローム仕上げ、ホログラフィック要素、テックインターフェース
• space-age：宇宙的な色、星空、未来的なタイポグラフィ
• dystopian：工業的なグレー、使い古されたテクスチャ、実用本位のデザイン
• solarpunk：エコフューチャリズム、グリーンテクノロジー、持続可能性への楽観的な展望

6. 自然に着想を得たスタイル（5 種類）

• organic：自然な形、アースカラー、流れるような形状
• botanical：植物のモチーフ、グリーン系の配色、成長を表すパターン
• coastal：海のブルー、砂浜を思わせるニュートラルカラー、風化したテクスチャ
• desert：温かな砂色、テラコッタ、ミニマルな風景
• forest：深いグリーン、木のテクスチャ、重なり合う樹冠の効果

7. 大胆＆表現豊か（5 種類）

• maximalist：パターンの多用、色の衝突、意図的な混沌
• pop-art：大胆な色、網点パターン、コミックブックの美学
• psychedelic：渦巻くパターン、万華鏡のような色、錯視効果
• graffiti：都会的なテクスチャ、スプレーペイント効果、ストリートアートのエネルギー
• punk：DIY の美学、コラージュスタイル、反骨精神のあるタイポグラフィ

8. イラスト＆アート（5 種類）

• hand-drawn：スケッチ風の線、不完全な形、人の手による温かみ
• watercolor：柔らかな色のにじみ、色の広がり、有機的なテクスチャ
• flat-illustration：ベクターアート、単色、簡略化された形
• isometric：3D の遠近法、技術イラスト、ゲームのような視点
• line-art：最小限の線画、モノクローム、優雅なシンプルさ

9. 文化・地域（5 スタイル）

• mediterranean：温かみのある青、テラコッタ、太陽に照らされたような美しさ
• nordic：寒色系、ミニマリストなパターン、機能的な美しさ
• asian-zen：調和、余白、自然素材
• tribal：幾何学模様、大地の顔料、文化的モチーフ
• moroccan：豊かな色彩、緻密なパターン、装飾的なディテール

10. 特殊用途・新興スタイル（5 スタイル）

• dark-mode：真の黒、OLED 向け最適化、目の疲れを軽減
• high-contrast：WCAG AAA 準拠、アクセシビリティを最優先、明確な階層構造
• print-inspired：新聞のレイアウト、エディトリアルなタイポグラフィ、インクの質感
• terminal：等幅フォント、CLI の美学、ハッカー風の緑または琥珀色
• low-fi：意図的な劣化、ピクセルアート、レトロコンピューティング

トークンの参照構造

デザイントークンは階層構造で整理されています：

src/design-system/
  tokens/
    styles/
      {style-name}.json          # Complete style definition
    core/
      colors.json                # Base color palette
      typography.json            # Font definitions
      spacing.json               # Spacing scale
      shadows.json               # Shadow tokens
      animations.json            # Motion tokens

各スタイルのトークンファイルには、次の項目が含まれます：

• colors：プライマリ、セカンダリ、アクセント、サーフェス、テキスト
• typography：フォントファミリー、サイズ、ウェイト、行の高さ
• spacing：マージン、パディング、ギャップのスケール
• borders：角丸、幅、スタイル
• shadows：エレベーションレベル、フォーカス状態
• animations：トランジション、時間、イージング

使用ガイドライン

AI っぽさを避ける原則

次のようなありきたりなパターンは絶対に使用しないでください：

• プライマリフォントとしての Inter、Roboto、Arial、Helvetica
• 白い背景に紫／青のグラデーション（#667eea → #764ba2）
• ありきたりな角丸（どこでも border-radius: 8px）
• ドロップシャドウを使った画一的なカードレイアウト
• UI での絵文字の多用（🚀 ✨ 🎉）
• ありきたりな「モダン」な間隔（gap: 1rem）

次のルールに必ず従ってください：

1. 選んだ美学を徹底的に貫き、中途半端にしない
2. デザイントークンをすべての値に使用し、マジックナンバーは使わない
3. ホバー状態を定義し、すべてのインタラクティブ要素にフィードバックを設ける
4. ダークモードを考慮し、最初からライトとダークの両方に対応したデザインにする
5. アクセシビリティをテストし、WCAG AA のコントラスト最小基準を維持する
6. 個性のあるフォントを使用し、スタイルに合った書体を選ぶ
7. 個性を加え、各スタイルが独自性と意図を感じさせるようにする

スタイル適用のワークフロー

1. スタイルを選択：50 以上のスタイルから選ぶか、複数を組み合わせます
2. トークンを読み込む：選んだスタイルのトークンファイルを参照します
3. 体系的に適用：色、タイポグラフィ、間隔にトークンを使用します
4. インタラクションを追加：ホバー、フォーカス、アクティブ、無効の状態を定義します
5. 一貫性をテスト：すべてのコンポーネントに統一感があることを確認します
6. 使用方法を文書化：どのスタイルをどこに適用したか記録します

コンポーネント生成のベストプラクティス

コンポーネントを生成する際は、次の点に従ってください：

1. セマンティックな HTML 構造から始めます
2. ハードコードされた値ではなく、スタイルトークンを適用します
3. すべてのインタラクティブ状態（ホバー、フォーカス、アクティブ、無効）を含めます
4. アクセシビリティのために ARIA 属性を追加します
5. バリエーション（サイズ、色、状態）を用意します
6. 使用例とドキュメントを含めます

ブレンドの計算式

比率（例：80/20）を指定してスタイルをブレンドする場合：

• 優勢なスタイル（80%）：基本色、プライマリタイポグラフィ、主要な間隔
• アクセントスタイル（20%）：セカンダリカラー、アクセントフォント、装飾要素

ブレンド例：

"blend art-deco with cyberpunk 70/30"
→ Art-deco base with cyberpunk accent colors and occasional neon highlights

開発ワークフローとの統合

Coder Agent との連携

"Hey coder, apply brutalist style to the dashboard components"
→ Coder applies brutalist tokens systematically

Reviewer Agent との連携

"Reviewer, check if components follow art-deco style guide"
→ Reviewer validates token usage and style consistency

Planner Agent との連携

"Planner, create a style migration plan from material to glassmorphism"
→ Planner breaks down token replacement strategy

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

スタイルを確認する

• "list all available styles" - 50 以上のすべてのスタイルを表示します
• "describe {style-name}" - スタイルの詳細情報を取得します
• "show {style-name} tokens" - トークンの値を表示します

スタイルを適用する

• "apply {style-name}" - アクティブなスタイルを設定します
• "use {style-name} for {component}" - 特定のコンポーネントにスタイルを適用します
• "restyle {component} as {style-name}" - 既存のコンポーネントを変換します

スタイルをブレンドする

• "blend {style-a} with {style-b}" - 50/50 でブレンドします
• "blend {style-a} with {style-b} {ratio}" - 任意の比率でブレンドします
• "what would {style-a} + {style-b} look like?" - ブレンドのプレビューを表示します

コンポーネントを生成する

• "create {component} in {style-name}" - スタイル付きコンポーネントを新規作成します
• "generate {component-set} using current style" - 複数のコンポーネントを生成します
• "build {layout} with {style-name} tokens" - 複雑なレイアウトを構築します

成功のためのヒント

1. 具体的に指定する：「アールデコ調を適用する」は「おしゃれにする」より効果的です
2. 一貫性を保つ：プロジェクトのセクションごとに、スタイルを1つ使用するか、組み合わせます
3. トークンを信頼する：正当な理由がない限り、トークン値を上書きしないでください
4. 早めにテストする：後回しにせず、開発の早い段階でスタイルを適用します
5. 選択理由を記録する：コミットメッセージに、選択したスタイルとその理由を記載します
6. 制約を活用する：制限が、より優れたデザイン上の判断につながります

リソース

• スタイルガイド：@references/style-guide.md - 美的ルールの詳細
• プロンプトテンプレート：@references/prompt-templates.md - すぐに使えるプロンプト
• トークンスキーマ：@references/token-schema.md - トークン構造のリファレンス

---

最終更新日：2025-12-03 バージョン：1.0.0 利用可能なスタイル：50+