已验证 编程开发

用 Claude Code 从零做一个产品落地页

不会写代码也能做网站。用 Claude Code 生成完整的产品落地页，Vercel 一键部署上线，2 小时从零到有。

🔧 2 个工具 ⏱ ~2h 💰 免费 📊 中等

第一步：向 Claude Code 描述你的产品

打开终端，启动 Claude Code。第一步不是直接让它写代码，而是把你的产品讲清楚：

我要做一个产品落地页，请帮我从零开始创建。

产品信息：
- 产品名称：[你的产品名]
- 一句话描述：[产品是什么，解决什么问题]
- 目标用户：[谁会用这个产品]
- 核心功能：[列出 3-5 个核心卖点]
- 想要的风格：[简约/科技感/温暖/专业，可以给一个参考网站]
- 主要 CTA：[你希望用户做什么——注册、下载、联系销售]

请先给我一个页面结构方案（不写代码），列出每个 section 的内容和目的。

Claude Code 会返回一个页面结构，通常包含：Hero 区域、功能介绍、用户评价、定价方案、CTA 等。在这个阶段确认结构合理后再继续。

踩坑提醒：很多人跳过这一步直接说「帮我做个落地页」，结果出来的东西太通用，和你的产品完全不搭。花 5 分钟把产品信息写清楚，后面能省 1 小时的来回修改。

第二步：让 Claude Code 生成完整网页

结构确认后，让 Claude Code 开始生成代码：

好的，请按这个结构帮我创建一个完整的落地页项目。

技术要求：
- 使用纯 HTML + Tailwind CSS（通过 CDN 引入），不需要框架
- 响应式设计，手机端体验要好
- 加入简单的滚动动画（用 CSS 或轻量 JS）
- 页面加载速度要快，图片先用 placeholder
- 中文内容，字体用系统默认中文字体

请直接创建项目文件夹和所有文件。

Claude Code 会在当前目录创建完整的项目文件。生成完成后：

  1. 用 open index.html 在浏览器中预览
  2. 检查手机端效果（浏览器 F12 → 切换设备模式）
  3. 列出需要调整的地方

对不满意的地方，直接告诉 Claude Code 修改：

请修改以下内容：
1. Hero 区域的标题改成"[新标题]"
2. 背景色太深了，换成浅色系
3. 功能卡片加上图标，用 emoji 即可
4. CTA 按钮要更突出，用对比色

Claude Code 会直接修改文件，你刷新浏览器就能看到效果。反复迭代 3-5 轮，直到满意为止。

如果你需要更精美的配图和插画，Canva Pro（$12.99/月） 有大量高质量素材和模板，可以导出 PNG/SVG 直接放到页面里，视觉效果会上一个档次。

踩坑提醒：不要一次提太多修改需求（超过 5 条），Claude Code 容易顾此失彼。每轮 2-3 个修改点，确认没问题后再提下一轮。另外，如果对某个版本很满意，记得 git commit 保存一下，防止后续修改翻车时回不去。

第三步：部署到 Vercel

页面做好后，3 分钟部署上线：

  1. 创建 GitHub 仓库（如果还没有）：
请帮我初始化 git 仓库，创建 .gitignore 文件，并做第一次 commit。

  1. 推送到 GitHub：

    • 在 GitHub 网站上创建一个新仓库
    • 按照提示执行 git remote add 和 git push

  2. 连接 Vercel：

    • 打开 vercel.com，用 GitHub 账号登录
    • 点击「Import Project」→ 选择你的仓库
    • Framework 选「Other」→ 点击 Deploy
    • 30 秒后你的网站就上线了，Vercel 会给你一个 .vercel.app 域名

之后每次你 push 代码到 GitHub，Vercel 会自动重新部署，非常方便。

踩坑提醒：Vercel 免费版对纯静态页面完全够用。但如果你的页面需要后端功能（如表单提交、数据库），免费额度可能不够。一个简单的替代方案是用 Google Forms 嵌入表单，或者用 Formspree 免费版处理表单提交。

第四步：迭代优化设计

上线只是开始，一个好的落地页需要持续优化：

首次上线后立刻做的事：

  1. 用手机实际访问一遍，检查加载速度和显示效果
  2. 把链接发给 3 个朋友，让他们说出第一印象和困惑点
  3. 检查所有链接和按钮是否正常工作

一周后优化方向：

  • 根据用户反馈调整文案（尤其是 Hero 区域的标题和副标题）
  • 如果跳出率高，检查首屏是否在 3 秒内传达了核心价值
  • 加入 Google Analytics（免费）追踪访问数据

常见的 Claude Code 迭代 prompt：

请帮我优化这个落地页的性能：
1. 压缩 CSS，移除未使用的样式
2. 图片加上 lazy loading
3. 加入基本的 SEO meta 标签（title, description, og:image）
4. 加入 Google Analytics 代码，tracking ID 是 [你的 ID]
我想加一个「常见问题」section，放在定价方案下面。
以下是 5 个常见问题和答案：
[列出 Q&A]
请用手风琴（accordion）的交互方式展示。

踩坑提醒：落地页最常见的错误是「信息太多」。一个页面只传达一个核心信息，只有一个主要 CTA。如果你发现页面越改越长、按钮越加越多，是时候停下来砍内容了。记住：落地页的目标不是展示你知道多少，而是让用户做一个动作。