`, `
`, ``, `![]()
`, `` must be accounted for.
2. **Class audit:** For each element, compare the Tailwind classes in your JSX against the Stitch HTML. List any differences. If there are ANY differences that are not JSX syntax conversions (class -> className), fix them immediately.
3. **Color audit:** Search your generated code for every color value. Cross-reference each hex against the Stitch HTML. No color may be changed, approximated, or replaced with a Tailwind named color.
4. **Spacing audit:** Search for every padding, margin, gap, width, height value. Each must match the Stitch HTML exactly.
5. **Font audit:** Verify every font-family, font-size, font-weight, line-height, letter-spacing matches.
6. **Image audit:** Every `![]()
` in Stitch must have a corresponding `` in your code with the same src (after download), dimensions, and alt text.
If ANY discrepancy is found, fix it BEFORE proceeding. Do not move to the next phase with known differences.
---
## PHASE 5: Asset Handling
### Images
1. Scan the Stitch HTML for ALL image sources:
- `
` tags
- `background-image: url(...)` in styles
- SVG references
2. Download each image:
- Use `WebFetch` or `Bash(curl)` to download
- Save to `public/assets/stitch/[screen-name]/`
- Use descriptive filenames: `hero-image.png`, `logo.svg`, `avatar-1.jpg`
3. Replace references:
- Update `src` to `/assets/stitch/[screen-name]/filename.ext`
- Convert `![]()
` to `` from `next/image`
- Set proper `width`, `height`, and `alt` attributes
- For background images, keep as CSS `background-image` with local path
4. **Temporary/signed URLs:** Stitch CDN URLs may expire. ALWAYS download images immediately, never leave external Stitch URLs in the code.
### Icons
- If Stitch uses SVG icons inline, keep them inline
- If Stitch references an icon library, install and use the same library
**CHECKPOINT 4: ASSET VERIFICATION**
1. Count images in Stitch HTML vs images in your code. Must be equal.
2. Verify every image was downloaded successfully (file exists, non-zero size).
3. Verify image dimensions in `` components match the original `![]()
` width/height attributes from Stitch.
4. Verify no Stitch CDN URLs remain in your code - all must be replaced with local paths.
---
## PHASE 6: Font Setup
### Check existing fonts
Read the project's root `layout.tsx` to see what fonts are already loaded.
### Add missing fonts
For each font from the design system that is NOT already loaded:
```tsx
import { Inter, Manrope } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
display: "swap",
});
const manrope = Manrope({
subsets: ["latin"],
variable: "--font-manrope",
display: "swap",
});
```
Add the CSS variables to the `` or `` element:
```tsx
```
### Special case: METROPOLIS
Metropolis is NOT on Google Fonts. If the design uses it:
1. Download the font files
2. Use `next/font/local` instead:
```tsx
import localFont from "next/font/local";
const metropolis = localFont({
src: "./fonts/Metropolis-Regular.woff2",
variable: "--font-metropolis",
});
```
### Extend Tailwind config
Add font families that reference the CSS variables:
```ts
// tailwind.config.ts
theme: {
extend: {
fontFamily: {
headline: ["var(--font-inter)", "sans-serif"],
body: ["var(--font-manrope)", "sans-serif"],
},
},
},
```
**CHECKPOINT 5: FONT VERIFICATION**
1. List every font-family used in the Stitch HTML.
2. Verify each one has a corresponding `next/font/google` (or local) import in `layout.tsx`.
3. Verify the CSS variable is applied to the `` element.
4. Verify the Tailwind config references the correct CSS variables.
5. Verify font-weight values in your components match Stitch exactly (400, 500, 600, 700, etc.).
---
## PHASE 7: Final Verification
This is the final comprehensive check. Do NOT skip any step.
### Step 7.1 - Full re-read of generated code
Read back every file you generated. For each file, compare against the golden reference HTML one more time.
### Step 7.2 - Screenshot comparison
If `get_screen_image` tool is available:
1. Call it to get the Stitch screenshot (base64)
2. Save as `public/assets/stitch/[screen-name]/stitch-reference.png`
3. Tell the user: "Reference screenshot saved. Run the dev server and compare side-by-side."
### Step 7.3 - Build check
Run the build to verify no errors:
```bash
npm run build
```
If there are errors, fix them while maintaining pixel-perfect fidelity. Re-verify after every fix.
### Step 7.4 - Final Audit Report
Present this to the user with actual values filled in:
```
PIXEL-PERFECT AUDIT REPORT
===========================
Source: Stitch project [name] / screen [name]
FONTS:
Design system headline: [font] -> Loaded: [yes/no] -> CSS var: [var]
Design system body: [font] -> Loaded: [yes/no] -> CSS var: [var]
Fonts in HTML: [list] -> All loaded: [yes/no]
COLORS:
Unique colors in Stitch HTML: [count]
Colors preserved exactly: [count]
Colors approximated: [count] (should be 0)
[list any approximations with reason]
SPACING:
All padding/margin/gap values preserved exactly: [yes/no]
[list any deviations]
IMAGES:
Images in Stitch: [count]
Images downloaded: [count]
Images with matching dimensions: [count]
Missing images: [list or "none"]
LAYOUT:
Structure matches: [yes/no]
Flex/grid directions match: [yes/no]
BORDER RADIUS:
Design system roundness: [value]
Applied correctly: [yes/no]
OVERALL: [PIXEL-PERFECT / HAS DEVIATIONS]
```
If the report shows ANY deviations (other than user-requested changes), fix them before presenting to the user.
### Step 7.5 - Validation Checklist
After the audit report, present:
- [ ] **Fonts**: Correct font families loaded via `next/font/google`? Same weights?
- [ ] **Font sizes**: All sizes match exactly (no rounding to Tailwind defaults)?
- [ ] **Colors**: All hex values preserved exactly?
- [ ] **Spacing**: Padding, margin, gap values match pixel-for-pixel?
- [ ] **Border radius**: Roundness matches the design system setting?
- [ ] **Images**: All images downloaded and displayed correctly?
- [ ] **Layout**: Flexbox/Grid structure matches Stitch layout?
- [ ] **Responsive**: Component respects the target device type?
- [ ] **Dark/Light mode**: Color mode matches design system?
- [ ] **Build**: `npm run build` passes without errors?
---
## POST-IMPLEMENTATION: Ongoing Verification
When the user requests changes AFTER the initial conversion:
### If the change is part of the Stitch design (e.g., "convert another screen"):
- Follow the full pipeline above with all checkpoints.
### If the change deviates from Stitch (e.g., "make the button bigger", "change the color to red"):
- Apply ONLY the requested change.
- Do NOT touch anything else.
- After the change, re-verify everything EXCEPT the user's requested deviation still matches Stitch.
- Tell the user: "Applied your change. Everything else remains pixel-perfect with the Stitch design. Your change deviates from Stitch in: [list what changed]."
### If you are unsure whether a change breaks pixel-perfect fidelity:
- Re-read the Stitch source HTML.
- Compare against current code.
- If there is a diff beyond user-requested changes, fix it.
---
## CRITICAL RULES
1. **NEVER approximate.** If Stitch says `15px`, you write `15px`, not `1rem` or `text-sm`.
2. **NEVER drop CSS.** Every class, every style property matters for pixel-perfect output.
3. **NEVER use placeholder images.** Download real images from Stitch.
4. **NEVER change fonts.** Use the exact fonts from the design system, loaded through `next/font`.
5. **NEVER skip colors.** Every hex value must be preserved exactly.
6. **NEVER skip a checkpoint.** Every checkpoint is mandatory. No exceptions.
7. **NEVER proceed with known deviations.** Fix first, then continue.
8. **ALWAYS download assets first** before they expire from Stitch CDN.
9. **ALWAYS re-verify after any edit.** Even a small fix can introduce drift elsewhere.
10. **ALWAYS present the audit report** at the end.
11. **ALWAYS tell the user** if you had to use a fallback (inline styles, approximations) and why.
12. **The Stitch HTML is the single source of truth.** When in doubt, re-read it.