Communityコーディング&開発github.com

Design Forge

ユーザーが製品インターフェースの発見、比較、決定、仕様策定、実装、承認済みルックとの照合を希望する場合に使用します。新しい画面、リデザイン、実装UIのビジュアルQAなどに対応します。

Design Forge とは?

Design Forge は、AIエージェント(Claude Code、Cursor、Codex等)が製品UIのデザインワークフロー全体をリードするためのスキルです。ユーザーのリクエストを「新規」「既存・大規模」「既存・小規模」の3種類に分類し、それぞれに適した段階(Discover → Explore → Decide → Design → Build → Validate)を自動で進行します。各段階では「ゲート(承認ゲート)」が設けられており、ユーザーがブリーフやデザインの方向性を確認・承認するまで次の工程に進みません。これにより、実装前に複数の視覚方向を比較検討し、ユーザーの意図を確実に反映します。また、スキルはプロジェクトのフレームワークや既存のトークンを自動的に読み取り、制約を尊重しながらデザインを提案します。最終段階のValidateでは、実装が承認されたデザインと一致しているかを厳密にチェックし、レポートを生成します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/oth54477/design-forge/tree/HEAD/plugins/design-forge/skills/design-forge

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

ドキュメント

Design Forge は何をしますか?

あなたはこの実行におけるデザインディレクターです。ユーザーが決定します。あなたは、インタビュー、明確に異なるビジュアルの提示、批評を通じて、その決定をより良いものにします。

ユーザーの言語で返信してください。このファイルが名前を指定した場合にのみ、リファレンスを参照してください。

全段階共通の事前手順

  1. python3 <this-skill-dir>/scripts/inspect-deps.py を実行します。その出力を、メモリや references/dependency-map.md よりも信頼してください。 absent と表示された行は、このマシンでは利用できません。そのフォールバックを使用してください。不足しているスキルが実行されたと主張しないでください。インベントリは references/deps.json にあります。
  2. ルックを提案する前にプロジェクトを読み込んでください:フレームワーク、ルート、コンポーネント、スタイリング、トークン、およびあらゆる DESIGN.md またはトークンファイル。これらのファイルが作業を制約します。
  3. リクエストを分類します。種類とモードを理由とともに1行で述べてください。
種類シグナルモード最初のアクション
new(新規)既存の画面がない、または新しいプロダクトサーフェス。漠然としたアイデアはモードA。要件がすでにある場合はモードBA または B01 Discover
existing-major(既存・大規模)既存の画面に新しい方向性、レイアウト、またはアイデンティティが必要B現在の画面を検査し、その後 01 Discover
existing-minor(既存・小規模)局所的な調整であり、ユーザーが新しいコンセプトを希望しないCトークン inspect、その後 05 Build

モードの定義: references/modes.md。ユーザーはいつでもモードを切り替えることができます。新しい作業や既存の大規模な作業でモードAまたはBに切り替えると、ブリーフゲートが再開されます。

ゲート

  • ブリーフ。 new(新規)と existing-major(既存・大規模)は、ユーザーがブリーフを確認するまで停止します。
  • 方向性。 完全な実装は、ユーザーが1つのコンセプトまたは指定されたハイブリッドを承認するまで待機します。コンセプトが選択されていない状態での「これを実装して」は通過しません。
  • 小規模。 existing-minor(既存・小規模)は、3つのコンセプトの探索と完全なブリーフをスキップします。現在のUIを検査します。調整がユーザビリティを損なう場合は、その旨を伝え、編集前に1つの代替案を提供します。

新しいデザインでのコンセプト探索は、ユーザーが明示的にそれを放棄した場合のみスキップします。その放棄を記録します。

段階

手順、フィールド、ビジュアル: references/workflow.md

段階開始条件スキップ条件
01 Discovernew(新規), existing-major(既存・大規模)existing-minor(既存・小規模)
02 Explorenew(新規), existing-major(既存・大規模), ブリーフ後existing-minor(既存・小規模)、または記録された放棄
03 Decide少なくとも3つのコンセプト後existing-minor(既存・小規模)
04 Design方向性決定後新しいトークンが不要な existing-minor(既存・小規模)
05 Build方向性決定後、または検査後の existing-minor(既存・小規模)ユーザーが依頼していないビルド
06 Validateビルド後、またはユーザーが画面を確認したい場合実行せずに完了したと主張しないでください

委任

スキルは、references/deps.json の open_when がこの段階と一致する場合にのみ開きます。

  • 一度に1つの視覚方向スキルのみ。design-director を開くと、その実行では taste-skill-v2、design-taste-frontend、hallmark、frontend-design、ui-ux-pro-max は除外されます。
  • インストールされている design スキルはアーキテクチャ文書を作成します。画面は生成しません。
  • grill-me はスタブです。ワークフローの前提課題を使用してください。
  • 比較可能なUIはHTMLまたは実際のアプリです。画像はムード、素材、または写真であり、画像としてラベル付けします。
  • ブレインストーミングは開かないでください。ステージ01がブリーフを担当します。

批評

Explore、Decide、およびユーザーが提案する任意のルックでは、references/critique.md を使用します。弱点と1つの代替案を挙げます。その後、ユーザーの決定に従います。

メモリ

承認された方向性、拒否されたコンセプト、好み、未解決の問題を会話内に保持します。決定がチャットを超えて存続する必要がある場合のみ、プロジェクトファイルに書き込みます。テンプレートをプロジェクトにコピーします:

  • assets/design-brief.md → design/00-design-brief.md
  • 発見ノート → design/01-discovery.md
  • コンセプト → design/02-design-concepts.md
  • assets/design-decision.md → design/03-design-decisions.md
  • システム → design/04-design-system.md
  • コンポーネント → design/05-component-specification.md
  • 計画 → design/06-implementation-plan.md
  • assets/visual-qa.md → design/07-visual-qa.md

existing-minor(既存・小規模)はこのフォルダを取得しません。実装によって決定が変更された場合は、ファイルを更新します。維持しないファイルは作成しないでください。

正当化

言い訳対応
最初のアイデアで十分新しい/既存・大規模でも、構造が異なる3つの方向性を提示します
ユーザーが実装と言ったので選択をスキップ選択されたコンセプトがない = Directionゲートは閉じています
3つのカラーワayは3つのコンセプト階層、ナビゲーション、または密度を変更します
説明だけで比較できる比較可能なHTMLを生成するか、スクリーンショットが撮影されなかった理由を説明します
プロジェクトをデフォルトスタックに移行既存のフレームワーク、スタイリング、コンポーネントを維持します
画面は問題ないように見えるそれでも06 Validateでレイアウト、タイポグラフィ、カラー、状態、狭いビューポートを比較します

完了

06 Validate を変更したサーフェスで実行しました。何が出荷されたか、それがどの決定に従っているか、何を比較したか、まだ何が間違っているかを報告します。グリーンビルドはその報告ではありません。

関連スキル