作業の進め方
エージェントはまず実際の画像から、サイズ、表示されているテキスト、階層、比率、アセットを確認します。また、対象プロジェクトも読み、実装が既存のフレームワークや画面に合うようにします。切り取られたスクリーンショットが定義するのは見えている範囲だけで、ページの残りを自由に作ってよいという意味ではありません。
実装では、実際のレイアウト、テキスト、コントロールを使います。リファレンスのビューポートに合わせた後、要求された他のサイズも確認します。最後に、リファレンスと同じ寸法でレンダリングし、フォントと画像の読み込みを待って結果を比較し、目に見える違いを修正します。不足しているアセットや未検証のレンダリングは、明示したままにする必要があります。
想定される成果物
- 対象プロジェクトのスタックと適切な再利用コンポーネントを使った、編集可能なインターフェースコード
- 要求されたコントロールを既存の動作に接続したもの。バックエンド機能は新たに作りません
- 実際に行った視覚比較、残る相違点、不足アセットの簡潔な報告
リファレンスから比較まで
- 01実際の画像を確認する
ファイル名や抽出テキストだけでなく、画像そのものを読みます。コードを編集する前に、寸法、表示範囲、配置、タイポグラフィ、アセットを特定します。
- 02リファレンスのサイズで構築する
既存スタックの中で、階層、折り返し、余白、切り抜きを合わせます。リファレンスを再現できる場合はコンポーネントを再利用し、無関係なデフォルトに無理に合わせないでください。
- 03レンダリングして修正する
動作中の画面を同じビューポートでキャプチャします。まず大きなレイアウトと比率の違いを比べ、その後にタイポグラフィ、色、細部を確認します。変更後は再度レンダリングします。
- 04要求されたバリエーションを確認する
リファレンスのサイズを確立した後、要求されたレスポンシブサイズと動作するコントロールをテストします。ピクセルパーフェクトを約束せず、残る不一致を報告します。