スキル自身の言葉で
このスキルは、Stitch MCPを4つのフローで駆動します。テキストから新しい画面を生成する、画像やモックアップを再現する、既存の画面を編集する、バリエーションを生成する、の4つです。生成や編集の呼び出しを行う前に、プロンプト強化パイプラインを実行し、プロジェクトとデザインシステムを解決し、あいまいな表現をデザインマッピングに基づくUI/UX用語に置き換え、PLATFORMセクションとPAGE STRUCTUREセクションを持つテンプレートを用いて、レイアウト、コンテンツ、構造に沿ってプロンプトを整形します。
ビジュアルスタイリングはプロジェクトレベルに保持されるため、生成プロンプトにはhexコード、フォント、角丸の値を含めてはなりません。AIのフィードバックはすべての呼び出しの後に表示され、アセットは.stitch/designsにダウンロードされます。
生成されるもの
- 生成された画面のHTMLとスクリーンショットで、.stitch/designsディレクトリにダウンロードされます。
- outputComponentsで返され、ユーザーに表示されるAIのテキスト説明と提案です。
- 選択した方向性に対するバリエーション画面で、1件から5件のバッチ単位で生成されます。
仕組み
- 01何よりも先にプロンプトを強化する
このパイプラインは任意ではなく必須です。エージェントは、Stitchの生成または編集ツールを呼び出す前に、ユーザーのリクエストを書き換えます。
- 02プロジェクトが既にスタイリングしている内容を確認する
プロジェクトに既にデザインシステムがある場合、色、フォント、角丸はプロジェクトレベルで適用されるため、強化されたプロンプトからはビジュアルスタイリングを完全に除外する必要があります。
- 03プロンプトをプラットフォームとページセクションの形式に整える
新しい画面は、まず全体の目的を述べ、続いてPLATFORM、そしてHeaderからFooterまでを番号付きで並べたPAGE STRUCTUREというテンプレートに従います。
- 044つのフローのいずれかを選択する
どのツールを呼び出す前にも、リクエストはGenerate from Text、Generate from Image、Edit、Generate Variantsのいずれかにルーティングされます。