Communitygithub.com

Design Pro

デザインとフロントエンドの作業を、328の専門プレイブックライブラリから適切なエキスパートへルーティングします。UI、ビジュアルデザイン、インタラクション、アニメーション、タイポグラフィ、カラー、アクセシビリティ、レイアウト、コピー、ランディングページからデザインエンジニアリング、ユーザーリサーチ、ペルソナ、ジャーニーマップ、ユーザビリティテスト、デザインシステム、トークン、批評、ハンドオフ、Three.jsや3Dシーン、モーションショーリール、ビデオプレゼンテーション、SVGイラストレーション、ゲームアーキテクチャ、コンバット、VFXまで対応。既存のインターフェースのレビューや改善依頼、「もっと良く見せて」「AIが作ったように見える」「センスを加えて」「Xをカバーするスキルは?」といったリクエストにも使用します。

Design Pro とは?

Design Proは、328のデザインプレイブックをルーティングするレイヤーであり、UI構築のためのオーケストレーションパイプラインを提供します。このスキルは、タスクを「UI構築(Path A)」と「その他(Path B)」に分類し、適切な専門プレイブックセットへ誘導することで、ジェネリックな出力ではなく個性的な結果を生み出します。Path Aでは、`references/process/orchestrate.md`を必須パイプラインとして実行し、内蔵の「tastemaker」エンジンが凡庸さを排除するゲートを適用します。Path Bでは、スイッチボード(振り分け盤)がリクエストを5つの領域(ui-craft、web-build、process、motion-3d、games)に分類し、各領域のINDEX.mdから必要なプレイブックだけを読み込むよう指示します。例えば、「もっと良く見せて」というリクエストがUIの変更を伴う場合はPath A、批評のみの場合はui-craftへルーティングされます。このスキルは、Claude CodeやCursor、CodexなどのAIエージェント向けに設計されており、7つのコレクション(合計328プレイブック)から適切なものを選択して参照できるため、エージェントが特定のデザインタスクに集中して高品質な出力を得られます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/purebilliontech/design-pro/tree/main/skills/design-pro

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Design Pro は何をしますか?

7つの公開コレクションから328のデザインプレイブックをルーティングするレイヤーと、UI構築のためのオーケストレーションパイプライン。各プレイブックは自己完結型のリファレンスファイルです。タスクに必要なものだけを読んでください — ライブラリ全体を読み込まないでください。

最初の分岐:これはUI構築ですか?

分類する前に、リクエストが2つのパスのどちらにあるかを判断してください。これを正しく行うことが、個性的な出力と凡庸な出力を分けるポイントです。

パスA — UIサーフェスの構築/デザイン/改善(ページ、画面、コンポーネント、ランディングページ、マーケティングサイト、アプリビュー、ダッシュボード — 実際に作成または変更する場合):

→ references/process/orchestrate.md を読み、それに従ってください。 これが必須のパイプラインです。内蔵の凡庸さ排除エンジン(tastemaker)を背骨として駆動し、他の領域をそのサービスにルーティングし、最終的な凡庸さ防止ゲートを強制します。UI構築を単一のプレイブックに直接渡さないでください — それは「どんなAIでも作れた」という受動的スイッチボードパスです。

パスB — その他すべて(批評のみ、リサーチと戦略、純粋なThree.js/シェーダーシーン、モーションショーリール、ゲームシステム、SVGイラストレーション、「Xをカバーするスキルは?」):

→ 以下のスイッチボードを使用してください。

スイッチボード(パスB)

  1. リクエストを分類し、以下の5つの領域のいずれかに当てはめます。
  2. その領域の INDEX.md を読んでください。 そこには領域内のすべてのプレイブックとその完全なトリガー説明がリストされています。
  3. 一致する1つまたは2つのプレイブックを読んでください。 それらに書かれている通りに従ってください — それらが専門知識そのものです。このファイルはスイッチボードにすぎません。
  4. 一致するものがない場合は、その旨を伝え、無理に適合させることなく自分の判断で進めてください。

異なる領域から2つのプレイブックを読むことは正常で正しいことです。6つ読む場合は、リクエストを段階に分割する必要があるサインです。

5つの領域

領域対象とする作業インデックス
ui-craft (82)洗練、タイポグラフィ、カラーシステム、アクセシビリティ、レイアウト、インターフェースコピー、インタラクションパターン、アニメーションとモーションのフィーリング、ビジュアル批評。「見た目と感触は正しいか」のレイヤー。references/ui-craft/INDEX.md
web-build (121)ランディングページ、マーケティングサイト、デザインエンジニアリング、スクロールとGSAPストーリーテリング、リファレンスやスクリーンレコーディングからプロンプトへの変換、ページキャプチャ、記事と画像生成。「ページを構築する」レイヤー。references/web-build/INDEX.md
process (63)ユーザーリサーチ、インタビュー、ペルソナ、JTBD、ジャーニーマップ、サーベイ、ユーザビリティテスト、デザインシステムのガバナンス、トークン、デザインオプス、ハンドオフ仕様、ステークホルダーと交渉作業。「作業がどのように決定されるか」のレイヤー。references/process/INDEX.md
motion-3d (36)Three.jsシーン、マテリアル、ライティング、水、ゴッドレイ、バーチャルツアー、モーションショーリール、ウェブビデオプレゼンテーション、手書きSVGイラストレーションスタイル。references/motion-3d/INDEX.md
games (26)ゲームアーキテクチャ、ゲームプレイループ、コンバットシステム、スキルVFX、ゲームプレイQA。references/games/INDEX.md

ルーティングのヒント

以下は間違いやすいリクエストです:

  • 「もっと良く見せて」/「これ、AIが作ったように見える」 — UIを実際に変更する場合、それはパスA → references/process/orchestrate.md です。批評のみの場合は、ui-craft(tastemaker audit 動詞 / better-interface)です。
  • 「このインターフェースをレビューして」(変更なし) → ui-craft(better-interface は6つのレンズすべてにわたるランク付けレポートを1つ提供します)。
  • 新しいマーケティングページを構築する → パスA → references/process/orchestrate.md。web-build + ui-craft を2つの別々のエンジンとして直接ルーティングしないでください。オーケストレーターは1つのエンジンを、根拠を持たせゲートをかけて実行します。
  • アニメーションの感触がおかしいが理由が言えない → ui-craft、アニメーションプレイブック。イージングとデュレーションが通常の原因です。
  • 「そもそもこれを構築すべきか」 → process、ui-craftではありません。リサーチと戦略はクラフトに先行します。
  • 動画にする必要がある静的デザイン → motion-3d。
  • Figmaファイルを入力とするもの → web-build(build-design)。

サポートファイル

一部のプレイブックには、スクリプトやリファレンスマテリアルが <playbook>.files/ という名前の兄弟フォルダに同梱されています。プレイブックが自身のリファレンスやスクリプトを参照する場合、そこを探してください。デモアセット(動画、スクリーンショット、テクスチャ)はバンドルされていません — プレイブックがそれらを指している場合は、例示として扱い、続行してください。

出典

各プレイブックには、そのソースリポジトリと作者を記載したヘッダーがあります。7つのコレクションすべてはMITライセンスであり、そのヘッダー以外は変更されずにバンドルされています:

コレクション作者プレイブック数
MengTo/SkillsMeng To178
Owl-Listener/designer-skillsMC Dean111
emilkowalski/skillsEmil Kowalski15
jakubkrehel/skillsJakub Krehel14
ConardLi/garden-skillsConardLi6
codeswithroh/tastemakercodeswithroh2
elayadesign/ai-design-skillsElaya2

プレイブックの内容をクライアント向けの作業に引用する際は、帰属表示をそのまま保持してください。

関連スキル