---
name: ui-mockup
description: Create three UI mockup options per round from product screenshots, then refine the user’s favorite. Use for "mock this up," "UI mockup," or "show me what this would look like" for interfaces. Collect screenshots and save approved designs with the ticket or brief.
---

# UI mockup

Match the product's visual language. You collect screenshots and pick the
image tool.

## Start from the current UI

- Reuse screenshots or capture your own. When no specific user state is
  needed, launch dev or open accessible production and capture screens with
  Playwright or app and browser tools, per the repository's setup guidance.
  Study a small reference set for layout, theme, typography, and components.
  Ask for screenshots when the needed screen or state is out of reach.
- Establish the screen, state, change, and elements to keep; clarify material
  gaps. For a new product, agree on references or a concept labeled as a new
  generated image. Route prototypes and source changes through the
  implementation workflow.

## Edit and iterate

- Read the available image tool's prompting guidance, and its docs for
  capability or setup questions. Edit with the actual screenshots as inputs,
  or generate new concepts from agreed references. Use an HTML and CSS
  reconstruction when asked.
- If image editing is unavailable, say so and offer setup or a handoff. Get
  agreement before a paid API fallback.
- Spell out changes and exact labels. Preserve layout, dimensions, theme,
  typography, density, icons, and unaffected regions. Label each input as an
  edit target or a style reference.
- Generate three distinct options per round through separate image calls:
  first design directions, then refinements of the favorite. Label them 1 to
  3, check text and unintended changes, and open all three automatically. If
  opening fails, show them inline with file links. Explain fidelity limits.
- Ask for a favorite and apply feedback with it as the next edit target. Keep
  original screenshots, prior options, and preservation constraints. A
  favorite guides iteration; explicit approval selects the final design.

## Save the approved result

- Follow the destination's storage skill, and reuse the linked Grain
  workspace or tracker artifact. Honor local-only and draft-only requests;
  standalone mockups stay local. Keep the audience, get authorization for
  public sharing, and link private Grain briefs.
- Save and display the approved image with caption, version, and approval
  status. Keep prompts and source references; mark drafts and rejected
  versions.
- Reconcile authorized decisions into the ticket or brief, keeping its
  identity and history. Align scope and acceptance criteria. Treat incidental
  generated details as illustrations.
- Verify rendering and links, then return image and artifact links. If an
  upload fails, keep local files and report paths, outstanding saves, or
  access limits.