[AI Library] Chapter 13: Website Cloning and Customization
Mastering Claude Code
Chapter 13: Website Cloning and Customization
Kim Kyung-jin
Mastering Claude Code
Analyzing Reference Websites Through Screenshots
A community website written in French appears on the screen. The color scheme is refined, and the layout's balance catches the eye. The moment you picture the completed website you want to build in your mind, it is natural to reach for the keyboard first. Yet before writing a single line of code, there is something you must do. You must understand the structure of the reference website with precision.
When asking Claude Code to build a website, a clear difference in quality emerges between explaining verbally and providing visual materials. If you say, "Make it like the Apple homepage," the AI draws from its training data a general impression of the Apple site. But the conversation changes when you deliver a screenshot of the reference website directly.
This is because color codes, spacing ratios, button positions, and the size relationships in typography can all be read concretely from visual information.
The procedure for analyzing a reference website in practice is as follows.
First, obtain a full-page screenshot of the reference website. Using your browser's full-page capture function, you can capture even the areas hidden below the scroll in a single image. This screenshot becomes the reference point for Claude Code to recognize the "target state."
Next, prepare brand assets. Organize your logo files, primary color codes (primary, secondary, background, accent), and the names of the fonts you will use. You borrow the reference website's layout but must replace the brand identity with your own.
Then you write a prompt for Claude Code. "Referencing the layout and structure of this screenshot, create a website with our brand colors and logo applied. Write all the text in English, tailored to our community's context." When you make this request, Claude Code follows the structure of the French source site but fills the colors, typefaces, and content with something entirely new.
One point requires attention. "Cloning" a reference website differs from "referencing" it. You are not copying the HTML source code as-is but using design patterns and layout flows as learning material. The result must contain your own content, your own colors, your own message.
The Screenshot Loop: Build-Capture-Compare-Revise Repetition Strategy
The first build is complete, and the website appears on localhost. The colors are applied as specified, and the logo is in place. Yet the whitespace in the hero section is wider than the reference site, and the card layout alignment is subtly off. How can you narrow this gap?
Here appears a strategy called the screenshot loop. The core of this strategy is the iterative process in which the AI visually confirms its own output, compares it to the reference image, and revises the differences on its own.
Here is how it works.
Claude Code writes the website code. It launches your local server, then captures screenshots on its own. It compares the captured images against the reference screenshot section by section. It lists discrepancies and revises the code. It takes another screenshot and compares again. Only after repeating this process at least twice does it show you the result.
This loop is powerful because the AI does not just read code but uses the rendered visual result as its standard for judgment. When you write margin-top: 2rem in CSS, you cannot know from code alone how that spacing feels on the actual screen. Through screenshots, you can judge that "this section is about 20 pixels wider than the reference site."
Yet the screenshot loop has limits. Problems arise with dynamic elements.
When elements like background animations or scroll-based effects cannot be captured in a still frame, the screenshot captures only part of the element or shows a blank screen entirely. At this point, Claude Code may misinterpret the situation as "not yet properly implemented" and fall into a vicious cycle of over-revising code that already works well.
In such cases, the right answer is to deliberately turn off the screenshot loop. Specify in your prompt: "This is an animated background, so do not use the screenshot tool and write only the code. If revisions are needed, I will verify them directly and let you know." You temporarily withdraw the AI's authority for visual self-checking.
Conversely, for landing pages centered on static layouts, using the screenshot loop to the fullest is wise. Setting the loop to run three or more times produces a noticeable quality difference between the first output and the third.
Using the 21st.dev Component Library
With the overall layout satisfying, the button in the hero section feels flat. A single blue button with rounded corners sits alone. If you could change this one button to a button with a shimmering rainbow border, the entire site's impression would transform.
21st.dev is a library collecting individual website components. Various elements like buttons, background animations, navigation bars, card UIs, and toggle switches are pre-coded. You select the component you want, copy it in prompt form, and pass it to Claude Code.
The workflow is as follows.
Visit the 21st.dev site and explore its categories. You will find diverse classifications like buttons, backgrounds, hero sections, and shader effects. Select the component you want, and the prompt code for that component is generated. Copy this code.
Return to Claude Code and compose your prompt. You request "Apply this background element behind the hero text" and paste the copied code. Claude Code grasps the code's structure and integrates it to fit your existing project's context.
The advantage of this method is that instead of borrowing an entire site from one reference, you combine individual elements from multiple sources. The button draws inspiration from site A, the background uses 21st.dev's wave animation, and the card layout references site B's structure. Rather than imitating one site wholesale, you curate diverse elements to produce something unique.
One point warrants caution. Many components from 21st.dev include animations. As discussed earlier in the screenshot loop's limits, it is safer to disable screenshot comparison when adding dynamic elements. You must also convey the instruction: "This is an animated background, so do not compare using the screenshot tool. Write the code directly, and I will verify it."
Otherwise, Claude Code captures only the middle frame of the animation from a still image, judges it as "incompletely implemented," and repeats excessive revisions.
After applying a component, iterative fine-tuning is essential. "The background animation is too busy. Place a semi-transparent background behind the hero text to improve readability. Change the 'Earn More' text color from orange to blue." The process of polishing through these successive refinement requests determines the final quality.
Bypass Permission Mode and the Pros and Cons of Autonomous Building
Claude Code stops in the middle of writing. A permission request appears on screen: "May I run this command?" It asks for your permission every time you create files, install packages, or start the server. This is a safe design, but when you are building a website and these interruptions repeat dozens of times, the workflow breaks.
Bypass permission mode is a setting that removes this interruption. Search for "Claude Code" in VS Code's settings, then activate the "Allow Dangerously Skip Permissions" option, and Claude Code will run commands continuously without separate approval.
The advantages of this mode are clear. The entire screenshot loop runs automatically. The six steps of writing code, starting the server, capturing screenshots, comparing, revising, and restarting proceed continuously without your intervention. Claude Code creates a to-do list, checks off items one by one, and shows you only the completed result.
Yet there is a reason the word "Dangerously" appears in this mode's name. It means Claude Code can execute any command. File deletion, system setting changes, and external network requests can occur without approval.
From a practical perspective, here is how to manage the risk.
When working with bypass permission mode enabled, the principle is never to leave the screen entirely. It is enough to check Claude Code's progress occasionally while doing other work alongside. Running autonomous builds overnight and going to sleep is not recommended.
A more sophisticated approach also exists. Instead of bypass permission mode, use permissions configuration to place safe commands on an allow list and dangerous commands on a deny list. For example, allow file creation and reading but block deletion commands like rm -rf.
Commands on the deny list have higher priority than the allow list, preventing dangerous operations from running by mistake. Using this approach, you achieve nearly the same speed as bypass permission mode while maintaining a safety net.
In the early stage of building a website, sensitive data is often absent, so using bypass permission mode carries little practical risk. But once your project begins to include API keys or database connection information, switching to selective permission settings is wise.
The finished website runs smoothly on localhost. The colors and layout please you, and the animations feel natural. Now you cannot keep this result confined within your computer. You must upload it somewhere others can access. In that process, you need a tool to safely manage the code's change history.
By Attorney Kim Kyung-jin, Artificial Intelligence Expert
AI law and policy specialist · former member of the National Assembly · author of numerous works
If this book has stayed by your side even briefly, please support the next story so it can reach the world.
(Voluntary sponsorship account: Nonghyup 302-1096-0948-81 Account holder: Kim Kyung-jin)
Kim Kyung-jin
Attorney · Former Member of the National Assembly · AI Policy Researcher
© 2026 Kim Kyung-jin. All rights reserved.