# MUST OBEY — Mobile-first build requirements
This app's PRIMARY surface is a mobile phone. Build it impeccably on mobile FIRST, then verify on tablet and desktop. Treat the rules below as non-negotiable hard constraints, not suggestions.
## Viewports to verify (every screen, every state)
- 320 px, 360 px, 375 px, 390 px, 414 px, 480 px
- 768 px, 834 px (iPad portrait / Pro 11)
- 1024 px, 1280 px, 1440 px, 1920 px, 2560 px
- Plus: 200% browser zoom, landscape orientation on every mobile width, iPhone with safe-area insets visible
## Hard layout rules
- Mobile-first CSS. Default styles target mobile; `@media (min-width: ...)` for larger viewports.
- Use `dvh` and `svh` instead of `vh` for full-height surfaces (iOS Safari URL-bar bug).
- Use `clamp()` for fluid typography across all viewports.
- Prefer container queries (`@container`) over media queries for component-level responsiveness.
- Use `min(100%, ...)` widths so content never overflows. Zero horizontal overflow at any viewport.
- Add `` to every page.
- Apply `padding: max(safe-area-inset-X, fallback)` on every edge-bleeding container so notched iPhones in landscape never clip content.
- Wide tables and code blocks scroll INSIDE their container (`overflow-x: auto`), never push the body.
- Use `background-attachment: scroll` on mobile, not `fixed` (iOS Safari repaint bug).
- Avoid `backdrop-filter` on animated elements. Use it sparingly on static surfaces only.
- **Canvas Scaling**: Canvases must dynamically scale with window resize events and properly handle high-DPI screens (`window.devicePixelRatio`). Set physical dimensions (`canvas.width`/`canvas.height`) using pixel ratio and render relative to this grid, using CSS to control responsive viewport scaling.
- **Robust Storage**: Every access to `localStorage`/`sessionStorage` (especially `JSON.parse` of loaded state or writes) MUST be wrapped in a `try-catch` block to handle disabled storage, private browsing mode, quota limits, or corrupted JSON gracefully. Fall back to a robust in-memory object store.
## Touch & accessibility
- Tap targets ≥ 44 × 44 px on touch (Apple HIG). Increase to 48 px under `@media (hover: none) and (pointer: coarse)`.
- All interactive controls reachable by keyboard with a visible focus ring; respect `:focus-visible`.
- Color contrast ≥ 4.5:1 for body text, 3:1 for UI components.
- All images have meaningful `alt`. Decorative images use `alt=""`.
- Respect `prefers-reduced-motion: reduce` — zero animation durations under that query.
- Forms validate inline; error messages are specific, not "Invalid input".
- Modals: focus trap, `Esc` closes, `role="dialog"`, `aria-modal="true"`, focus restored on close.
## Performance bar (Lighthouse mobile, throttled 3G/4G)
- LCP < 2.5 s · INP < 200 ms · CLS < 0.1
- JS bundle gzip < 200 KB mobile-first; lazy-load non-critical screens via `React.lazy` / dynamic imports.
- No render-blocking resources above the fold.
- Images: WebP/AVIF preferred, `loading="lazy"`, explicit `width`/`height` attributes (zero CLS), `srcset` for retina.
- Videos: `preload="metadata"`, low-resolution poster, max 720p mobile fallback. Never autoplay with audio.
- Fonts: `font-display: swap`; preload only the one used above the fold.
- Smooth scroll honoured via CSS `scroll-behavior: smooth` with reduced-motion fallback.
## Pre-ship mobile checklist (the deployer MUST verify before declaring done)
1. Open at 375 px in DevTools — every screen scrolls vertically only; zero horizontal scroll.
2. Browser zoom 200% — layout reflows without overlap.
3. iPhone Safari with the URL bar visible AND landscape — no content under the home indicator; no notch clipping.
4. iPad portrait (768 px) and landscape (1024 px) — no awkward gaps; tablet-specific breakpoints land cleanly.
5. Tap every interactive element with a thumb at real-device size — every target is easy to hit.
6. `prefers-reduced-motion: reduce` — every transition / animation skips cleanly, scroll-behavior becomes instant.
7. Lighthouse mobile score ≥ 90 across all 4 categories.
8. Zero `console.error` and zero CLS shift in real-device testing on a mid-tier Android (e.g. Pixel 6a) and an iPhone SE.
---
The original template starts below. All rules above apply on TOP of whatever this template specifies.
---
# Screenshot → Code
## 1. Project
**Screenshot → Code** turns any UI screenshot into production-quality
code — running in a live preview, in under sixty seconds. Drop in a
Dribbble shot, a tweet of someone's portfolio, a competitor landing
page, a sketch on a napkin, a Notion screenshot, a Figma export, an
old screenshot of an app you used to love — and get back React +
Tailwind (or vanilla HTML/CSS) that compiles on the spot, renders in
an embedded sandbox beside the original, and is honest about what
didn't translate one-to-one.
The job-to-be-done is simple. A designer sees a layout she likes and
wants the code, not the chore of rebuilding it in dev tools at three
in the morning. A backend engineer is given a Figma export by a
product manager who has no front-end help and asked to ship it by
Friday. A founder sees a competitor's pricing page that converts
better than hers and wants to A/B test the same shape inside her own
brand. A student is studying how the best landing pages are built and
wants to read the code behind a screenshot, not guess at it. The
30-second demo: drop a screenshot of a three-column pricing card grid
→ in about thirty-five seconds the app shows the live rendered React
+ Tailwind output beside the original, with a small "differences"
panel that surfaces what the model couldn't reproduce ("the
gradient's exact stops are inferred", "the icon set isn't identified
— Lucide stand-ins used", "the photograph is a license-safe
placeholder"), and a single tap labelled "open in AI Studio Build"
remixes the result into a fresh project the user can iterate on.
**Tagline:** _Drop a screenshot. Get working code, a live preview,
and an honest list of what didn't translate — in under sixty
seconds._
## 2. Target audience
- Designers who want code without learning Tailwind class names by
heart
- Front-end engineers who treat this as a fast scaffolder, then
polish the output by hand
- Backend engineers handed a Figma export with no front-end support
- Product managers prototyping a competitor analysis to bring into a
sprint review
- Indie hackers who see a Dribbble shot and want to ship its shape
this weekend
- Students reading the source of layouts they admire as a learning
exercise
- Design systems leads auditing a competitor's component library
visually
- Educators preparing teaching material — "here is the screenshot,
here is the code, here is what the model could and could not infer"
- Solo founders rebuilding their landing page weekend after weekend
off a folder of inspiration screenshots
- Accessibility leads who use the model's output as a starting point
and check it against WCAG 2.2 AA before shipping anywhere
## 3. Core value propositions
Surface these clearly through copy, visual emphasis, and section
ordering — they are the reasons visitors stop scrolling and tap.
- **Drop a screenshot, get running code.** No prompt to write. No
Figma plugin to install. No paid Figma seat. Drag a PNG, JPG, or
WebP from anywhere — Finder, the desktop, a Slack message, an
email — into the drop zone. Or paste from the clipboard with
`Cmd-V` / `Ctrl-V`. In about thirty-five seconds you get a
side-by-side preview: your screenshot on the left, the rendered
React + Tailwind output on the right.
- **The preview is real and interactive.** The output is not a static
image of the generated code. It is the generated code, compiled
and running in an embedded sandbox. Hover over the buttons. Tab
through the form. Resize the preview pane and watch the layout
reflow. The model writes the code; the sandbox runs it.
- **Honest about what didn't translate.** No "pixel-perfect" claims.
Below the side-by-side, a `Differences` panel lists every place
the output diverges from the source — the inferred (not original)
colours, the stand-in icons, the placeholder photograph, the
approximate font, the gradient stops the model had to guess. The
brewer's-notebook honesty principle, applied to code generation.
- **Production-quality output, not placeholder code.** No "// add
styles here" gaps. No `