Three Prompts to Clone a Stunning Website with Claude Code: A Vibe Coding Hands-On Tutorial

Three Conversations, One Stunning Website Clone from Scratch

Vibe Coding has been gaining serious momentum lately, with creators everywhere showcasing impressive websites built using AI coding tools. The concept was first coined by Andrej Karpathy — co-founder of Tesla and OpenAI — in February 2025. He described an entirely new programming paradigm: instead of writing code line by line, developers describe what they want in natural language and rely entirely on AI to generate, debug, and iterate on the code. Karpathy himself said that when using this approach, he would "fully surrender to the vibes, embrace exponentials, and forget that the code even exists." The concept quickly sparked heated discussion in the developer community because it fundamentally lowers the barrier to programming — you don't need to master the syntax of any programming language; you just need to clearly express what you want.

A content creator on Bilibili shared their hands-on experience: using just three rounds of conversation, they had Claude Code complete a visually stunning website clone in under an hour. Claude Code is a command-line-based AI coding agent developed by Anthropic. Unlike traditional code completion plugins, it runs directly in the terminal and can browse the file system, execute commands, and access web resources. It understands the full code context of a project, makes cross-file modifications, and can even autonomously handle the entire workflow from requirements analysis to code deployment. This "agent" mode means developers can issue a high-level instruction and let the AI plan and execute the steps on its own, without human intervention at every stage.

Not a single line of code was written by hand throughout the process, and the core technique isn't complicated — the key lies in how to give AI precise instructions.

Step 1: Let AI Do the Research

The first sticking point for many people when building a website is — "I don't know what I want." This creator's solution was brilliantly simple: delegate the research to AI.

The first prompt given to Claude Code was:

"I want to build a really cool-looking website. Help me do some research on what websites are worth referencing."

If you have your own definition of "cool," you can absolutely provide a more specific description in your prompt. Whether you prefer minimalist design, 3D interactions, or particle effects, just tell the AI directly so it can search and recommend accordingly. This touches on the core skill of Prompt Engineering — good prompts typically include a clear goal description, sufficient context, well-defined constraints, and an expected output format. In this case, the creator's three prompts seem simple on the surface, but each one precisely defines the task boundary: the first limits the research scope, the second sets the delivery standard, and the third specifies the content source. This "less is more" prompt strategy is actually easier for AI to understand and execute than lengthy, complex instructions.

Claude Code returns a large batch of reference links, and then comes the manual filtering step — picking out the websites that match your taste and needs. This is where human aesthetic judgment comes into play: AI casts a wide net, and you make the final selection.

Step 2: One-to-One Clone to Local

Once you've chosen your target reference website, the second round of conversation is equally straightforward:

"Please clone this website one-to-one to my local environment. I need to make modifications locally."

Drop the target website's URL into Claude Code, and it automatically scrapes all the assets from the page — including layout structure, animation logic, images, videos, and other resources — then builds a highly faithful replica locally.

This cloning process actually involves the combined use of multiple automation technologies. First is web scraping — automatically parsing the target website's HTML structure, CSS styles, and JavaScript interaction logic. Next is resource downloading, including batch retrieval of static assets like images, videos, and font files. Even more complex is animation reproduction — modern websites heavily use CSS animations, WebGL rendering, animation libraries like GSAP, and other techniques to achieve visual effects. The AI needs to understand the implementation principles behind these animations and reconstruct them locally. This explains why the cloning process takes close to an hour: the AI isn't simply "copy-pasting" the webpage source code but is rebuilding the entire front-end project based on its understanding of the design intent.

This step takes the longest. The creator mentioned that Claude Code "worked away on its own for close to an hour." While the wait isn't short, the developer doesn't need to intervene at all during that time and can continue with other tasks. If a human developer were to build a website of equivalent complexity from scratch, it could take days or even longer.

Step 3: Fill in Content Using Team Knowledge Base

Once the website's skeleton and visual effects are in place, the next step is replacing someone else's content with your own. The creator's approach here is particularly worth learning from — instead of manually editing each item, he leveraged shared team knowledge context.

His team maintains an internal collaboration tool where everyone contributes to a "team brain" — containing structured materials like team introductions, product information, and brand assets. This "team brain" is essentially a structured knowledge base system, commonly used in AI applications in conjunction with RAG (Retrieval-Augmented Generation) technology. RAG works by first retrieving relevant information from an external knowledge base when the AI receives a user request, then injecting that information as context into the large language model to generate more accurate, personalized content. This approach addresses two core pain points of large language models — knowledge timeliness (model training data has a cutoff date) and domain expertise (general-purpose models lack specific team or enterprise private information). More and more teams are organizing their brand materials, product documentation, and design specifications into structured knowledge bases, enabling AI to quickly access this "organizational memory."

The third prompt was roughly:

"Read our team's context and fill in the website content based on our team materials."

After reading this context information, Claude Code automatically replaced the website's copy, descriptions, and other content with the team's own information. The brilliance of this approach lies in: turning personal or team knowledge assets into context that AI can directly access, dramatically improving content production efficiency.

The Core Value of This Method

On the surface, this is just a small trick for "cloning websites," but the underlying methodology deserves deeper reflection.

The Three-Phase Workflow: Research → Clone → Customize

These three conversation rounds actually correspond to a complete product development process: market research, prototype building, and content customization. In traditional workflows, each step requires different roles (product manager, front-end developer, content operations), but now one person working with AI can handle the entire chain. The transformative significance of this workflow is that it not only compresses time costs but, more importantly, eliminates communication overhead between roles — requirements no longer need to go through multiple rounds of translation, and the path from concept to implementation becomes unprecedentedly short.

The Best Learning Path for Vibe Coding

For those looking to learn AI-assisted programming, the creator specifically recommends this "clone + customize" approach. Cloning someone else's website isn't the goal — the real value lies in understanding how AI works, learning to break down requirements, and mastering prompt expression techniques throughout the process. When you can transform a clone into your own original work, that's when real learning happens. This learning path actually aligns with the classic cognitive ladder in education theory — "imitate, understand, create": first build intuitive perception of technical implementation through cloning, then deepen understanding of code structure through modification and customization, and ultimately develop the ability to create from scratch.

Copyright Reminders You Can't Ignore

Finally, one important note deserves special emphasis: the cloning process inevitably involves copyrighted materials belonging to others.

Images, videos, fonts, and even specific design elements on reference websites may be copyright-protected. If your website is only for personal learning and practice, it's generally fine; but if it involves commercial use or public release, make sure to:

• Have AI help you check which assets may have copyright issues
• Replace copyright-risky images with your own assets or commercially licensed materials
• Pay special attention to multimedia content like videos and audio
• Note that some websites' code structures and design schemes themselves may also be protected

It's worth adding that copyright protection for web design varies across countries and regions. In China, a website's overall visual design may be protected as an artistic work under the Copyright Law, and HTML/CSS code with sufficient originality may also be considered a literary work. Additionally, some websites' robots.txt files explicitly prohibit automated scraping, which should be respected both technically and legally.

The creator also made this point clearly in the video — something every developer using AI cloning tools should keep in mind.

Final Thoughts

This case demonstrates that the value of AI coding tools goes far beyond "writing code" — they redefine the entire process from idea to product. Research, building, content filling — every step can be accomplished through natural language collaboration with AI.

Behind those three prompts lies a clear decomposition of requirements and an accurate understanding of AI's capability boundaries. That is the most essential skill in the Vibe Coding era.