design-router

デザインルーター — インテリジェントなスキルディスパッチャー

目的

Webサイト、アプリ、インターフェースを構築する際に、このスキルはプロジェクトのコンテキストを分析し、コレクションから最も関連性の高いデザインスキルを自動的に選択します。

仕組み

デザインコードを書く前に、必ず以下を行います。

1. プロジェクトの種類を特定します（ランディングページ、ダッシュボード、ポートフォリオ、SaaS など）。
2. 業界／ドメインを特定します（テクノロジー、高級、ヘルスケア、金融、クリエイティブなど）。
3. 美的意図を特定します（ミニマル、大胆、エディトリアル、無骨、プレミアムなど）。
4. 以下の表から適切なスキルの組み合わせに振り分けます。

ルーティングマトリクス

プロジェクトの種類別

プロジェクトの種類	主なスキル	その他のスキル	理由
SaaS ／ダッシュボード	taste-skill	mrgoonie-design-system、mrgoonie-ui-styling	バリエーション 8 ＋トークンアーキテクチャ＋ shadcn コンポーネント
ランディングページ	frontend-design	taste-skill、soft-skill	大胆なクリエイティブディレクション＋ありきたりなデザインを避けるルール＋高級感
ポートフォリオ ／エージェンシー	soft-skill	taste-skill、frontend-slides	15 万ドル規模のエージェンシーの美学＋ありきたりなデザインを避けるルール＋プレゼンテーション
E コマース	mrgoonie-ui-ux-pro-max	taste-skill、mrgoonie-brand	UX ガイドライン＋ありきたりなデザインを避けるルール＋ブランドの一貫性
ブログ ／エディトリアル	minimalist-skill	taste-skill	Notion／Linear のエディトリアルな雰囲気＋タイポグラフィ重視
データダッシュボード	brutalist-skill	taste-skill、d3js-viz	工業的なデータ密度＋ありきたりなデザインを避けるルール＋D3 チャート
企業サイト	taste-skill	mrgoonie-brand、mrgoonie-design-system	洗練されたプロフェッショナルなデザイン＋ブランドガイドライン＋トークン
クリエイティブ ／アート	frontend-design	algorithmic-art、canvas-design	最大限のクリエイティブな自由度＋ジェネレーティブアート＋プレミアムフォント
プレゼンテーション ／デッキ	mrgoonie-slides	frontend-slides、mrgoonie-design	スライド戦略＋HTML プレゼンテーション＋デザインのルーティング
モバイルアプリ UI	mrgoonie-ui-ux-pro-max	mrgoonie-ui-styling	10 種類のスタックに対応＋shadcn＋アクセシビリティ
開発者向けツール	brutalist-skill	taste-skill、minimalist-skill	ターミナルの美学＋等幅フォント＋すっきりした UI
スタートアップの MVP	taste-skill	mrgoonie-ui-ux-pro-max、redesign-skill	素早く実現するプレミアムなアウトプット＋UX ルール＋アップグレードへの道筋

業界 ／ドメイン別

業界	美的方向性	読み込むスキル
テクノロジー ／AI ／SaaS	ダーク、グラス、精密	taste-skill（Ethereal Glass の雰囲気）＋ mrgoonie-design-system
高級 ／ファッション	エディトリアル、セリフ体、温かみ	soft-skill（Editorial Luxury の雰囲気）＋ mrgoonie-brand
ヘルスケア ／ウェルネス	柔らか、軽やか、パステル	soft-skill（ソフト・ストラクチュラリズム）＋ minimalist-skill
金融 ／フィンテック	洗練、データ密度、信頼感	minimalist-skill ＋ mrgoonie-ui-ux-pro-max ＋ d3js-viz
クリエイティブエージェンシー	大胆、非対称、動きの多用	frontend-design ＋ soft-skill ＋ taste-skill
開発者 ／開発ツール	無骨、等幅、ターミナル	brutalist-skill ＋ taste-skill
不動産 ／プロップテック	プロフェッショナル、温かみ、データ	taste-skill ＋ mrgoonie-design-system ＋ d3js-viz
教育	明快、アクセシブル、構造的	minimalist-skill ＋ mrgoonie-ui-ux-pro-max
ゲーム	ダーク、没入感、アニメーション	frontend-design ＋ taste-skill（モーション強度 8 以上）
食品 ／レストラン	温かみ、エディトリアル、写真	soft-skill ＋ frontend-design

美的意図別

意図	スキル	主な設定
「高級感のある見た目にする」	soft-skill	ダブルベゼルカード、スプリング物理演算、セリフ体の見出し
「すっきりとミニマルにする」	minimalist-skill	温かみのあるモノクロ、弁当箱型グリッド、グラデーションなし
「大胆で個性的にする」	frontend-design	最大限の創造的自由、意外性のある選択
「無骨で技術的な見た目にする」	brutalist-skill	スイス式タイポグラフィ、CRTエフェクト、モノスペースを主体にする
「プロフェッショナルな見た目にする」	taste-skill	変化度 6、密度 4、ニュートラルな配色
「モダンな SaaS にする」	taste-skill + mrgoonie-design-system	トークンアーキテクチャ、コンポーネント仕様
「これを再設計／アップグレードする」	redesign-skill	既存の監査 → 対象を絞った修正 → 仕上げ

共通ルール（常に適用）

どのスキルに振り分ける場合でも、以下を適用します。

1. 必ず taste-skill を読み込む。基本的なスロップ対策（禁止フォント、色、パターン）のため
2. 必ず output-skill を読み込む。手抜きや出力の切り詰めを防ぐため
3. 既存プロジェクトをアップグレードする場合は、redesign-skill を確認する
4. アクセシビリティと UX の検証には、mrgoonie-ui-ux-pro-max を確認する
5. 外部ツール（Stitch、Figma のプロンプト）向けの DESIGN.md を生成する場合は、stitch-skill を使用する

実行プロトコル

1. READ the user's request
2. IDENTIFY project type + industry + aesthetic
3. MATCH against routing matrix
4. LOAD the primary skill's full SKILL.md
5. SCAN secondary skills for relevant sections only
6. APPLY universal rules (taste-skill baseline + output-skill)
7. BUILD with the combined intelligence

スキルの場所

すべてのスキルは、このリポジトリの skills/ ディレクトリにあります。

• Leon：taste-skill/、redesign-skill/、soft-skill/、minimalist-skill/、brutalist-skill/、stitch-skill/、output-skill/
• mrgoonie：mrgoonie-ui-ux-pro-max/、mrgoonie-design/、mrgoonie-design-system/、mrgoonie-ui-styling/、mrgoonie-brand/、mrgoonie-slides/、mrgoonie-banner-design/
• Anthropic：frontend-design/、canvas-design/、theme-factory/、algorithmic-art/
• コミュニティ：frontend-slides/、d3js-viz/、web-asset-generator/