プレビューと見比べる

最終更新日: 2026年10月16日

エージェントがファイルを書いたあと、ライブプレビューと自分のページを並べ、動き・余白・スクロール・画像を直す手順。

このページでできること

置いたセクションが、コピーに書かれた Live visual source of truth の URL と同じに見える状態にします。

1. 2つの画面を並べる

コピー内の https://design-layer.com/part/ で始まる URL を開きます。もう一方で、セクションを置いた自分のページを開きます。

入場が終わるまで待つ。マウスを乗せる。ページを一番下までスクロールする。この3つを両方で行います。

2. スクロールで動くセクション

プレビューではスクロールに追随するのに、自分のページでは最初のフレームで止まることがあります。

親要素の overflow: hidden、または中身がスクロールできない短い h-screen が、sticky と進行を止めます。セクション自身にスクロールできる距離を残してください。

エージェントへは、プレビュー URL を添えて次のように返します。

text
https://design-layer.com/part/ここにid と動きが違います。
スクロールに追随する部分を、overflow:hidden や短い h-screen で包まないでください。
ページ(またはその領域)が実際にスクロールできるようにして、プレビューの進行に戻してください。

3. 画像が欠ける

コピー内の画像 URL は DesignLayer 上のファイルを指しています。エージェントが別の URL に替えているなら、コピーにあった URL に戻させてください。URL 自体が開けないときだけ、別の画像へ替えます。

4. 見た目が別物になっている

余白、文字の大きさ、イージングがプレビューと違うときは、作り直しを止めます。プレビュー URL を再掲し、そのページの動き・タイポグラフィ・余白に戻すよう指示してください。文言とリンクの差し替えは、動きが揃ってからにします。

プレビューと見比べる | DesignLayer