基于图像的 Next.js 着陆页复刻
一套复杂的工作流，旨在利用 Next.js、用于素材生成的图像生成工具以及用于验证的 Playwright，从图像中复刻着陆页。
提示词
/goal 使用 Next.js 实现附件图片中的着陆页，直至复刻准确度超过 95%。
对于难以通过非图像手段复刻的部分，请通过 image_gen 适当地生成素材进行创建。
- 图标和图像应尽可能与原图匹配。
从原图中裁剪相关部分，并将其作为参考图像传递给 image_gen（使用 codex exec -i 传递参考图像，并通过标准输入提供提示词）。
- 确保响应式布局。验证 375px 到 1440px 宽度范围内的显示效果，确保没有水平滚动、元素重叠或裁剪（固定宽度的卡片使用 w-full max-w-[Npx]，仅在宽屏下使用绝对定位）。
- 运行 Playwright 截图循环 -> 与原图对比 -> 修复。在 npm run build 通过后即告完成。
如何使用这条提示词
- 1
复制上方完整的提示词。
- 2
打开支持 claude-fable-5 的平台（例如 YouMind），把提示词粘贴进去。
- 3
按你的想法替换主体、风格或细节，然后生成。
这是 YouMind 提示词库里的一条免费 AI 提示词。这里还有成千上万条 网页 提示词，都能免费复制和改用。
探索更多 网页 提示词
