AI Design Cloning and Verification

See a live AI demo that clones any website into an editable sandbox, from capturing the live site to generating React code and verifying design matches.

Claude Playwright Next React Tailwind CSS OpenRouter Browser

Overview

Live demo of an AI pipeline I made that takes any website URL and recreates it in an editable sandbox. The system:

Captures a live site using Playwright (screenshots, DOM, styles)
Uses Claude to analyze the design and generate a React clone
Creates an instant editable sandbox with the cloned site
Verifies the clone matches the original using design contracts
Suggests and applies CSS fixes for any differences

I’ll show the full loop: paste a URL → AI analyzes it → generates code → live preview appears → iterate with chat to refine. No Figma access needed, no manual coding - just point at any site and get an
editable clone.

Tech stack

Claude

Claude is Anthropic's flagship family of large language models (LLMs): a high-performance, Constitutional AI system built for safety, complex reasoning, and expert-level collaboration.

Claude is a next-generation AI assistant developed by Anthropic, a research firm prioritizing AI safety. The models (including Opus, Sonnet, and Haiku) leverage Constitutional AI to ensure helpful, honest, and harmless outputs, a key differentiator from competitors. Claude excels at complex enterprise tasks: processing massive context windows for in-depth data analysis, generating and reviewing code, and providing expert-level summarization for documents up to 200,000 tokens. It is deployed as a conversational chatbot and via API, offering scalable AI solutions for developers and businesses.

https://claude.ai/

View projects
Playwright

Playwright is the Microsoft-developed, cross-browser automation framework: it drives Chromium, Firefox, and WebKit with one unified API for fast, reliable end-to-end testing.

Playwright delivers robust, cross-platform end-to-end testing, supporting all major rendering engines: Chromium, Firefox, and WebKit. Launched by Microsoft in January 2020, its core strength is a single API for multiple languages (TypeScript, Python, Java, .NET). The framework eliminates flaky tests through automatic waiting and provides full test isolation by creating a new browser context (a brand-new browser profile) for each test. Key tooling includes Codegen for recording actions and the Trace Viewer for deep post-mortem analysis of test failures (screencasts, live DOM snapshots). This architecture ensures reliable, high-speed execution across Windows, Linux, and macOS.

https://playwright.dev

View projects
Next

Next.js is the full-stack React framework: it delivers high-performance web applications via hybrid rendering and powerful, Rust-based tooling.

This is the React Framework for production: Next.js enables you to build full-stack web applications with zero configuration and maximum efficiency. It supports a hybrid rendering approach (Server-Side Rendering, Static Site Generation, and Incremental Static Regeneration) for optimal speed and SEO performance. Key features include React Server Components, Server Actions for running server code directly, and the App Router for advanced routing and nested layouts. Developed by Vercel, it leverages Rust-based tools like Turbopack and the Speedy Web Compiler for the fastest possible builds and a superior developer experience.

https://nextjs.org/

View projects
React

React is an open-source JavaScript library for building dynamic user interfaces (UIs).

React is a component-based JavaScript library, developed by Meta (Facebook), engineered for building fast, declarative UIs. It mandates a one-way data flow and utilizes a Virtual DOM mechanism to ensure efficient, predictable updates to the user interface. Developers construct complex UIs by composing small, encapsulated components; this architecture promotes code reusability and simplifies state management across large applications. The library employs JSX (a syntax extension) to integrate HTML-like markup directly within JavaScript logic, supporting development for both web (React DOM) and native mobile platforms (React Native).

https://react.dev/

View projects
Tailwind CSS

Utility-first CSS framework: rapidly build modern UIs by composing low-level classes (e.g., `flex`, `pt-4`, `text-center`) directly in your HTML markup.

Tailwind CSS is a utility-first framework: it provides thousands of low-level classes (like `flex`, `pt-4`, and `bg-blue-500`) that map directly to single CSS properties, allowing developers to build complex, custom designs without writing custom CSS. This approach, unlike traditional component-based frameworks, ensures consistency across a project's design system and significantly accelerates development speed. The Just-In-Time (JIT) engine is key: it scans your code to generate only the necessary styles, resulting in an optimized, tiny production CSS bundle, which is a major performance advantage for any modern web application.

https://tailwindcss.com/

View projects
OpenRouter

OpenRouter: The unified API gateway for hundreds of LLMs, providing single-endpoint access, automatic fallbacks, and cost-optimized routing across all major providers (e.g., OpenAI, Anthropic, Google).

OpenRouter is your single, high-efficiency API gateway to hundreds of LLMs from over 60 providers, including OpenAI, Anthropic, and Google. We eliminate the integration complexity: one API key, one endpoint, zero code rewrites when switching between models like GPT-5 or Claude Sonnet 4.5. The platform automatically handles dynamic routing for cost-optimization, pools provider uptime for superior reliability, and consolidates all usage into a single billing dashboard. Expect minimal impact on performance: we operate at the edge, adding approximately 15ms latency, and maintain full compatibility with the OpenAI SDK.

https://openrouter.ai

View projects
Browser

The client application that fetches, interprets, and renders content (HTML, CSS, JavaScript) from web servers for user display.

A browser is your primary interface to the World Wide Web, operating on a client-server model: it sends HTTP/HTTPS requests for files and uses a rendering engine to translate the returned data into a visual page. This process involves interpreting HTML structure, applying CSS styles, and executing JavaScript for dynamic functionality. Major players like Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge dominate the market, with Chrome currently holding a significant majority share. The core function remains consistent: transforming raw code into the interactive experience you see on your screen.

https://en.wikipedia.org/wiki/Web_browser

View projects

Related projects

Design directly in prod

New York City

See how non-developers can visually build directly in the codebase with zero setup, transforming design into code and…

Closing Human-Coding design Loop

New York City

Explore how design transforms into code with a keynote on closing the human-coding design loop, presented on the…

Aeris: AI-Native Astrology Software

New York City

Explore Aeris, AI-native astrology software. See how cloud-based tools, LLM integration, and custom designs are turning astrology data…

Design → Agentic UI Parity: Verifiable Figma/XD → MCP App UIs using constraint manifests + template registries

New York City

Demo a pipeline that translates Figma/XD designs into verifiable UI constraints and interactive MCP App UIs, ensuring design…

Goals are (mostly) all you need

New York City

See a system where an LLM dynamically modifies design goals for floorplan creation, demonstrating a fundamental approach to…

How building with AI showed me where all the design decisions were hiding

Dublin

A non-coder designer built an AI SaaS platform using Claude Code, Codex, and Supabase, detailing agent orchestration, feedback…