Clone From URL — Runtime Design-System Extraction

Use this when the user gives a live site or a URL to clone: "clone aside.com", "rebuild this page", "make it look exactly like <url>". A live URL affords what a screenshot cannot — the browser's runtime truth. Extract that truth with the real browser, make it the DESIGN.md contract, then build reusable primitives against it. Never eyeball a screenshot into a one-off.

Outcome and stop rule

A DESIGN.md whose every token, interaction state, and motion value was read from the running page with getComputedStyle, plus a component-level clone that an independent reviewer confirms is an extensible design system (live DOM, reused primitives) — not a screenshot-matched or pasted-image fake. Done is defined by /visual-qa reference-fidelity mode passing on fresh evidence, not by your own glance.

Phase 1 — Extract the runtime truth (never guess a value)

Drive a real browser: Codex browser:control-in-app-browser first, otherwise the project's agent-browser / playwright / dev-browser tooling. Do NOT parse CSS files — minification, CORS, CSS-in-JS, and Tailwind utilities make source unreliable. getComputedStyle returns what the browser ACTUALLY rendered, so it is the only source of truth.

Sweep the page and read, for every meaningful element and every repeated pattern:

• Tokens — color, background, border, font family/size/weight, line-height, letter-spacing, radius, shadow, and spacing (padding/margin/gap). Cluster the repeated values into the token scale.
• Interaction states — capture default/hover/focus/active (plus disabled/loading/empty/error where they exist) by DRIVING the state, then re-reading the computed style. A system with only the resting state is incomplete.
• Motion — transition (property, duration, timing function, delay), @keyframes (walk document.styleSheets for CSSKeyframesRule), and transform. Motion is part of the contract, not decoration.
• Assets — `` and background-image URLs, inline SVG, @font-face files, video sources. Download the REAL assets; never substitute stock or placeholders.
• Responsive — re-run the sweep at 375 / 768 / 1280 and record what actually changes per breakpoint.

A compact sweep payload to inject through the browser's evaluate action (extend the recorded fields as needed):

() => {
  const out = [];
  for (const el of document.querySelectorAll("*")) {
    const s = getComputedStyle(el);
    out.push({
      tag: el.tagName,
      color: s.color, background: s.backgroundColor, border: s.borderColor,
      font: s.fontFamily, size: s.fontSize, weight: s.fontWeight,
      lineHeight: s.lineHeight, letterSpacing: s.letterSpacing,
      radius: s.borderRadius, shadow: s.boxShadow,
      padding: s.padding, margin: s.margin, gap: s.gap,
      transition: s.transition, animation: s.animation, transform: s.transform,
    });
  }
  return out;
}

Phase 2 — Write the DESIGN.md contract

Turn the extraction into DESIGN.md per design-system-architecture.md: token scales, typography, spacing, the component anatomy with every captured state, the motion rules, and the responsive deltas. Name which source each value came from. If a value is not in DESIGN.md, it may not appear in code.

Phase 3 — Clone-code reusable primitives (one at a time)

Build primitives against the contract, not the screenshot. One component per cycle: implement, render, compare to the source region, fix, then move on. Use the downloaded assets. Never paste a raster or background-image where a live element belongs. Never approximate a token you already extracted.

Phase 4 — Reference-fidelity QA (mandatory, motion included)

Verify through /visual-qa in reference-fidelity mode against the source captures, for every page and every breakpoint. Interaction states and animations are IN SCOPE: drive hover/focus/click/scroll, then compare the settled states AND the motion itself against the source. You are not done until the dual-oracle gate passes on fresh evidence.

Anti-patterns

• Parsing CSS files instead of getComputedStyle — the rendered truth is the only source.
• "CORS blocked" as an excuse — computed styles bypass it.
• Resting state only — capture hover/focus/active and the rest.
• Screenshot-matched one-off — build reusable, token-driven primitives.
• Placeholder or stock assets — download and use the originals.
• Desktop only — re-extract at each breakpoint.

Provenance

This runtime-extraction workflow follows the MIT-licensed JCodesMore/ai-website-cloner-template clone-website approach: browser automation plus a getComputedStyle sweep, state/motion/asset capture, spec files, and visual QA. It is a project-original synthesis, not a copy of that template. Do not treat this file as a license to copy any target site's trademarks, brand assets, logos, or proprietary copy — extract the design system (tokens, layout grammar, component anatomy, interaction states, motion) and apply it to the user's own product and content.