スキル自身の言葉で
このスキルは、粗いUIアイデアをStitchでの生成に適したプロンプトへと変換します。Stitch Prompt Engineerとして機能し、入力に欠けているプラットフォーム、ページタイプ、構造、ビジュアルスタイル、色、コンポーネントを確認したうえで、曖昧な表現を具体的なコンポーネント名に書き換え、雰囲気を表す形容詞を強調し、コンテンツを番号付きセクションにまとめ、すべての色を名前・16進コード・機能的な役割として整えます。
プロジェクトにDESIGN.mdがある場合、そのパレット、タイポグラフィ、コンポーネントスタイルはDESIGN SYSTEM (REQUIRED)ブロックに取り込まれます。ない場合は、design-mdスキルを案内するヒントが表示されます。出力はデフォルトではコピー可能なテキストですが、stitch-loop用のnext-prompt.mdのようなファイルにもできます。
生成されるもの
- ページの目的と雰囲気を1行で説明する文で始まり、続いてデザインシステムのブロックと番号付きのページ構造が続く、強化されたプロンプト。
- stitch-loopスキルとともに使用するために書かれた、任意のnext-prompt.mdファイル。
- ユーザーが選んだカスタム名による、任意のファイル。
仕組み
- 01入力内容を確認する
このスキルは、プラットフォーム、ページタイプ、構造、ビジュアルスタイル、色、コンポーネントという6つの要素について、ユーザーのプロンプトを確認します。
- 02デザインシステムを取り込む
現在のプロジェクト内のDESIGN.mdを探し、デザインシステムのブロックを読み取ることで、パレット、タイポグラフィ、コンポーネントスタイルを新しいプロンプトで再利用できるようにします。
- 03強化テクニックを適用する
曖昧な表現は名前付きのコンポーネントになり、形容詞は雰囲気として強調され、コンテンツは番号付きセクションに整理され、色は説明的な名前、16進値、役割とともに記述されます。
- 04出力を決まった順序で整える
結果は、ページの目的と雰囲気を1行で説明する文で始まり、続いてDESIGN SYSTEM (REQUIRED)ブロック、そして番号付きのPage Structureが続きます。