すべてのプロジェクトの右側は live preview(ライブプレビュー)です。モックアップではなく、プロジェクトフォルダ内の実際のファイルをローカルで配信し、エージェントが書き込むたびに再描画しています。見えているものが、そのまま出荷されるものです。
Result、Code、Split
パネル上部のタブで、同じ状態の見方を切り替えます。
- Result — レンダリングされたデザイン。ステアリングはここで行います。
- Code — プレビューの下にあるソース。ファイルを見たいときに。
- Split — 両方を並べて表示。
ビューポートとズーム
ツールバーのデバイスボタンで、固定幅での結果のリフローを確認できます。デスクトップ、タブレット、スマートフォンです。実行を離れずにデザインの応答を確かめられます。幅チップはゲートがチェックするブレークポイント(ナビやヒットターゲットが最も破綻しやすい、スマートフォンとタブレットのサイズ)に直接ジャンプします。
隣のズームコントロールは −、パーセント表示、+ の並びで、25% から 400% まで段階的に切り替わります。トラックパッドでのピンチ、Ctrl を押しながらのスクロール、⌘/Ctrl +、−、0 でも操作できます。フォーカスがデザインの中にあってもショートカットは効きます。デバイスフレーム上では、ピンチしてもポインタの下の位置がその場に保たれます。パーセント表示をクリックすると 100% に戻ります。地図のように自分でビューをズームするデザインでは、ピンチはデザイン側が使います。
チェックはライブなので、ゲートが実行する 5 幅の比較(デスクトップ、ラップトップ、タブレット、2 つのスマートフォン幅)は、ターンの終わりを待たずいつでも自分で目視できます。
選択、コメント、ツールレール
プレビュー内で ⌥-hover するとカーソル下の要素がハイライトされます。エージェントが見るのと同じ要素です。⌥-click でコメントをピン留めします。レールのボタンはステアリングドロワーを開きます。ライブコントロールの Tweaks、ピンと描画の Comment mode、デザインに見た目の理由を尋ねる Designer talk です。それぞれ Steering 以下に個別のページがあります。
プレゼントモード
Present はスタジオの装飾を外し、結果でウィンドウを埋めます。同じ部屋の誰かに実行結果を見せるときや、トランスクリプトなしでデザインだけを眺めたいときに。Escape でプロジェクトに戻ります。
エージェント作業中もライブなもの
プレビューはターンの途中も再描画します。終わりだけではありません。デザインがファイルごとに組み上がっていくのを眺められます。エージェントにはメインページを最初に書き、セクションや画面ごとに保存するよう指示しているため、プレビューはビルドの最後ではなく早い段階からデザインを表示し始めます。Mobile app、Social Media、Pixel Sprite、Diagram、Map など、データモデルから構築されるデザインタイプは、まずスターターを描画し、モデルが育つにつれて更新されます。ステアリング(選択、コメント、Tweaks)もライブのままで、新しいメモはビルドを中断せず次のターンにキューされます。
メインページができる前
複数画面のデザインでは、メインページが保存されるまでに、トークン、コンポーネントのスタイル、共有スクリプトの書き込みに数分かかることがあります。それまでのあいだ、プレビュー領域には空白のフレームやテンプレートのサンプルコンテンツではなく、ビルドカードが表示されます。
- Design so far が一番上に表示されます。エージェントがデザインプランを保存するとすぐに、カードはそれをデザイン自身のトークンで描きます。実際の見出しと主要アクション、順番どおりのセクション、ひとつの大胆な見せ場、そしてエージェントによる最初の画面のスケッチです。続いてテーマごとのサンプル画面、さらにエージェントが保存したスタイルシートから組み立てたパレット、書体、コンポーネント(ボタン、カード、チップ、入力欄、トグル)が並びます。エージェントが書いた画面ではなくサンプルであることが明記され、カードは内容に合わせて伸びるので、長いプランも 2 つ目のスクロールバーなしで上から下まで読めます。
- Build so far は、この実行で書かれたファイルを新しい順に、サイズと経過時間付きで一覧します。加えて、メインページがまだ書かれていないのか、まだテンプレートのスターターのままなのか、書かれて読み込み中なのかを示す行があります。
- 実行が長引くと、複数画面のデザインではビルドが長くかかるのは普通だという注記が加わります。
新しい Web サイトでは、最初のビルドが走っているあいだ、テンプレートのプレースホルダーページは隠れたままです。トークンやスタイルシートの書き込みは開始とみなされません。エージェントがメインページそのものを書き直すまでカードは表示されたままで、そのページがまだあなたのデザインではなくテンプレートのプレースホルダーであることを伝えます。エディタ系のテンプレート(スプライト、キャラクター、3D パーツ、ダイアグラム、マップ)は例外です。メインページがエディタそのものなので、どのデザインファイルでもプレビューが表示されます。
カードが見せるのはデザインで、ソースコードは表示しません。パーセンテージや所要時間の見積もりはなく、エージェントが実際に保存したものだけです。
保存されたページが読み込まれてもプレビューにつながらない場合(たとえばスクリプトの 1 つが早い段階で失敗したとき)、プレビューは 2 秒後にそのページをそのまま表示し、"Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait."(保存済みのページを表示しています。プレビューブリッジに応答していないため、選択とコメントは待機します。)という注記を添えます。以降の保存でも引き続き更新されます。
ヒント: 結果を完成と呼ぶ前にスマートフォンのビューポートを確認しましょう。ゲートは必ず見ます。デスクトップ幅では動くのにモバイルで行き止まりになるナビは、最も多い FAIL の原因です。