design-from-mockuplisted

# design-from-mockup ## Purpose Skip the slow manual translation of a mockup into RN components. Drive the asset pipeline and the screenshot diff loop until the running app matches the reference within a tolerable delta. ## When to trigger Trigger on these user phrases. Match loosely. - "design like this" - "match this style" - "build from screenshot" - "make it look like" - "I want this design" - "use this mockup" - "copy this layout" - "design my app to look like" ## Inputs to collect 1. Reference source: local image path, URL, or a text prompt for Gemini Imagegen. 2. Target Expo project path (must exist, with running dev server reachable on http://localhost:8081 or a custom port). 3. Color palette overrides (optional). 4. Match tolerance: tight, moderate, or loose. Defaults to moderate. ## Behavior ### Stage 1: acquire the reference - If the user passes an image path or URL, save it as `design/reference.png`. - If the user passes a text prompt, call the `gemini-imagegen` skill with four variations. The user picks one. Save as `design/reference.png`. ### Stage 2: extract assets one at a time Critical rule: do not request a grid of icons or illustrations from Gemini. Generate each asset in a separate call with the prompt template at `assets/prompts/asset-extraction.txt`. - Identify discrete assets visible in the reference (icons, illustrations, backgrounds, buttons, logos). - For each asset, send a separate Gemini call with: "transparent background, no padding,