画像から Next.js ランディングページを再現
Next.js、画像生成によるアセット作成、Playwright による検証を用いて、画像からランディングページを再現する高度なワークフロー。
プロンプト
/goal 添付画像のLPをNext.jsで実装。再現度95%以上になるまで。
画像以外の手段だと再現が難しそうな箇所は適切に素材をimage_genで画像生成しながら作成して。
- アイコンや画像はなるべく元の画像と一致させること。
元画像から該当部分をクロップして参考画像としてimage_genに渡しつつ生成する
（codex exec は -i で参照画像を渡し、プロンプトは標準入力で渡す）
- レスポンシブ対応すること。375〜1440pxの各幅で検証し、
横スクロールがないだけでなく、要素の重なり・見切れもないこと
（固定幅カードは w-full max-w-[Npx]、絶対配置レイアウトは広い幅のみで発動）
- Playwrightでスクショ→元画像と比較→修正のループを回し、
npm run build が通ったら完了
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
claude-fable-5 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の web ページ プロンプトがあり、すべて自由にコピーして使えます。
ほかの web ページ プロンプトを見る
さらに探索
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。