画面だけでなく動作もデザインから引き継ぐ。
完成画面だけでなく動きと状態も引き継ぎます。応答規則、内容の制約、素材を記録し、未決事項を示して開発者の推測を避けます。
作業手順をタスクに合わせましょう。
画面、操作、応答動作、例外状態を洗い出します。素材とデザイントークンを結び、文章の制約を記し、未決事項の担当を定めます。静止画から推測せず動作を確認できる受入項目を含めます。
- 用意するもの
- デザイン範囲と開発要件。
- 得られるもの
- 素材、状態、仕様、担当の一覧。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Handoff review: search field and result cards supplied, but loading, empty and error states missing. Responsive rules and keyboard behavior also unspecified.
完成例
Required handoff additions: - Loading: indicator, pending-control behavior and announcement to confirm. - No results: useful message and a way to revise the query. - Error: recovery action and retained-query behavior. - Keyboard: focus order, submission and result navigation. - Responsive: card columns and long-content behavior. - References: assets, tokens and content constraints. Assign a reviewer to each unresolved behavior before implementation; the current screens do not define these decisions.
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
成功した検索結果の画面だけあれば十分ですか？
読み込み、空、エラー、キーボード操作も実際の流れなので含めます。
最初は見本と同じなのに実装がずれるのはなぜですか？
応答規則、動的な内容、状態が未定義なのかもしれません。画面と一緒に記します。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑