Aura Screenshot Clone

Aura Screenshot-to-Component Pipeline

Overview

Full pipeline for cloning any web UI pattern into a React/Next.js component for your app: paste a URL or drag a screenshot into aura.build → it generates React/Tailwind directly → adapt in Claude Code. The user points at a reference; you handle everything else.

Clone primitive (updated 2026-06-06, per docs/audits/2026-06-06-ui-ux-design-pipeline-playbook.md gap #3): Aura's clone is NATIVE — paste a URL or drag in a screenshot and Aura converts it to React-mode components in-app. No Chrome browser extension is required for the core flow. The Anima/Chrome-extension path is only a fallback for login-gated pages Aura can't fetch server-side (use the screenshot-upload path below). Figma export (Phase 3) is optional/downstream for design review only.

Core principle: Never write layout from scratch when you can URL-import / screenshot → convert → adapt. AI vision at ~90% in one shot; you spend effort only on the 10% that makes it uniquely yours.

This is one branch of the broader design-to-code-pipeline router (Path 1C). For which generate-path to pick — Claude Design (1A) vs Figma (1B) vs clone (1C) — and the full spine, see design-to-code-pipeline.

Decision gate — which input path to use

Before anything else, pick the input path to aura. Two options, order of preference:

1. URL import (preferred) — aura fetches and screenshots the reference itself. Skip manual screenshots entirely. Fails on sites that block server-side fetches (Cloudflare, anti-bot WAFs, login-walled content). Known to fail: artificialanalysis.ai, openrouter.ai, many high-traffic SaaS comparison sites. Known to work: most marketing pages (Anthropic, Vercel, Stripe, GitHub pricing), Wikipedia, blog posts.
2. Screenshot upload — you capture via mcp__claude-in-chrome__computer action=screenshot and attach via aura's paperclip. Works for any site you can load in the browser, including login-walled content. Slower and requires juggling an OS file dialog — only reachable if the image is saved to a local path that the browser file picker can reach, which the MCP screenshot pipeline does not provide out of the box. In practice this path is unreliable from Claude Code without a local-filesystem helper.

Rule: Try URL import first. If aura shows "URL import failed — Failed to fetch" (within ~3s), don't retry on the same domain — pick a different reference or fall back to the no-aura direct rebuild (see Phase 2.5 below).

Do not spend more than one URL attempt per reference. If two references in a row fail, stop the aura path and go direct.

Phase 1 — Capture the Inspiration

1a. Get a tab context first

mcp__claude-in-chrome__tabs_context_mcp

Always do this before any browser action.

1b. Create a fresh tab, navigate, resize to 1440×900

mcp__claude-in-chrome__tabs_create_mcp
mcp__claude-in-chrome__resize_window  width=1440  height=900  tabId=NEW_TAB
mcp__claude-in-chrome__navigate  url="INSPIRATION_URL"  tabId=NEW_TAB

1c. Optional — take reference screenshots for your own understanding

Even when using URL import (Phase 2a), you should take 1–2 screenshots yourself so you can describe what to preserve vs. change in the prompt. Aura only gets the URL; the prompt is where you express taste.

mcp__claude-in-chrome__computer  action="screenshot"  tabId=TAB
mcp__claude-in-chrome__computer  action="scroll"     scroll_direction=down  scroll_amount=10  tabId=TAB
mcp__claude-in-chrome__computer  action="screenshot"  tabId=TAB

Save a note of the 3–5 visual patterns you want to carry over (left nav, summary pills, bar chart, provider colors, etc.).

Phase 2 — Convert in aura.build

2a. Navigate to aura Create

mcp__claude-in-chrome__navigate  url="https://www.aura.build/create"  tabId=TAB

2b. Default model is fine — usually

As of 2026-04, the default model on aura's create page is Gemini 3.1 Pro (labeled "Best For UI"). That's a valid choice — skip the model-switch step unless you need to change it. If it's showing Nano Banana (image generator) or similar, switch to Claude 4.6 Opus or Gemini 3.1 Pro first; the image generators produce garbage for this task.

2c. Use URL import (the chain-link icon)

The chain-link icon in the composer toolbar opens an Import Website modal. This is the preferred input path — aura fetches + screenshots the URL itself. Approximate coordinates at 1440×900: the icon is in the bottom bar of the prompt composer, between the paperclip and the Figma logo.

Flow:

1. Click the chain-link icon → "Import Website" modal appears.
2. Type the URL in the input field.
3. Click Different (not "Exactly") — tells aura to adapt the pattern rather than reproduce pixel-for-pixel. Essential for rebranding.
4. Click Import.
5. Wait for the toast. Failure signature: a "URL import failed — Failed to fetch" toast near the top of the viewport. This is definitive — don't retry the same URL.

If the toast appears, cancel the modal and either (a) try a different reference or (b) bail to the direct rebuild path (Phase 2.5).

2d. Prompt template

After URL import succeeds, aura pre-populates the prompt with placeholder text like "Paste a design screenshot". Click the prompt area and add the conversion brief:

Reference: [short description, e.g. "LLM model comparison page"]

KEEP from reference:
- Overall layout structure and spacing rhythm
- Component hierarchy and grouping (e.g., summary-pill row, left-nav, per-section cards)
- Responsive breakpoint logic

CHANGE to your brand:
- Background: <your bg token/hex> (e.g. near-black)
- Primary accent: <your primary accent token/hex>
- Secondary accent: <your secondary accent token/hex>
- Text main: <your main text token/hex>
- Text muted: <your muted text token/hex>
- Font: <your body font> (body), <your display font> (display/headings)
- All copy: change to your product's context (your domain, terminology, features)
- Remove all unrelated branding, logos, images

IMPLEMENTATION:
- Pure Tailwind CSS + vanilla JS (no frameworks)
- Responsive: mobile-first, lg: breakpoint for desktop nav
- Dark theme throughout
- Add hover states with opacity/transform transitions
- Use Lucide icons where icons are needed

If URL import is working you do not also attach a screenshot via the paperclip — aura already has the captured image. Attaching both confuses the model.

2d. Submit and wait for generation (~15–60 seconds)

2e. Iterate with targeted edits if needed

For specific fixes, use the "Ask for revisions" input with targeted prompts:

"Change only the CTA button: apply linear-gradient(135deg, <accent-1>, <accent-2>) background with 8px border-radius and glow box-shadow"
"Fix the nav: reduce font to 13px uppercase tracking-widest"
"Make the mobile hamburger use the animated X pattern"

2f. Switch to Code view to review the HTML

Click the Code tab. Verify:

• Background colors match your brand tokens
• Accent color matches your brand tokens and is used for highlights/CTAs
• No proprietary frameworks in <script> tags
• Tailwind CDN is loaded

Phase 2.5 — Direct rebuild fallback (when aura fails)

If URL import fails on 2+ references, or aura generation stalls, bail out and build directly in React. Aura's best case is a clean single-screen marketing layout; it's hit-or-miss on data-dense analytics pages.

When you fall back:

1. Keep the screenshots you captured in Phase 1c. They're still the reference.
2. Identify the 3–5 patterns you want to carry over: structural (e.g., left-side section nav, summary-pill row, horizontal bar chart, per-section cards) and visual (provider color coding, badge style, divider treatments).
3. Build directly in the target React component. Use pure Tailwind + inline styles where needed for provider-specific colors. Avoid chart libraries — CSS-only horizontal bars (<div> with width % and gradient background) render beautifully and ship zero kB.
4. Match your brand tokens from Phase 2d exactly (background, accent, text tokens, etc.).
5. Every data-dense section should have a keyword-rich H2/H3 — SEO pays back the manual-build cost.

Total time for direct rebuild on a medium-complexity page: ~10–15 minutes once the reference is in your head. Faster than fighting aura when it's not cooperating.

Known reference-site behavior (for Phase 2c)

Update this list as you find new ones. The goal: skip URLs you know will fail before trying.

Phase 3 — Export to Figma (optional, for design review)

New clipboard method (Chrome only):

1. Click Export to Figma in aura
2. Code auto-copies to clipboard
3. Open Figma document
4. Press Cmd+V / Ctrl+V directly — design appears with organized layers

No console commands needed with the new method.

Skip this phase if going straight to implementation.

Phase 4 — Adapt to React/Next.js in Claude Code

4a. Copy the full HTML from aura Code view

4b. Analyze the structure before converting

Read the HTML carefully. Identify:

• State that needs useState (menu open/close, tab active, scroll)
• Repeated elements that need .map() over data arrays
• Inline styles that should become tokens.css classes
• Hard-coded text that should be props

4c. Conversion rules

4d. Placement decisions

4e. Add to existing tokens.css or extend

If the component uses new CSS patterns:

• Add class names to <web-app>/src/styles/tokens.css
• Follow the existing naming: .aura-[section]-[element]
• Move regex patterns to module scope if needed
• Keep @keyframes at module scope

4f. Run quality gates before committing

cd <web-app>
npm run check-types     # 0 TypeScript errors required
npm run lint            # 0 errors in modified files required

Fix all errors. Commit with descriptive message referencing the inspiration source.

Brand Context Quick Reference

Always available for aura prompts. Fill this in once per project and keep it current — it's the single block you paste into every aura prompt so cloned output starts on-brand instead of generic:

<your-product-name> — <one-line positioning>
Tagline: "<your tagline>"
Audience: <your target users>

Colors:
  --bg-base: <your base background token/hex>
  --bg-alt: <your alt background token/hex>
  --accent: <your primary accent token/hex>
  --accent-secondary: <your secondary accent token/hex>
  --text-main: <your main text token/hex>
  --text-dim: <your muted text token/hex>
  --border-light: <your subtle border token/hex>

Typography:
  Display/headings: <your display font>, font-weight 400–600
  Body/UI: <your body font>, font-weight 400–600
  Nav items: 13px, uppercase, letter-spacing 0.06em

Key UI patterns already in codebase:
  - <your-nav-component> (e.g. spinning border glow CTA)
  - <your-pill-button-component> (e.g. spinning border glow button)
  - <your-header-component> (e.g. sticky glassmorphism nav)
  - <your-docs-component-prefix>-* (docs page components)

Common Mistakes

Speed Tier — When to Skip Phases