design-with-images

画像を使ったデザイン

成果物は、承認済みのリファレンスに見た目が一致した、実際に動作するデザインです。 画像生成で目標を探り、実際のスクリーンショットで実装を検証します。 探索のみを求められた場合は、選択肢を提示して選択を待ちます。

ワークフロー

1. 判断の前提を定めます。 関連するデザインスキルを読み、実際の画面をキャプチャします。 変更可能な点と維持すべき点（コンテンツ、フレーミング、配色、 インタラクション、周辺の UI）を明確にします。元のキャプチャは保持します。
2. 代替案を生成します。 そのキャプチャをリファレンスとして、 利用可能な画像生成スキル／ツールを使います。方向性の異なるビジュアル案を 少数生成し、ラベルを付けます。実装済みコードのスクリーンショットとしてではなく、 コンセプトとして提示します。
3. 選択した目標を確定します。 既存の承認や委任されたデザイン上の裁量を使います。 それ以外の場合は、ユーザーに選択してもらいます。選択した画像、プロンプト、 出所をプロジェクトのリファレンス領域に保存します。余白とパディング、 シルエット、タイポグラフィ、透明度、エッジの柔らかさ、階層、配置など、 目に見える要件を明確にします。選択した画像に実際に示されている内容ではなく、 プロンプトで求めた特性を優先してはいけません。コーディングを始める前に、 Reference Landmarks で リファレンスの測定を完了します。
4. デザインを実装します。 プロジェクトの実際のコンポーネントとビジュアルの 基本要素を使用します。生成したモックアップはソースコードではなく、 CSS を簡単に書けることも忠実さの証拠にはなりません。実装上の制約により 異なる仕組みが必要な場合も、意図された関係性を維持します。生成されたテキストの 誤りや創作された詳細はアーティファクトとして明記し、ピクセルを合わせるためだけに そのままリリースしてはいけません。
5. 比較して反復します。 実際の実装を、スケール、フレーミング、状態を できるだけ揃えてキャプチャします。compare-screenshots を使い、承認済みのコンセプトと比較します。全体が見えるコンテキストと、 変更した特徴部分のタイトなクロップを使います。境界／重なりのチェックを完了します。 効果の両側と、その効果が重なる前景要素も比較し、全体的な柔らかさや余白だけを 比べてはいけません。引き継ぎまで、特徴ごとの合格／修正／未確定の記録を保持します。 変更前後のコードのスクリーンショット比較は補助的なものであり、 変更を示すことはできても、選択したデザインへの忠実さは証明できません。 重要な不一致を列挙し、コードを修正して再キャプチャし、再度比較します。 意図した特徴がすべて一致するか、ユーザーが目標を明示的に変更するまで続けます。 機能テストに合格したこと、距離スコアが低いこと、記憶を頼りにした「十分近い」は、 作業を止める条件にはなりません。制約が明らかになったら、すぐに開示します。
6. 検証して引き継ぎます。 混み合った状態やコントラストの低いケースも含め、 関連する状態とサイズで実際のデザインを確認します。 screenshot-critique を使って先入観のないレビューを行います。 利用可能な場合は preview-shots を使い、 承認済みのリファレンスと実際の結果を、明確なラベルを付けて並べて表示します。 完了を宣言したり公開したりする前に、重要なフィードバックを同じ比較ループで解決します。 コストのかかる完了確認スイートを実行する前に、このビジュアルゲートを安定させます。 デザインが変化している間は、対象を絞ったチェックを行います。既存の承認状態を維持し、 選択したデザインとリリース作業がすでに承認されている場合に、 新たな承認ゲートを設けてはいけません。

ルール

• コンセプト、以前の実装、現在の実装を区別してください。 承認済みの参照を、最新のコードのスクリーンショットに置き換えてはいけません。
• 実際のサイズで撮影した画像を主要な証拠として使用してください。位置合わせを行った画像にはその旨を明記し、 アプリケーションの表示倍率を変更したり、一致度を高めるために欠陥を切り取ったりしてはいけません。
• 生成された参照は、再レンダリングされたテキストや風景が文字どおり一致するかではなく、意図されたデザイン上の特徴に基づいて評価してください。除外する項目は明示的に記録してください。 それを理由に、異なる余白、形状、階層を容認してはいけません。
• 選択されたコンセプトは要件であり、黙って解釈し直すための着想ではありません。 忠実に実装できない場合は、具体的な矛盾を示して目標の見直しを求めてください。近似を完成品として提示してはいけません。