← Back to Prompt Guides
🧱
AI Website Reference-to-Code Prompts Prompt Guide
🎯 Core Principles
1. 用“参考结构重构”，而不是侵权式复制
这类工具的流量很大，但对外文案要安全：不要鼓励复制他人品牌、素材、图片和文案。正确定位是：参考优秀页面的信息架构和交互模式，用自有素材重构成 Next.js / React 页面。
推荐表达：
- 参考页面结构
- 合法授权素材
- 自有网站改版
- Landing Page 快速生成
- 设计灵感转代码
2. 页面转代码的高质量 Prompt 结构
AI 建站提示词不要只说“帮我做一个一样的页面”。要拆成：目标、参考、必须不同、技术栈、组件结构、验收标准。
模板：
目标：为 [产品/服务] 生成一个高转化 Landing Page。
参考：借鉴 [参考页面] 的信息层级和视觉节奏，但不要复制品牌、图片、文案或商标。
技术栈：Next.js + TypeScript + Tailwind CSS。
页面模块：Hero、痛点、解决方案、功能、案例、价格、FAQ、CTA。
要求：移动端优先、可访问性良好、组件命名清晰、不要引入无用依赖。
输出：完整文件结构 + 每个文件代码 + 后续优化建议。
3. 先让 AI 做页面审计，再生成代码
直接生成代码容易做成空壳。更稳的流程是：先分析参考页为什么有效，再生成自己的页面。
两阶段流程：
第一步：请分析这个参考页面的信息架构、转化路径、CTA、信任信号和移动端布局。
第二步：基于分析结果，为我的产品重新设计一个原创页面，不复制任何文案和素材。
4. 把转化目标写进 Prompt
Landing Page 不是好看就行，必须服务转化。给 AI 的提示词里要写清楚主 CTA、次 CTA、目标用户、转化阻力和信任证据。
📋 Copy-ready Prompt Templates
参考网页生成 Next.js 页面
你是一位资深前端工程师和转化率优化专家。
请参考这个页面的信息架构和视觉节奏：[参考 URL 或截图描述]
为我的产品生成一个原创 Landing Page。
产品信息：
- 产品名：[输入]
- 目标用户：[输入]
- 核心卖点：[输入]
- 主 CTA：[输入]
- 信任证据：[输入]
重要限制：
- 不复制参考站的品牌、商标、图片、文案
- 只借鉴布局逻辑和转化结构
- 使用 Next.js + TypeScript + Tailwind CSS
- 移动端优先
- 代码要干净、组件化、可维护
请输出：
1. 页面模块结构
2. 文件结构
3. 完整代码
4. 可继续优化的 5 个点竞品页面转原创落地页
我会给你一个竞品页面摘要，请只提炼转化逻辑，不复制表达。
竞品页面摘要：
[粘贴模块、标题、CTA、价格、FAQ 摘要]
我的产品：
[输入产品信息]
请输出一个原创落地页方案：
- Hero 标题 5 个版本
- 页面模块顺序
- 每个模块的核心文案
- 适合放哪些截图/证明
- FAQ 10 个
- 给 v0 / Claude Code / Cursor 使用的开发 Prompt