Morph

// 01 - PROBLEM

Rebuilding a site you own on a modern stack - a platform migration off WordPress or Webflow, or a live site whose source code is gone - is days of tedious reverse-engineering: design tokens, assets, animations, routes, components. Morph automates the extraction and scaffolds a clean Next.js and Tailwind codebase from a URL, and pairs the deterministic parts with agent judgment for the parts that need it.

// 02 - APPROACH

• ▸CLI path: npx morph clone <url> renders the page with Playwright and runs a 6-phase pipeline - extract design tokens (colors to oklch, spacing snapped to Tailwind's scale), download and optimize assets, detect animations and interactions, crawl and generate App Router routes, decompose the DOM into component stubs, and run a QA audit.
• ▸Agent path: a /clone-website skill drives Claude Code, Cursor, or 11 other coding agents through recon, foundation build, per-section spec-and-dispatch, page assembly, and a visual QA diff - the CLI pre-extracts so the agent spends its budget on pixel-perfect fidelity.
• ▸Every interactive element is auto-classified as a Server or Client Component; forms, modals, carousels, tabs, and dropdowns are forced to client with a recorded reason.
• ▸Builder agents run in parallel in isolated git worktrees, each handed a self-contained component spec inline - they never read external docs, and a complexity budget splits any prompt over ~150 lines.

// 03 - ARCHITECTURE

Two paths, one extraction engine

A deterministic CLI for speed and an agent pipeline for fidelity feed from the same extraction engine - the CLI writes design-tokens.json, and the agent skill skips manual extraction when that file exists. Improvements to extraction land in both paths at once.

Spec-file contract for parallel builder agents

Each section is extracted into a component spec file, then a builder agent is dispatched in its own git worktree with that spec inline. The spec is a non-negotiable, auditable artifact; builders never read external docs, and worktree isolation lets sections build in parallel without collisions.

Auto Server vs Client Component classification

A classifier tags every interactive element, forcing forms, modals, carousels, tabs, and dropdowns to Client Components with a per-type reason - so the generated App Router code respects the RSC boundary instead of marking everything "use client".

Single-source agent config, synced to 13 platforms

AGENTS.md is the authoritative ruleset; CLAUDE.md is just a pointer to it. Two sync scripts regenerate the rule files and the runnable /clone-website command across 13 coding agents, so one edit propagates everywhere.

// 04 - PRODUCTION-GRADE

• ✓Two shipped pipelines over ~6,000 lines of strict TypeScript - real extraction, generation, and QA modules, not stubs
• ✓QA audit: visual regression (pixelmatch), Lighthouse, axe-core accessibility, bundle size, broken links, unused CSS
• ✓Zod-validated config with cosmiconfig auto-discovery; esbuild-bundled CLI published as a binary
• ✓Pluggable export adapters: Next.js, Vite + React, Astro, or static HTML + Tailwind
• ✓11 starter templates and 6 accessible interaction patterns (forms, modals, tabs, carousels, accordions, dropdowns)
• ✓CI runs lint, typecheck, and build on Node 24; Docker and docker-compose for a one-command run
• ✓Ethical-use guidance (allowed and disallowed uses) baked into the docs

// 05 - SCREENS

// 06 - ARTIFACTS

• github.com/mikulgohil/Morph →