我如何用 vibe coding 做出价值 1 万美元的精美落地页（Claude Code 新手教程）

我如何用 vibe coding 做出漂亮的 $10,000 落地页（Claude Code 新手教程） 2026年7月18日 · 10 分钟阅读 · 查看原文 ↗ Claude 自动化 AI 我从零开始搭好了 aiwithremy.com 的新落地页，一开始完全没有任何技术经验，而它看起来像是代理商要收 $10,000 才能做出来的东西。背景里流动的数字艺术，一架小飞机拖着横幅划过屏幕，还有真的能点的复古按钮。下面是从头到尾的完整流程。 为什么大多数人直接跳到了错误的那一步 用 Claude Code 的本能反应，就是直接打开它，开始输入你想要的东西。这完全搞反了，也正是大多数人最后做出来的页面"技术上能用、却让人毫无印象"的原因。 真正的第一步跟 Claude 一点关系都没有。它是寻找真实的设计灵感。像 siteinspire、landbook 和 framer marketplace 这样的网站，全是真正的设计师做的页面。从其中几个页面里各取一部分——这个的菜单风格、那个的复古数字感、第三个的居中布局——就能给 Claude 一些真实可用的素材，而不是让它去猜你心里"漂亮"到底是什么意思。 没有人有一张想原封不动照抄的完美页面。它永远是一只"弗兰肯斯坦"，这里借一点，那里借一点，直到你脑子里浮现出一个大致的画面，知道自己到底要什么。 把灵感变成一份真正的简报 等你有了一个参考网站的候选清单，下一步就是做所谓的 PRD，也就是产品需求文档。它其实就是项目的一份像样的简报，而且真的值得在让 Claude Code 介入之前先把它做好。 Gemini 特别适合处理这一部分，因为它在读图方面很强——等你开始喂它截图时，这一点就很关键了。做法是：用 viewpage.co 之类的工具，从任何参考网站直接把 HTML 抓下来，粘贴 URL 就能拉出代码；再用一个叫 Go Full Page 的 Chrome 扩展配合整页截图，它能截下整段滚动，而不是只能看到一眼的范围。值得知道的是，它不一定每次都灵。有一个网站有某种拦截，导致 HTML 完全下载不下来，而这个网站恰好是整个清单里我最喜欢的那个参考。遇到这种情况，单靠截图也依然能把意思传达到位。 然后你要明确地告诉 Gemini，你到底喜欢每一个的哪一点。不是"我喜欢这个网站"，而是"我要这个的布局、这个居中结构、这个留白，但不要那个的配色，配色来自一个完全不同的参考。"越具体，后面 Claude 要猜的东西就越少。 示例："我喜欢这个 weight 模板的布局，居中的容器，标题和注册栏摆在正中央。但我不喜欢它的风格。我喜欢另外三个网站的复古数字感，用键盘字符和老式字体做出来，但要比纯复古更现代一点。配色保持简单，柔和的黑色，白色背景。" 那种程度的明确性，再加上真实的 HTML 和截图，才能把一句含糊的"做得漂亮点"，变成一份 Claude 真正能照着执行的简报。 搭好实际的工作区 Claude Code 在 Visual Studio Code 里运行——那是一个免费的编辑器，通过 Anthropic 官方扩展安装。装好、登录，它就能跑了。还有另外两个扩展对这类工作特别重要：一个让你在构建过程中直接预览真实网站，而不是盯着一堆原始代码；另一个能把 Markdown 文件正确渲染出来，而不是给你一堵难看的纯文本墙。 电脑上的一个项目文件夹装下所有东西：PRD、参考截图、HTML 文件，全都放在一处，Claude Code 可以直接读取。在真正开始构建之前，还有一样值得安装：一个前端设计 skill，官方出品，由 Anthropic 打造，它确实能让 Claude 在具体的设计决策上明显更出色。它是一个插件安装，几条终端命令；如果你卡住了，直接把链接丢给 Claude，让它带你走完安装过程就行。 默默干了很多活的定制指令 在真正的 prompt 之前，项目文件夹里放着一个 claude.md 文件，这是一组简短的指令，告诉 Claude 它在构建什么、面向谁，以及做任何决定前该查阅哪些文件。这一份指向了 PRD 和一份理想客户画像文档，两个都是就躺在那个文件夹里的真实文件。 所有上下文都加载好了之后，真正启动的 prompt 反而小得几乎可笑。告诉 Claude 使用前端设计 skill，让它指向 PRD、参考文件夹和客户画像，并要求它在碰任何代码之前先写一份计划。开始前把模型切换到 Opus 4.8——这是做这种重设计任务时最强的选项。Claude 会带着一份完整的实施计划回来：加载速度考量、设计哲学，应有尽有，而这时一行代码都还没写。 第一轮不行，而这其实很正常 这是大多数教程会跳过的部分。用上面这套流程做出来的第一版，不对。技术上搭得很好，严格遵循了简报，只是不是你脑子里想象的那个样子。 诚实地复盘原因：问题出在简报本身，而不是 Claude 的执行。它完全按吩咐做了，只是吩咐还不够具体。所以解决办法不是跟 Claude 较劲去改输出，而是回头打磨 PRD 本身：换掉参考网站，把确切的氛围说清楚。 这才是埋藏在整个流程里的真正教训。Claude Code 让你失望的次数，远不如你递给它的简报让你失望的次数多。第二轮，用一份真正改进过的 PRD，第一次尝试就做出了大幅接近正确的结果。 还有一件事值得在它让你付出代价之前知道。在长会话的后期，一条单独的指令，曾经把一整块构建彻底毁掉了——是没了，不只是出错。之后的修复，是从一个保存好的检查点重建那一块。真正的原因往往能追溯到上下文被填满：有个小进度条显示 Claude 还保留着多少对话，越满，输出就会明显变差、变懒。解决办法很简单：某一块做扎实之后，定期用 /clear 命令清空对话。它不会删掉任何东西，旧对话还在那里可以回看，它只是用一份干净、专注的上下文开始下一段工作，而不是用一份乱糟糟的。 用大白话精修，不需要任何设计词汇 一旦有了真正的起点，剩下的就是像对一个人描述那样，把改动说清楚。把这个绿色换成更接近某个参考网站的蓝色。保留现代感，但带进更多复古质感。在 hero 区加一段 ASCII 艺术动画——其中一些是直接从 ASCII 艺术网站复制粘贴进聊天里的。 有个值得直接偷来的技巧：屏幕录制一个有你喜欢的动画风格的网站，把它转成 GIF，再把 GIF 一帧一帧地交给 Claude，让它真正看到动效，而不是去猜一段文字描述。当某一块技术上正确、但视觉上不对——比如元素稍微没对齐——一张截图加一条画在问题上的红线，比任何文字说明都能更快传达该改哪里。 当你不知道词汇时，一个真正有用的技巧 不懂网页设计术语，并不会拖慢这件事。Gemini 读图很强，所以把你想要的那一块截屏，让 Gemini 替 Claude 写出真正的 prompt——元提示（meta prompting），一个模型给另一个模型写指令——能把这个缺口完全补上。你不需要知道你想要的视觉效果叫什么名字，只需要知道它长什么样。 为什么在这里不断保存进度真的很重要 GitHub 潜藏在这一切的底层，是真正的保存系统，值得把它想成一个专门为代码打造的 Google Drive。每一个有意义的版本都作为检查点推送上去，这比听起来重要得多，因为一条出错的指令，如果背后没有保存过的版本，真的会毁掉一整块且无法挽回。 它也是把一切连接起来、最终上线的那一环，所以趁早、在还没觉得有必要之前就把它设好，能省下后面真正头疼的麻烦。 让它真正可用，而不只是好看 一个连一封邮件都收不到的漂亮页面，是 demo，不是落地页。接入真正的邮件注册、线索表单或预约日历，取决于你实际在用什么：表单用 Typeform 或 Go High Level，预约用 cal.com，邮件采集就用你的通讯或生意已经在用的那个平台。 不清楚某个平台的具体集成怎么做，也不是障碍。让 Claude 去调研可用的选项、把取舍列出来，效果跟你提前知道答案一样好。 直接在同一页面上卖东西——数字产品、课程、任何东西——原理也一样：接入一个 Stripe 链接，让购买按钮把访客带到一个真正的结账页，而不是一个死胡同。 用自己的域名上线 用 Vercel 托管，差不多是这整个流程里最省事的一步了，还带免费方案。把它连到 GitHub 仓库，导入项目，部署，网站就上线了。之后通过 GitHub 推送的任何改动，都会自动反映到线上站点，不需要单独手动上传。在同一个后台里，再多一步，就能把默认的 vercel 域名换成一个真正的自定义域名。 这一切底下的真正系统 这些其实都跟某一个落地页无关。它是同一个模式，出现在 Claude Code 真正好用的每一个地方：一份真正的简报，而不是含糊的要求；Claude 可以指向的参考素材，而不是靠猜；以及一套用大白话迭代的流程，而不是去跟你还不会的技术术语较劲。 把简报好好做一次，那句"几小时、零代码、一万美元的质感"就不再像夸张，而更像是把第一步做对之后的必然结果。 p.s. 如果你想要这次构建用的完整 PRD 模板和精确的 claude.md 结构，通过 aiwithremy.com 的通讯获取。 而如果你想要一套围绕你整个生意构建的完整系统，而不只是一个落地页，那就是 AI 课程交付的东西。在这里预定席位 → awr-gamut-exploration.vercel.app/self-paced#reserve 带一支 20 人以上的团队，需要把这一套在公司层面铺开，而不只是给你自己用？那是完全不同的量级 → awr-gamut-exploration.vercel.app/enterprise remy 标签：# X # Claude # 自动化 # AI # 指南 相关文章 10 个 SEO 外链 Claude 自动化，3 个月换来 61k 次 AI 提及 外链建设就是不断试错。 SEO AI Claude 自动化