画面の生成と編集

デザインで最も難しいのは、空白のページを乗り越えることです。Stitch CLI と /stitch スキルを使えば、ターミナルを離れずに、プロジェクトの作成、最初の画面の生成、バリエーションへの展開、細部の 1 つずつの調整ができます。

プロジェクトを開始して固定する

すべての画面は Stitch キャンバスプロジェクトの中に存在します。新しいプロジェクトを作成する（または既存のプロジェクトを一覧表示する）ときは、フォルダに固定しておけば、以後 --project を渡す必要はありません。

stitch create project --title "Analytics Workbench"
stitch config set project <project-id>

/stitch スキルをインストールしたコーディングエージェント内（stitch agent-skills add）で作業している場合は、/stitch にプロジェクトの作成と最初の画面の生成を一度に依頼することもできます。

最初の画面を生成する

最初のプロンプトは小説である必要はありません。その画面が何なのか、全体的な雰囲気、そして画面に載せる具体的なコンテンツを説明します。

PROMPT

IdeaA revenue telemetry dashboard for a subscription business.

ThemeWarm editorial paper surface (#FAF8F5) with deep charcoal ink (#181615) and crisp tabular numerals.

ContentA 12-month revenue comparison chart, a three-column KPI summary strip, and a recent transactions table.

stitch generate screen を --device DESKTOP または --device MOBILE と一緒に実行します。

stitch generate screen \
  --title "Revenue Overview" \
  --device DESKTOP \
  --prompt "A revenue telemetry dashboard for a subscription business on a warm editorial paper surface (#FAF8F5) with deep charcoal ink (#181615), featuring a 12-month revenue comparison chart, a three-column KPI summary strip, and a recent transactions table."

大きく振りたいときはバリエーションを試す

最初に見えたレイアウトで妥協する必要はありません。バリエーションを使えば、一度に 1〜5 つの異なるオプションへ展開できます。

stitch generate variants を実行するときは、クリエイティブレンジ（--creative-range）と、Stitch に変化させたいアスペクト（--aspects）を選びます。

レイアウトがうまく機能していて、フォント、余白、色の微妙な仕上げだけを試したいときは REFINE を使います。
まったく異なるレイアウト（LAYOUT）、カラーパレット（COLOR_SCHEME）、タイポグラフィ（TEXT_FONT）を見たいときは EXPLORE または REIMAGINE を使います。

stitch generate variants \
  --screen <screen-id> \
  --count 3 \
  --creative-range EXPLORE \
  --aspects LAYOUT,COLOR_SCHEME \
  --prompt "Explore a compact high-density layout and a high-contrast dark theme"

一度に 1 つずつ編集する

気に入った画面ができたら、幅広い探索から的を絞った編集に切り替えます。加えたい変更を 1 つ選び、何を、_どのように_変えるのかを具体的に伝えます。

対象とする特定のコンポーネント

具体的な視覚指示

新しい UI 要素

上部の KPI カードをコンパクトな 1 行の横型ティッカーに置き換え、右上のヘッダーに日付範囲セレクターを追加します。

その指示を stitch edit screen に渡します。

stitch edit screen <screen-id> \
  --prompt "Replace the top KPI cards with a compact single-line horizontal ticker and add a date-range selector in the top-right header."

localhost でプレビューして HTML を取得する

画面が実際のブラウザでどう感じられるかを確認する、あるいはコーディングエージェントにライブ DOM を調べさせるには、ローカルプレビューサーバーを起動します。

stitch serve

画面の HTML をプロジェクトに取り込む準備ができたとき、またはブラウザで Stitch キャンバス上に開きたいときは、次のコマンドを実行します。

stitch get screen <screen-id> --code --output ./screens/revenue-overview.html
stitch open screen <screen-id>

カスタムアートワーク、stitch serve、コーディングエージェントとのインタラクティブな編集を組み合わせる完全な手順については、コーディングエージェントと反復するを参照してください。