Use the Stitch MCP config the user has provided. Verify the connection is live by listing available projects. If it fails, report the exact error and stop.

Once connected, list all available Stitch projects and designs — name, ID, last modified, description if present. Show them numbered and wait for the user to pick one before doing anything else.

On confirmation, import the selected design via MCP. Fetch everything — component code, assets, layout, embedded styles. Save the raw import into /imported untouched before any modifications. This is the source of truth. Never recreate or infer the design from memory — only work from what the MCP returns. Show the full file tree after import completes and wait for user confirmation before proceeding.

AUDIT — run this before writing a single line of new code

Scan the entire imported codebase and output a numbered checklist with ✅ OK / ⚠️ minor / ❌ critical for every item below. Skip any item not applicable to this project:

• Fonts — multiple families used inconsistently, weights hardcoded vs inherited, web font link tag missing or incomplete, heading font different across sections
• Heading sizes — h1/h2/h3 inconsistent across sections, mixed px/rem/Tailwind/inline units for the same semantic level
• Colors — hardcoded hex or rgb values scattered instead of a token/variable system, inconsistent use of the same visual color across components
• Animations — CSS transitions mixed with JS animation library props, inline style transitions conflicting with motion props, entrance animations missing on sections that clearly need them, stagger timing inconsistent, no exit animations where expected
• Interactive states — hover, focus, active states missing or inconsistent across buttons, links, and cards
• Spacing — padding and margin inconsistent between equivalent sections or components, mixed unit systems for the same purpose
• Z-index — values illogical or undocumented, anything potentially rendering behind an overlay or background incorrectly
• Responsive — mobile/md/lg breakpoints missing or inconsistently applied, any section that is desktop-only with no mobile consideration
• Component structure — missing key props in any mapped list, missing default prop values, broken or unnecessary prop drilling, components that should be extracted but are inlined
• State management — shared state handled locally when it should be global, race conditions in async data fetching
• Performance — large unoptimized assets, missing lazy loading on off-screen content, render-blocking resources, unnecessary re-renders from missing memoization
• Accessibility — interactive elements missing aria-label, buttons missing type attribute, images missing alt, no focus management on modals or drawers if present, color contrast issues on text over backgrounds
• Dead code — unused imports, commented-out blocks, duplicate component definitions, unreachable branches