# UI Prototyper

> Create product-faithful, visually ambitious UI/UX prototype images for mobile apps, web apps, websites, and dashboards. Use imagegen to turn one real product moment into an original visual world, not a generic application shell.

- Skill: `x0c/ui-prototyper` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add x0c/ui-prototyper`
- Raw SKILL.md: https://api.skillmd.com/api/skills/x0c/ui-prototyper/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: x0c (https://skillmd.com/u/x0c)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/x0c/ui-prototyper

---


# UI Prototyper

Make the product moment visually unforgettable. Do not make a neat but anonymous dashboard.

## Lock truth; free the composition

Privately identify the one present-tense moment shown in this image: what the person needs to notice, decide, or trust right now. Lock only its real state, decisive action, essential information, exact copy, platform, and hard exclusions.

The contract protects product truth. It is not a wireframe and it is not a checklist requiring every route, setting, navigation label, and capability on the same canvas. Keep secondary capability as one quiet cluster or entry point, or reserve it for its own screen. Never invent product behavior.

## Start with a visual proposition

For every direction, write a private proposition before naming controls. It must state:

- the product transformation made physical or visible—for example, sound becoming language, scattered work becoming a plan, or uncertainty becoming a clear next step;
- one dominant visual event, material field, typographic gesture, illustration, or graphic system that owns the screen at thumbnail size;
- the reading path, deliberate asymmetry or balance, repetition, alignment, proximity, and negative space;
- a small palette with distinct jobs: atmosphere, active motion, settled information, and interruption or danger;
- how a quiet icon/control cluster supports the hero without competing with it.

"Dark", "minimal", "premium", a centered card, or a status pill is not a visual proposition. The proposition must still be specific and memorable after all labels are removed.

Create three incompatible propositions. They must differ in visual event and spatial grammar, not merely background color, typography, or material.

## Research, but do not attach Mobbin in exploration

Use Mobbin to sharpen a proposition when it answers a concrete craft question. The first three imagegen calls are reference-free unless the user explicitly asks to emulate, combine, or attach a source. Never let a screenshot choose the product's structure.

After a user selects a direction, use an accepted reference only for one named craft repair. Attach the selected prototype itself as the edit target; do not redraw the product through a competitor screen.

## Write the prompt in this order

Read `references/imagegen-ui-prompts.md` and `references/visual-quality-gate.md` before generating.

Lead with `Visual proposition — “name”`, then describe the visual world with concrete material, spatial, typographic, and color behavior. State the screen truth next. Finish with only the active action, essential supporting controls, concise exact copy, and specific exclusions. Write art direction in English; preserve quoted on-screen copy in the product language.

Do not begin from a sidebar, top status row, central card, control panel, or a complete product inventory unless the user explicitly fixed that layout. Do not use a long “show only” manifest. A secondary setting may be a paired micro-control, a settings glyph, or one quiet entry rather than a full utility region.

## Generate like a designer

Generate one screen at a time and inspect it immediately; never spend the first three calls as an unchecked parallel batch. Reject a result when product chrome, navigation, boxes, or ordinary controls push the visual event into the background. Rewrite the proposition—not a larger control list—and regenerate before moving on.

Generate only one interface screen per image. Keep shared copy byte-identical across directions. Once a direction passes, create its secondary, empty, loading, and error screens as separate calls in the same visual world.

## Hard stop — do not keep generating images

These override exploration momentum:

1. **User interrupt or complaint** about continuous / batch image generation → cancel remaining imagegen immediately; do not start another round. Switch to implementing against the already-agreed written direction, or ask one short question only if no direction exists yet.
2. **Direction already locked** in an approved plan (palette, layout contract, brand posture) and the user asks to implement / “直接改” / “别出图了” → **skip exploration imagegen**; code against that contract and verify with real app screenshots.
3. **Never** fire parallel multi-direction batches (e.g. 3 list × 3 detail) after a direction has been selected, or after the user has redirected away from mockups.
4. When mockups are still required, show **one** screen of **one** direction, wait for human feedback, then continue.