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
- Reference source: local image path, URL, or a text prompt for Gemini Imagegen.
- Target Expo project path (must exist, with running dev server reachable on http://localhost:8081 or a custom port).
- Color palette overrides (optional).
- 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, single subject, vector style matching reference."
- Save each asset under
assets/extracted/<name>.png.
- Validate the asset has a transparent background and a clean edge. Reject if the background bleeds.
See references/asset-extraction.md for why grid generation fails.
Stage 3: detect design tokens
- Extract the dominant five-color palette from the reference.
- Identify primary font characteristics (rounded, geometric, serif, monospace).
- Identify spacing density (tight, balanced, generous).
- Write the tokens to
lib/theme.ts in the project. See references/design-tokens.md.
Stage 4: apply assets to the scaffold
- Place extracted assets at the project's
assets/ folder.
- Update screen components to reference the new assets and the new theme.
- Render the home screen.
Stage 5: screenshot diff loop
- Take a screenshot of the running app via Chrome DevTools MCP at the configured port.
- Compare to
design/reference.png. Compute a perceptual diff.
- If the diff is below the tolerance threshold for the chosen match mode, stop.
- If above, generate a structured prompt naming the specific differences (spacing off by 8px, button radius too sharp, accent color saturation low, etc.) and apply changes.
- Loop. Max ten iterations or until the user accepts.
See references/screenshot-loop.md.
Hard constraints
- Never request multiple assets in a single Gemini call. One asset per call.
- Never proceed past stage 2 with assets that have non-transparent backgrounds.
- Never overwrite the user's
lib/theme.ts without first writing a backup.
Composes with
- Runs after
mobile-app-scaffold produces the project tree.
- Calls
gemini-imagegen for mockup variations and asset generation.
- Uses Chrome DevTools MCP for the screenshot diff loop.
References
- references/asset-extraction.md - the one-at-a-time generation rule and why.
- references/screenshot-loop.md - how to use Chrome DevTools MCP for visual verification.
- references/design-tokens.md - AiGNITE default palettes, fonts, and spacing.
1---2name: design-from-mockup3description: Takes any reference image, mockup, or screenshot and produces a pixel-close mobile UI inside an existing Expo project. Pipeline extracts assets one-at-a-time, removes backgrounds, applies them to the scaffold, then runs a screenshot-diff loop until the result matches. Use this skill whenever the user mentions designing like an existing app, matching a style, building from a screenshot or mockup, copying a layout, or producing a high-end UI from a reference image, even if they do not name the skill by name.4---56# design-from-mockup78## Purpose910Skip 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.1112## When to trigger1314Trigger on these user phrases. Match loosely.1516- "design like this"17- "match this style"18- "build from screenshot"19- "make it look like"20- "I want this design"21- "use this mockup"22- "copy this layout"23- "design my app to look like"2425## Inputs to collect26271. Reference source: local image path, URL, or a text prompt for Gemini Imagegen.282. Target Expo project path (must exist, with running dev server reachable on http://localhost:8081 or a custom port).293. Color palette overrides (optional).304. Match tolerance: tight, moderate, or loose. Defaults to moderate.3132## Behavior3334### Stage 1: acquire the reference3536- If the user passes an image path or URL, save it as `design/reference.png`.37- If the user passes a text prompt, call the `gemini-imagegen` skill with four variations. The user picks one. Save as `design/reference.png`.3839### Stage 2: extract assets one at a time4041Critical 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`.4243- Identify discrete assets visible in the reference (icons, illustrations, backgrounds, buttons, logos).44- For each asset, send a separate Gemini call with: "transparent background, no padding, single subject, vector style matching reference."45- Save each asset under `assets/extracted/<name>.png`.46- Validate the asset has a transparent background and a clean edge. Reject if the background bleeds.4748See [references/asset-extraction.md](references/asset-extraction.md) for why grid generation fails.4950### Stage 3: detect design tokens5152- Extract the dominant five-color palette from the reference.53- Identify primary font characteristics (rounded, geometric, serif, monospace).54- Identify spacing density (tight, balanced, generous).55- Write the tokens to `lib/theme.ts` in the project. See [references/design-tokens.md](references/design-tokens.md).5657### Stage 4: apply assets to the scaffold5859- Place extracted assets at the project's `assets/` folder.60- Update screen components to reference the new assets and the new theme.61- Render the home screen.6263### Stage 5: screenshot diff loop64651. Take a screenshot of the running app via Chrome DevTools MCP at the configured port.662. Compare to `design/reference.png`. Compute a perceptual diff.673. If the diff is below the tolerance threshold for the chosen match mode, stop.684. If above, generate a structured prompt naming the specific differences (spacing off by 8px, button radius too sharp, accent color saturation low, etc.) and apply changes.695. Loop. Max ten iterations or until the user accepts.7071See [references/screenshot-loop.md](references/screenshot-loop.md).7273## Hard constraints7475- Never request multiple assets in a single Gemini call. One asset per call.76- Never proceed past stage 2 with assets that have non-transparent backgrounds.77- Never overwrite the user's `lib/theme.ts` without first writing a backup.7879## Composes with8081- Runs after `mobile-app-scaffold` produces the project tree.82- Calls `gemini-imagegen` for mockup variations and asset generation.83- Uses Chrome DevTools MCP for the screenshot diff loop.8485## References8687- [references/asset-extraction.md](references/asset-extraction.md) - the one-at-a-time generation rule and why.88- [references/screenshot-loop.md](references/screenshot-loop.md) - how to use Chrome DevTools MCP for visual verification.89- [references/design-tokens.md](references/design-tokens.md) - AiGNITE default palettes, fonts, and spacing.
nuwansamaranayake