clownnvd/ui-clone

UI Clone — WAT Framework

Clone any app's UI from PageFlows screenshots into Next.js (Tailwind v4). WAT = Workflows + Agent + Tools.

---

Quick Start

# 1. Capture all screens
python scripts/pageflows_capture.py --app [app-name]

# 2. Find shared components
python scripts/find_shared_components.py --manifest .tmp/[app]/manifest.json

# 3. Extract design tokens
python scripts/analyze_screen.py --image screenshots/[app]/[flow]/01-[name].png

# 4. Visual diff (after building a screen)
python scripts/visual_diff.py \
  --original screenshots/[app]/[flow]/01.png \
  --url http://localhost:3000/[route]

# 5. Generate skill scaffold
python scripts/generate_skill_refs.py --app [app] --component-map .tmp/[app]/component-map.json

Install deps: pip install -r scripts/requirements.txt

---

Three Workflows

| Phase | Goal | Reference | |-------|------|-----------| | 01 Capture | Get all screenshots from PageFlows | references/capture.md | | 02 Build | Analyze + implement with visual diff loop | references/build.md | | 03 Package | Create reusable skill for future sessions | references/package-skill.md |

---

Scripts

| Script | Purpose | Key Args | |--------|---------|----------| | pageflows_capture.py | Capture all flows/screens from PageFlows | --app [name] | | find_shared_components.py | Detect shared UI regions via perceptual hash | --manifest [path] | | analyze_screen.py | Extract dominant colors → design tokens | --image [path] | | visual_diff.py | Compare original vs implementation screenshot | --original [path] --url [url] | | generate_skill_refs.py | Generate skeleton skill reference files | --app [name] --component-map [path] |

---

Output Structure

screenshots/[app]/
  [flow]/
    01-[screen].png
    02-[screen].png
.tmp/[app]/
  manifest.json           ← All flows + screen metadata
  component-map.json      ← Shared vs unique regions (build order)
  diffs/                  ← Visual diff outputs (review these)
src/
  app/
    globals.css           ← Design tokens
    (clone)/
      layout.tsx          ← App shell
      [flow]/page.tsx     ← Each screen
  components/
    [app]/
      sidebar.tsx
      topbar.tsx

---

Visual Diff Loop

diff shows 65% match
  → Read both images (original + diff output) with Read tool
  → Identify the specific region that differs
  → Fix the CSS/layout
  → Re-run visual_diff
  → Pass at ≥80%
  → Document fix in component ref

---

PageFlows Auth

# First time (manual login):
agent-browser --headed open https://pageflows.com
# After login:
agent-browser state save pageflows-auth.json

Pro account: [email protected] — saved in pageflows-auth.json.

---

Critical Rules

| Rule | Detail | |------|--------| | Run find_shared_components BEFORE building | Avoids reimplementing the same sidebar 10 times | | Build shared components FIRST | They appear on every screen | | Visual diff target: ≥80% | Use --threshold 70 for font-heavy screens | | Auth expires ~1 day | Re-auth if screenshots look like login page | | Never close browser mid-capture | agent-browser close loses session | | Use eval + data-url for screen URLs | PageFlows click interactions reliably timeout |