{"product_id":"perfect-ui-cloning-ai-agent-skill-for-precise-prototypes","title":"Perfect UI Cloning: AI Agent Skill for Precise Prototypes","description":"\u003ch3\u003ePerfect UI Cloning: AI Agent Skill for Precise Prototypes\u003c\/h3\u003e\n\n\u003cp\u003eThis 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.\u003c\/p\u003e\n\n\u003ch3\u003eWhat this skill does\u003c\/h3\u003e\n\u003cul\u003e\n    \u003cli\u003eClones application user interfaces with pixel-perfect precision, producing HTML artboards on a prototype canvas.\u003c\/li\u003e\n    \u003cli\u003eOverlays a grid on the reference design, samples colors, and generates a comprehensive design-token block.\u003c\/li\u003e\n    \u003cli\u003eExecutes automated generation of HTML files for each screen from a singular script.\u003c\/li\u003e\n    \u003cli\u003eEnsures accuracy through re-rendering for comparison beneath the mockup on the canvas.\u003c\/li\u003e\n    \u003cli\u003eOperates through seven structured phases, adhering strictly to sequential order to maintain accuracy.\u003c\/li\u003e\n    \u003cli\u003eUtilizes tools such as `refkit` and `artgen` to manage tasks from color sampling to asset drawing.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eWho it is for\u003c\/h3\u003e\n\u003cp\u003eThis 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.\u003c\/p\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n    \u003cli\u003eReplicating an existing app's UI when a 100% match is required.\u003c\/li\u003e\n    \u003cli\u003eRebuilding screens from screenshots or design inspiration platforms like Mobbin.\u003c\/li\u003e\n    \u003cli\u003eExtracting and documenting a design system from reference images for further development.\u003c\/li\u003e\n    \u003cli\u003eVerifying the accuracy of mockups by overlaying them against their reference designs.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cul\u003e\n    \u003cli\u003eOutputs are organized in `mockups\/canvases\/ \/`, where they are automatically integrated into the prototype canvas.\u003c\/li\u003e\n    \u003cli\u003eThe `prototype-canvas` skill maps folders to `tldraw` pages and manages `layout.json` configurations.\u003c\/li\u003e\n    \u003cli\u003eIncludes a toolkit comprising `refkit` for detailed functions like grid alignment and color sampling, and `artgen` for custom asset generation.\u003c\/li\u003e\n    \u003cli\u003eRequires Google Chrome for specific operations involving the `shoot` command.\u003c\/li\u003e\n    \u003cli\u003eTo use `refkit`, users must install it manually via the command line if not already available.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c!-- mcpcart:static-blocks:start --\u003e\n\u003chr\u003e\n\u003ch3\u003eSource \u0026amp; Licence\u003c\/h3\u003e\n\u003cp\u003eThis package is built on open-source work published by \u003cstrong\u003eReScienceLab\u003c\/strong\u003e (\u003ca href=\"https:\/\/github.com\/ReScienceLab\/super-prototyping\" rel=\"nofollow noopener\" target=\"_blank\"\u003eReScienceLab\/super-prototyping\u003c\/a\u003e) and distributed under \u003cstrong\u003eApache-2.0\u003c\/strong\u003e. The original licence text and copyright notice are included in your download.\u003c\/p\u003e\n\u003cp\u003ePersonal 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.\u003c\/p\u003e\n\u003cp\u003eYour 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.\u003c\/p\u003e\n\u003ch3\u003eDelivery \u0026amp; Support\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eDelivery:\u003c\/strong\u003e instant — a secure download link is emailed to you as soon as payment is confirmed.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFormat:\u003c\/strong\u003e ZIP archive containing the skill files, documentation and the original licence.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSupport:\u003c\/strong\u003e \u003ca href=\"mailto:support@mcpcart.com\"\u003esupport@mcpcart.com\u003c\/a\u003e — we aim to reply within 2 business days.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eUpdates:\u003c\/strong\u003e updates are included only where stated on this page.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eRefunds\u003c\/h3\u003e\n\u003cp\u003eThis 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.\u003c\/p\u003e\n\u003cp style=\"font-size:0.85em;color:#666;\"\u003eClaude, 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.\u003c\/p\u003e\n\u003c!-- mcpcart:static-blocks:end --\u003e","brand":"MCP Cart","offers":[{"title":"Default Title","offer_id":52950324576567,"sku":"MCP-RESCIENCELAB-SUPER-PROTOTYPING-CLONE-PROTOTYPE","price":14.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0981\/3950\/4951\/files\/we1GWXoLjkAviYQVx8QTo_8ce1c069009e485497e30a84cf0f2c3c.jpg?v=1788606329","url":"https:\/\/mcpcart.com\/products\/perfect-ui-cloning-ai-agent-skill-for-precise-prototypes","provider":"SPF PRO","version":"1.0","type":"link"}