# Aura Screenshot Clone > 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. - Skill: `oimiragieo/aura-screenshot-clone-2` (Agent Skill) - Install (CLI): `npx skillmds@latest add oimiragieo/aura-screenshot-clone-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/oimiragieo/aura-screenshot-clone-2/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: oimiragieo (https://skillmd.com/u/oimiragieo) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/oimiragieo/aura-screenshot-clone-2 --- # 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: (e.g. near-black) - Primary accent: - Secondary accent: - Text main: - Text muted: - Font: (body), (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, , ) 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 `