CloneIt: An Intelligent Web UI Cloning Tool Based on Agentic Workflow

CloneIt is a command-line AI Agent that corely adopts the PLAN→ACTION→OBSERVATION loop architecture, combining the Gemini 2.5 Flash multimodal model and Playwright browser automation tool. It can clone any website into a directly runnable single-file HTML/CSS/JS implementation. It solves the problem that traditional static crawlers struggle to restore visual design and interactive details, and is an application product of intelligent agent technology in the field of web cloning.

Web cloning is a common need for front-end developers, but traditional static crawlers can only obtain surface-level code, making it difficult to restore visual design and interactive details, and cannot generate directly runnable single-file implementations. With the development of large language models and multimodal AI, AI Agent solutions with autonomous decision-making capabilities have become possible, and CloneIt is the product of this idea.

The core design concept of CloneIt is Agentic Workflow, following the PLAN→ACTION→OBSERVATION loop:

• Planning Phase: Analyze the structural characteristics of the target website and formulate a step-by-step execution plan;
• Execution Phase: Call Playwright to perform operations such as web page screenshots, DOM tree extraction, and style calculation;
• Observation Phase: Evaluate the execution results, adjust the strategy, or enter the next cycle. This architecture can handle complex multi-step tasks and approach the target through multiple iterations.

CloneIt's technology selection includes:

• Gemini 2.5 Flash: Core AI model with excellent multimodal understanding capabilities (text + visual), fast response speed and high cost-effectiveness;
• Playwright: Browser automation tool that supports full-page screenshots, DOM tree extraction, computed style querying, and dynamic content processing;
• Node.js + TypeScript: Runtime foundation that provides type safety, implements interactive CLI via readline-sync, and supports direct execution of TypeScript code via tsx.

CloneIt is designed with the following features for high-quality cloning:

• Visual Analysis: Understand design details such as visual hierarchy and color matching through full-page screenshots;
• Structured Extraction: Simplify the DOM tree, remove irrelevant noise, and retain the core structure;
• Style Inference: Obtain the final computed style of elements after inheritance and cascading;
• Single-File Output: Generate an independent index.html containing inline styles and scripts, with no external dependencies;
• Multi-URL Session Support: A single CLI session can clone multiple websites consecutively.

The process of using CloneIt is simple and intuitive:

1. Execute npm start to launch the Agent;
2. Enter the target website URL;
3. The Agent autonomously completes web page structure analysis, screenshot capture, DOM and style information extraction;
4. The cloning result is saved to ./output/index.html, which can be directly opened and viewed in a browser. The entire process requires no user intervention, reflecting the value of Agentic Workflow.

CloneIt is suitable for various scenarios:

• Front-end Learners: Quickly obtain reference implementations and understand excellent website design skills;
• Product Managers/Designers: Quickly build prototypes without waiting for development resources;
• Developers: Assist in competitive product analysis to understand competitors' page structures and interactions;
• Archiving Needs: The single-file format is convenient for long-term storage and sharing.

Current Limitations:

• Cloning quality depends on the understanding ability of the Gemini model; complex designs may not be perfectly restored;
• Cloning dynamic interaction functions (such as complex animations and personalized content) still has challenges;
• The generated code may have redundancy and requires manual optimization. Future Improvements:
• Support more AI models (Claude, GPT-4o, etc.);
• Provide fine-grained configuration options (such as specifying to clone specific components);
• Integrate code optimization and compression functions;
• Support interaction logic cloning.