| name | aura-screenshot-clone |
| description | Use when the user wants to clone or adapt a UI pattern from any website into your app, or asks to "build something like X", "make our nav look like Y", or "clone that component". Requires an aura.build Pro subscription. Aura's clone is now NATIVE — paste a URL or drag a screenshot into aura.build and it generates React/Tailwind directly; the Anima/Chrome-extension flow is only a fallback for login-gated pages Aura can't fetch. |
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:
- 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.
- 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:
- Click the chain-link icon → "Import Website" modal appears.
- Type the URL in the input field.
- Click Different (not "Exactly") — tells aura to adapt the pattern rather than reproduce pixel-for-pixel. Essential for rebranding.
- Click Import.
- 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:
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:
- Keep the screenshots you captured in Phase 1c. They're still the reference.
- 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).
- 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.
- Match your brand tokens from Phase 2d exactly (background, accent, text tokens, etc.).
- 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.
| Site | URL import | Notes |
|---|
artificialanalysis.ai | ❌ blocks | Cloudflare / anti-scrape. Use it as a visual reference only. |
openrouter.ai | ❌ blocks | Same as above. |
anthropic.com/pricing | ✅ usually works | Clean dark-tolerant layout. |
stripe.com/pricing | ✅ works | High-quality pricing table reference. |
vercel.com/pricing | ✅ works | Good card-based pricing pattern. |
openai.com/api/pricing | ⚠️ intermittent | Sometimes works, sometimes blocks. Try once, don't retry. |
| Logged-in dashboards | ❌ always | Aura has no session; use screenshot upload if essential. |
| Medium / blog posts | ✅ works | Fine for typography + article references. |
Phase 3 — Export to Figma (optional, for design review)
New clipboard method (Chrome only):
- Click Export to Figma in aura
- Code auto-copies to clipboard
- Open Figma document
- 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
| HTML pattern | React equivalent |
|---|
onclick="toggleMenu()" | const [open, setOpen] = useState(false) |
class="..." | className="..." |
Inline style="color:..." | Check tokens.css for existing class; else keep inline |
<a href="/pricing"> | <Link href="/pricing"> from next/link |
| Hardcoded text | Move to props or i18n key |
<script> event listeners | useEffect + addEventListener |
| Vanilla JS animations | Keep as CSS transitions; move keyframes to tokens.css |
4d. Placement decisions
| Component type | Where it lives |
|---|
| Marketing nav/header | <web-app>/src/components/landing/LandingPage.tsx (or extracted component) |
| Public page section | <web-app>/src/components/landing/ |
| Dashboard component | <web-app>/src/features/dashboard/ |
| Shared UI primitive | <web-app>/src/components/ui/ |
| Page-level layout | <web-app>/src/app/[locale]/(unauth)/layout.tsx |
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
npm run lint
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
| Mistake | Fix |
|---|
| Using the paperclip for Chrome-captured screenshots | The paperclip requires a local-file path. Browser-automation screenshots live on the MCP server, not on disk. Use the chain-link URL import instead. |
| Retrying the same URL after "Failed to fetch" | Aura caches the result and will fail again. Pick a different reference or switch to Phase 2.5 direct rebuild. |
| Choosing "Exactly" in Import Website | Copies the reference pixel-for-pixel including branding. Always pick Different when rebranding. |
| Using Nano Banana model | Switch to Claude Opus or Gemini Pro BEFORE submitting. Gemini 3.1 Pro is usually the default now. |
| Cloning without changing branding | Always include "CHANGE" section in prompt |
Forgetting <Link> for internal routes | Search for href="/" patterns after conversion |
| Inline styles that conflict with tokens.css | Check existing classes first, extend rather than duplicate |
Missing overflow-x: hidden on new sections | Add to section wrapper if content bleeds |
| Spending >15 min on aura when it's stuck | Bail to Phase 2.5. Direct React rebuild is faster than fighting the tool when it's not cooperating. |
Speed Tier — When to Skip Phases
| Goal | Skip | Time |
|---|
| Quick component prototype | Skip Phase 3 (Figma) | ~15 min |
| Design review needed | All phases | ~30 min |
| Exact pixel match required | All phases + Figma inspection | ~45 min |
| Tiny UI fix (button style, color) | Skip Phase 1 (use aura create directly) | ~5 min |
| Reference site is known-blocked (see table above) | Skip Phase 2, go to Phase 2.5 direct rebuild | ~10–15 min |
| Data-dense analytics page (tables, charts, sections) | Often faster via Phase 2.5 — aura struggles with non-marketing layouts | ~10–15 min |
