AI Website Cloner Template
Rebuild reference websites as editable Next.js pages with an AI coding agent. Inspect responsive layouts, assets and interactions, then compare the result with the source.
These skills help an agent design websites that look intentional rather than generated, from layout and spacing to responsive behavior. They range from opinionated taste guides to full web design workflows and a site-cloning template.
26 skillsRebuild reference websites as editable Next.js pages with an AI coding agent. Inspect responsive layouts, assets and interactions, then compare the result with the source.
Build responsive UI components with project design systems, accessible interactions and complete application states.
Build responsive interfaces with container queries, fluid typography and adaptive layouts.
Review grouping, alignment, reading order and responsive layouts.
Route UI work by product surface, define a visual concept, implement reusable tokens and states, and document the result in DESIGN_SYSTEM.md.
Adapt grids, overflow, wrapping and tap targets across mobile and desktop layouts.
Build editable Roblox interfaces with responsive layouts, safe insets, cross-device input, motion, and lifecycle cleanup.
Lay out HUDs and menus with Control anchors, containers, themes, signal handlers, and keyboard or gamepad focus.
Compare AI design skills for design systems, shadcn/ui, frontend creation and interface refinement, with practical briefs to help you choose a workflow.
Use a taste or design-direction skill when output looks generic, a responsive-design skill when layouts break on phones, and the cloner template when you need to match an existing site.