1
Stitch MCP + Claude Code Config Prompt
Paste into Claude Code after configuring the Stitch MCP. It will import, audit, fix, verify, and serve your project end-to-end.
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 alt text on images, missing aria-label on icon-only buttons • Accessibility — color contrast failures, missing focus rings, button vs div misuse, tab order broken • Performance — oversized images, no lazy loading on below-the-fold media, blocking scripts in head, unused CSS in critical path • Code hygiene — unused imports, dead code, console.log left in source, TODO/FIXME comments left behind Output the checklist. Wait for the user to acknowledge before moving to fixes. ═══════════════════════════════════════════ FIX PASSES — in this exact order ═══════════════════════════════════════════ 1 — Design tokens Create a single source of truth for colors, font sizes, spacing scale, radii, and shadows. Use CSS custom properties or the framework's theme system. Replace every hardcoded value found in the audit. Don't invent new tokens — derive them from what Stitch already used. 2 — Typography pass Pick one display font and one body font. Define a type scale (h1 → caption). Apply it consistently. Remove all inline font-size overrides unless there's a documented reason. 3 — Component normalization Extract repeated UI patterns into shared components — Button, Card, Input, Section. Every variant becomes a prop, not a duplicated component. Replace inline usage across the app. 4 — Animation system Use one animation library consistently (Framer Motion preferred). Define a small set of motion variants — fadeUp, fadeIn, scaleIn — and reuse. Remove conflicting CSS transitions. Add entrance animations to hero/feature sections that lack them. Use whileInView for scroll-triggered reveals. 5 — Scroll-linked motion (where the design calls for it) Use useScroll + useTransform from Framer Motion. Background elements move at 0.4x scroll speed. Foreground text moves at 0.85x. Hero sections scale from 1 to 1.08 as they scroll out. Never use position: fixed hacks for parallax — always use motion values. 6 — Reduced motion — required on every project Wrap all Framer Motion variants in a useReducedMotion() check. If reduced motion is preferred, replace all blur-slide-up entrances with a simple opacity: 0 → 1 fade at the same duration. Remove all scale transforms. Keep duration the same — only remove the physical motion and blur, not the timing. 7 — Responsive pass Go through every section and component at 375px, 768px, and 1280px. Fix any layout breaks, overflowing text, incorrectly sized images, or missing breakpoint classes. Ensure tap targets on mobile are at least 44×44px. 8 — Accessibility pass Add missing aria-label attributes. Fix button type attributes. Add alt text to all images. Ensure keyboard navigation works through all interactive elements in logical order. If any modal, drawer, or overlay exists ensure focus is trapped while open and returned on close. 9 — Environment cleanup Move any hardcoded API URLs, keys, or environment-specific values to a .env.example file with placeholder values and load them via the appropriate environment variable system for the project's framework. 10 — Final console audit Run the project in development mode and capture all console output. Fix every error. Suppress no warnings without explaining why suppression is appropriate. ═══════════════════════════════════════════ VERIFICATION ═══════════════════════════════════════════ After all fixes are applied, do a final diff between /imported and the current state. Produce a summary of every file changed, what was changed, and why. Show the final audit checklist again with all items re-evaluated. Every item must be ✅ OK before proceeding. If anything is still ❌ critical explain why it was not resolved and what the user needs to do manually. ═══════════════════════════════════════════ SERVER ═══════════════════════════════════════════ Once verification passes with zero critical issues, start a localhost development server on port 3000 using whatever dev server the project's framework provides — Vite, Next.js dev, CRA, plain http-server, etc. Print the local URL. Confirm the server is running and the project loads without errors in the terminal output. If port 3000 is in use try 3001 then 3002 and report which port was used.