clone-app-pat-pro: Pixel-Accurate Web App Cloning with Claude Code

Repositoryper-simmons/clone-app-pat-pro-publicTool

clone-app-pat-pro is a Claude Code skill designed to reproduce web applications from a URL with pixel-level precision. Instead of guessing from screenshots, it analyses live rendered code, extracts design tokens, downloads assets, and verifies copies using computed-style assertions.

Key points

  1. Interactive reconnaissance: Uses the Claude Chrome extension to navigate views across desktop, tablet, and mobile, clicking through sidebars, tabs, and interactive panels.
  2. Deep extraction: Reads computed styles, gradients, pixel-level spacing, shadows, and interaction states, while downloading actual font files and image assets.
  3. Design system synthesis: Compiles extracted values into a DESIGN.md file that serves as a single source of truth for design tokens.
  4. Parallel builds with automated QA: Task sub-agents build shared components and pages in parallel, followed by computed-style QA checks that run in an automated correction loop.

Why it matters

Most screenshot-based AI UI generators produce generic imitations that miss interaction details, exact spacing, and typography. By inspecting live DOM states and validating with computed-style assertions, this workflow achieves faithful interface reproductions.

Analysis

The project serves as an agentic workflow built directly on Claude Code, coordinating Task sub-agents alongside the Claude Chrome extension. It pairs browser-driven inspection with automated token generation and self-correcting build loops. With 245 stars, 54 forks, and no declared licence, it is an emerging experimental tool targeted at developers exploring deep AI agent orchestration for frontend development.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:amaancoderx/npxskillui

    SkillUI: Reverse-Engineer Design Systems into Claude Code Skills

    SkillUI is a Node.js CLI tool that extracts design systems from URLs, local projects, or Git repositories. Using pure static analysis without AI models or API keys, it gathers colors, typography, spacing, components, and screenshots into formatted context files for Claude Code.

    2kstarsTypeScript

    AI & LLMs· Tool

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent Skills for UI and Design Engineering

    jakubkrehel/skills is a curated collection of agent skills designed to equip AI assistants such as Claude Code with best practices for interface design, typography, accessibility, and UI engineering.

    5.8kstarsMarkdown

    AI & LLMs· Tool

  • Repository:sethjenks/weirdness-engine

    Weirdness Engine: Claude Skill for Structured, Non-Standard Web Design

    Weirdness Engine is an open-source skill for Claude Code and Cowork designed to push web layouts beyond generic category tropes. Rather than generating random disorder, it methodically breaks a single convention while maintaining structural coherence across the rest of the interface.

    6stars

    AI & LLMs· Tool

  • Repository:superdesigndev/superdesign

    SuperDesign: AI Agent for UI Design in IDEs and Coding Assistants

    SuperDesign is an AI product design tool that generates UI mockups, wireframes, and code components directly from natural language prompts inside IDEs such as VS Code, Cursor, and Windsurf. While the original open-source extension repository is archived, the tool now operates primarily as a web canvas application with coding agent integration.

    7.3kstarsTypeScript

    AI & LLMs· Tool

  • Repository:Nutlope/hallmark

    Hallmark: Anti-AI-slop design skill for coding agents

    Hallmark is an open-source design skill developed by Together AI for Claude Code, Cursor, and Codex. It prevents generic, AI-looking interfaces by enforcing diverse macrostructures, 21 themes, 57 slop-test gates, and pre-emit self-critique.

    28.4kstarsCSS

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.