LogoClawIndex
CasesSkillsAbout
LogoClawIndex

ui-clone - Pixel-perfect UI cloning from screenshots or reference pages

Replicate UI designs from screenshots or reference websites in Next.js projects

Tags

Updated: 2026-03-09
UICloningNext.jsFrontendDevelopment

Capabilities

analyze UI structuregenerate design specificationscreate component filesimplement responsive layouts

Typical Inputs

UI screenshotReference websiteNext.js project

Typical Outputs

Component filesPage assembly codeDesign specification document

What this skill does

  • analyze UI structure
  • generate design specifications
  • create component files
  • implement responsive layouts
  • refine UI details

Inputs

  • UI screenshot
  • Reference website
  • Next.js project
  • Tailwind CSS configuration
  • Design system tokens

Outputs

  • Component files
  • Page assembly code
  • Design specification document
  • Implementation plan

Requirements

  • Next.js App Router project
  • Tailwind CSS setup
  • shadcn/ui components
  • Design system tokens
  • Reference UI or screenshot

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.