三句Prompt让Claude Code复刻炫酷网站：Vibe Coding实战教程

三轮对话，从零复刻一个炫酷网站

最近Vibe Coding（氛围编程）的概念持续火热，各路博主纷纷展示用AI编程工具打造的炫酷网站。Vibe Coding 这一概念最早由特斯拉联合创始人、OpenAI联合创始人 Andrej Karpathy 在2025年2月提出，他描述了一种全新的编程范式：开发者不再逐行编写代码，而是通过自然语言描述需求，完全依赖AI来生成、调试和迭代代码。Karpathy 本人甚至表示自己在使用这种方式时会"完全沉浸在氛围中，拥抱指数级增长，忘记代码的存在"。这个概念迅速在开发者社区引发热议，因为它从根本上降低了编程的门槛——你不需要精通某种编程语言的语法，只需要能够清晰地表达你想要什么。

一位B站UP主分享了自己的实战经验：仅用三轮对话，就让Claude Code在不到一小时内完成了一个视觉效果惊艳的网站复刻。Claude Code 是 Anthropic 公司推出的一款基于命令行的AI编程智能体工具，与传统的代码补全插件不同，它能够直接在终端中运行，具备浏览文件系统、执行命令、访问网络资源等能力。它可以理解整个项目的代码上下文，进行跨文件的代码修改，甚至能自主完成从需求分析到代码部署的完整流程。这种"智能体"（Agent）模式意味着开发者可以给出一个高层级的指令，然后让AI自主规划执行步骤、逐步完成任务，而不需要人类在每一步都进行干预。

整个过程没有手写一行代码，核心技巧也并不复杂——关键在于如何给AI下达精准的指令。

第一步：让AI帮你做调研

很多人在做网站时的第一个卡点是——"我不知道我想要什么"。这位UP主的解决方案非常聪明：把调研工作也交给AI。

他给Claude Code的第一个Prompt是：

"我想做一个特别炫酷的网站，你帮我去做一下调研，有哪些网站可以值得参考。"

如果你对"炫酷"有自己的理解，也完全可以在Prompt中给出更明确的定义。比如你偏好极简风格、3D交互、还是粒子动效，都可以直接告诉AI，让它有针对性地去搜索和推荐。这里涉及到Prompt工程（Prompt Engineering）的核心技巧——好的Prompt通常具备明确的目标描述、足够的上下文信息、清晰的约束条件和期望的输出格式。在本案例中，UP主的三轮Prompt看似简单，实际上每一轮都精准地定义了任务边界：第一轮限定了调研范围，第二轮明确了交付标准，第三轮指定了内容来源。这种"少即是多"的Prompt策略，反而比冗长复杂的指令更容易让AI理解和执行。

值得注意的是，Prompt Engineering已经发展成为一个独立的技术领域。研究表明，同样的AI模型在接收到不同质量的Prompt时，输出效果可能存在数量级的差异。业界总结出的几种经典Prompt模式包括：角色设定（让AI扮演特定专家）、思维链（Chain of Thought，引导AI逐步推理）、少样本学习（Few-shot Learning，提供示例引导输出格式）等。在本案例中，UP主虽然没有使用复杂的Prompt技巧，但他巧妙地将一个大任务拆分成三个边界清晰的子任务，每个子任务都足够具体，让AI能够明确知道"做什么"和"做到什么程度"——这本身就是高级Prompt设计的体现。

Claude Code会返回一大堆参考链接，接下来就是人工筛选环节——从中挑出符合自己品味和需求的网站。这一步是人类审美判断力发挥作用的地方，AI负责广撒网，你负责精挑选。

第二步：一比一复刻到本地

选定了心仪的参考网站后，第二轮对话也很简单直接：

"请你一比一帮我复刻这个网站到本地，我需要在本地做修改。"

把目标网站的链接丢给Claude Code，它就会自动去抓取页面上的所有素材——包括布局结构、动效逻辑、图片视频等资源，然后在本地搭建起一个高度还原的副本。

这个复刻过程实际上涉及多项自动化技术的综合运用。首先是网页抓取（Web Scraping），即自动解析目标网站的HTML结构、CSS样式和JavaScript交互逻辑。其次是资源下载，包括图片、视频、字体文件等静态资源的批量获取。更复杂的是动效还原——现代网站大量使用CSS动画、WebGL渲染、GSAP等动画库实现视觉效果，AI需要理解这些动效的实现原理并在本地重新构建。这也解释了为什么复刻过程需要接近一个小时：AI不是简单地"复制粘贴"网页源码，而是在理解设计意图的基础上重新搭建整个前端工程。

从技术实现的角度来看，现代前端网站的复杂度远超普通用户的想象。一个"炫酷"的网站可能同时使用了多种技术栈：Three.js或WebGL实现3D渲染效果，GSAP（GreenSock Animation Platform）处理复杂的时间轴动画，Intersection Observer API实现滚动触发效果，CSS Grid和Flexbox构建响应式布局，以及各种自定义着色器（Shader）实现独特的视觉滤镜。Claude Code在复刻过程中需要逆向分析这些技术的组合方式，理解各组件之间的依赖关系，然后在本地环境中重新组装。这个过程类似于一位经验丰富的前端工程师在"读懂"别人代码后进行重构——只不过AI能够以远超人类的速度完成这项工作。

这个过程耗时最长，UP主提到Claude Code自己"埋头干了接近一个小时"。虽然等待时间不短，但对于开发者来说，这一小时内完全不需要介入，可以继续做其他事情。如果换成人工从零开发一个同等复杂度的网站，可能需要几天甚至更长时间。

第三步：用团队知识库填充内容

网站的骨架和视觉效果搭好之后，下一步就是把别人的内容替换成自己的。这一步UP主的做法尤其值得借鉴——他并没有手动逐项修改，而是利用了团队共享的知识上下文。

他的团队内部有一个协作工具，大家会在里面维护一个"团队大脑"——包含团队介绍、产品信息、品牌素材等结构化资料。这种"团队大脑"本质上是一种结构化的知识库系统，在AI应用领域通常与RAG（Retrieval-Augmented Generation，检索增强生成）技术结合使用。RAG的工作原理是：当AI收到用户请求时，先从外部知识库中检索相关信息，再将这些信息作为上下文注入到大语言模型中，从而生成更准确、更个性化的内容。这种方式解决了大语言模型的两个核心痛点——知识时效性（模型训练数据有截止日期）和领域专业性（通用模型缺乏特定团队或企业的私有信息）。越来越多的团队开始将自己的品牌资料、产品文档、设计规范等整理成结构化知识库，使AI能够快速调用这些"组织记忆"。

这种知识库驱动的工作方式正在成为AI时代团队协作的新范式。传统的团队协作依赖于文档共享和口头传达，信息往往分散在邮件、聊天记录、各种文档中，新成员需要花费大量时间才能建立完整的上下文认知。而结构化的"团队大脑"不仅让人类成员能快速获取信息，更关键的是让AI工具也能"理解"团队的独特语境。当你告诉AI"用我们团队的风格写一段介绍"时，AI能够从知识库中提取品牌调性、常用术语、价值主张等信息，生成高度贴合团队身份的内容。这种人机协作模式的效率提升是指数级的——知识库维护得越完善，AI的输出质量就越高，团队的内容生产速度也就越快。

第三轮Prompt大致是：

"你去读一下我们团队的上下文，根据团队资料去填充这个网站里的内容。"

Claude Code读取这些上下文信息后，就自动把网站中的文案、介绍等内容替换成了团队自己的信息。这个思路的精髓在于：把个人或团队的知识资产变成AI可以直接调用的上下文，大大提升了内容生产的效率。

这个方法的核心价值

表面上看，这只是一个"复刻网站"的小技巧，但背后的方法论值得深思。

调研→复刻→定制的三段式工作流

这三步对话其实对应了一个完整的产品开发流程：市场调研、原型搭建、内容定制。传统流程中，每一步都需要不同角色的参与（产品经理、前端开发、内容运营），而现在一个人配合AI就能串联完成。这种工作流的变革意义在于，它不仅压缩了时间成本，更重要的是消除了角色之间的沟通损耗——需求不再需要经过多次转译，从构想到实现的路径变得前所未有的短。

从更宏观的视角来看，这种三段式工作流反映了AI对知识工作分工模式的根本性重塑。管理学中有一个经典概念叫"交易成本"——组织存在的核心原因之一就是为了降低人与人之间协作的沟通和协调成本。当AI能够同时扮演调研员、开发者和内容编辑的角色时，原本需要跨部门协调的工作变成了单人与AI的对话。这不意味着团队协作会消失，而是协作的颗粒度和方式会发生变化：团队成员可能更多地专注于战略决策、创意方向和质量把控，而将执行层面的工作大量委托给AI。这种转变对个人能力模型的要求也在改变——"全栈能力"不再意味着精通每种技术，而是能够有效地指挥AI完成各环节的工作。

Vibe Coding的最佳学习路径

对于想要学习AI编程的同学，UP主特别推荐这种"复刻+改造"的方式。复刻别人的网站不是目的，而是在这个过程中理解AI的工作方式、学会拆解需求、掌握Prompt的表达技巧。当你能把一个复刻品转化成自己的原创作品时，学习就真正发生了。这种学习路径其实暗合了教育学中"模仿—理解—创造"的经典认知阶梯：先通过复刻建立对技术实现的直觉感知，再通过修改和定制加深对代码结构的理解，最终具备从零创造的能力。

这种学习方法在编程教育领域有着深厚的理论基础。认知心理学研究表明，人类学习复杂技能时，"有意义的模仿"比"从零开始"更高效。当你复刻一个网站时，你实际上在进行一种"逆向工程式学习"——通过观察AI如何将一个视觉设计转化为代码实现，你能够建立起"设计意图"与"技术实现"之间的映射关系。随后的修改和定制过程则是"主动学习"的体现：每一次修改都迫使你理解代码的某个局部是如何工作的，为什么改动这里会影响那里。这比阅读教程或观看视频课程更有效，因为你始终在一个真实的、完整的项目上下文中学习，而不是在孤立的代码片段中练习。

版权提醒不可忽视

最后需要特别强调一个重要注意事项：复刻过程中不可避免会涉及他人的版权素材。

参考网站上的图片、视频、字体甚至特定的设计元素，都可能受到版权保护。如果你的网站仅用于个人学习和练手，问题不大；但如果涉及商用或公开发布，务必做好以下工作：

• 让AI帮你检查哪些素材可能存在版权问题
• 将有版权风险的图片替换为自有素材或商用授权素材
• 视频、音频等多媒体内容尤其需要注意
• 部分网站的代码结构和设计方案本身也可能受保护

值得补充的是，不同国家和地区对网页设计的版权保护范围存在差异。在中国，网页的整体视觉设计可能作为美术作品受到《著作权法》保护，而HTML/CSS代码在具备独创性的情况下也可能被视为文字作品。此外，一些网站的robots.txt文件明确禁止了自动化抓取行为，在技术上和法律上都需要予以尊重。在实际操作中，还需要注意字体文件的授权问题——许多商业字体即使能够从网页中提取，也不意味着你获得了使用授权。建议在复刻完成后，系统性地审查所有外部资源的授权状态，必要时使用Google Fonts等开源字体库和Unsplash、Pexels等提供免费商用授权的图片平台进行替换。

这一点UP主在视频中也做了明确提醒，值得每一位使用AI复刻工具的开发者牢记。

写在最后

从这个案例可以看出，AI编程工具的价值不仅仅在于"写代码"，更在于它重新定义了从创意到产品的整个流程。调研、搭建、内容填充——每一步都可以通过自然语言与AI协作完成。

三句Prompt背后，是对需求的清晰拆解和对AI能力边界的准确把握。这才是Vibe Coding时代最核心的能力。

核心要点

核心要点