Cursor で LP の見た目が揃わないときの直し方
公開日: 2026年9月12日 · 読了目安 8 分
Cursor で生成したランディングページがセクションごとに顔の違う状態になる理由と直し方。トークン、モーションの強さ、完成1ページからの寄せ方。
揃わないのは、エージェントが悪いのではない
セクションを別々のチャットで生成すると、余白、半径、モーションの強さが散ります。指示が「カッコよく」だと、毎回別の SaaS 顔が出ます。
直し方は、生成を増やすことではなく、共通トークンと、動きの置き場を先に決めることです。
散らばる3つの層
1. 色・フォント・半径。CSS 変数を1ファイルに固定し、毎回「既存トークンに合わせて」と書きます。
2. 余白。セクションの py を 24 / 32 / 40 のように段階化します。
3. モーション。強い動きはヒーローと CTA だけ。他は入場なし、または薄いフェード。
直し方の手順
ステップ1：page を見て、一番強い動きを2つ残し、他を切る。
ステップ2：色をトークンに置換するようエージェントに頼む。
ステップ3：どうしてもリズムが戻らないなら、完成1ページを土台にし、文言だけ移す。
カタログを「基準の動き」にする
ライブで見たイージングを残し、自前生成のモーションを足さない。DesignLayer の Templates は、1ページ分のリズムが先に揃っています。コピーは Pro です。
セクション単位なら、今日の無料枠（1日3回）でヒーローだけ載せ、他は静的のまま公開する方が、バラバラな動きより強く見えます。https://design-layer.com/components
まとめ
揃える仕事は、足すことより引くことです。1日公開の手順は https://design-layer.com/articles/cursor-nextjs-landing-page-guide です。