prototypelisted

# Prototype — Mockup → Clickable Prototype (+ Visual-Diff Loop) ## Purpose Take a **static input** (pasted mockup image, screenshot, Figma frame, or a written design spec) and produce a **working, clickable prototype** that reproduces the layout and the visible states. Then optionally run a **visual-diff loop**: render the result, screenshot it, compare against the original, and fix the differences — repeating until it matches. This is throwaway-quality-friendly, fast-feedback work. Do not over-engineer: no real backend, no auth, no DB unless explicitly asked. Mock data is fine. **Language:** talk to the user in Hebrew; code/comments in English (global rules). --- ## Mode A — Mockup → Clickable Prototype ### 1. Read the mockup - If an image was pasted, **look at it carefully** and enumerate: screens/views, major regions (header, sidebar, content, footer), components, and every **state** shown (default, hover, active, empty, loading, error, filled, modal open, etc.). - If it's a Figma URL, use the `figma:figma-generate-design` / `get_design_context` tools to pull layout + tokens instead of guessing. - Restate to the user, in one short Hebrew paragraph, what you're about to build: the list of screens and the interactive states — so mismatches surface early. ### 2. Pick the lightest stack that fits - Default to a **single self-contained HTML file** (inline CSS + a little JS) for simple 1–3 screen flows — fastest to iterate and screenshot. - Use **React (Vite) +