Perfect UI Cloning: AI Agent Skill for Precise Prototypes

Perfect UI Cloning: AI Agent Skill for Precise Prototypes

This skill enables the precise replication of a real application's screens as pixel-accurate HTML artboards. It facilitates the creation of self-contained, high-fidelity prototypes by transforming screenshots into structured HTML files.

What this skill does

• Clones application user interfaces with pixel-perfect precision, producing HTML artboards on a prototype canvas.
• Overlays a grid on the reference design, samples colors, and generates a comprehensive design-token block.
• Executes automated generation of HTML files for each screen from a singular script.
• Ensures accuracy through re-rendering for comparison beneath the mockup on the canvas.
• Operates through seven structured phases, adhering strictly to sequential order to maintain accuracy.
• Utilizes tools such as `refkit` and `artgen` to manage tasks from color sampling to asset drawing.

Who it is for

This skill is aimed at developers and development teams using AI coding agents such as Claude Code, Cursor, and Codex. It is particularly beneficial for those focusing on UI/UX design, prototype development, and design system extraction.

Use cases

• Replicating an existing app's UI when a 100% match is required.
• Rebuilding screens from screenshots or design inspiration platforms like Mobbin.
• Extracting and documenting a design system from reference images for further development.
• Verifying the accuracy of mockups by overlaying them against their reference designs.

Technical details

• Outputs are organized in `mockups/canvases/ /`, where they are automatically integrated into the prototype canvas.
• The `prototype-canvas` skill maps folders to `tldraw` pages and manages `layout.json` configurations.
• Includes a toolkit comprising `refkit` for detailed functions like grid alignment and color sampling, and `artgen` for custom asset generation.
• Requires Google Chrome for specific operations involving the `shoot` command.
• To use `refkit`, users must install it manually via the command line if not already available.

Source & Licence

This package is built on open-source work published by ReScienceLab (ReScienceLab/super-prototyping) and distributed under Apache-2.0. The original licence text and copyright notice are included in your download.

Personal and commercial use, modification and redistribution are permitted under the Apache License 2.0, which also includes an express patent grant. Attribution and any NOTICE file must be retained.

Your purchase covers curation, licence verification, packaging, documentation and instant delivery. It does not grant exclusive rights to the underlying open-source code, which remains available under its original licence.

Delivery & Support

• Delivery: instant — a secure download link is emailed to you as soon as payment is confirmed.
• Format: ZIP archive containing the skill files, documentation and the original licence.
• Support: support@mcpcart.com — we aim to reply within 2 business days.
• Updates: updates are included only where stated on this page.

Refunds

This is a digital product delivered immediately after purchase. By completing your order you request immediate delivery and acknowledge that, once the download has been accessed, the statutory right to cancel no longer applies to the extent permitted by law. Refund requests are handled in accordance with our published Refund Policy.

Claude, Codex, Gemini and Cursor are trademarks of their respective owners. MCP Cart is an independent marketplace and is not affiliated with, endorsed by, or sponsored by any of them. Compatibility references describe interoperability only.