ui-clone - Pixel-perfect UI cloning from screenshots or reference pages
Replicate UI designs with pixel-perfect accuracy in Next.js App Router projects
Tags
Updated: 2026-03-09Capabilities
Typical Inputs
Typical Outputs
What this skill does
- analyze UI screenshots
- break down design structure
- generate visual specifications
- create UI components
- implement responsive layouts
Inputs
- UI screenshots
- reference web pages
- design specifications
- Tailwind CSS tokens
- shadcn/ui components
Outputs
- design breakdown analysis
- JSONC visual specifications
- Next.js component files
- responsive UI implementation
- refinement diff lists
Requirements
- Next.js App Router project
- Tailwind CSS with semantic tokens
- shadcn/ui components
- next-themes for dark mode