ui-mockup-prompt

Files (13)

• SKILL.md
• anti-slop-detail.md · references/
• craft-rules-condensed.md · references/
• laws-of-ux.md · references/
• _skeleton.md · references/models/
• flux-2-pro.md · references/models/
• gpt-image-1.5.md · references/models/
• gpt-image-2.md · references/models/
• ideogram-3-turbo.md · references/models/
• midjourney-v7.md · references/models/
• nano-banana-pro.md · references/models/
• routing-evidence.md · references/
• surface-patterns.md · references/

SKILL.md (first lines)

# ui-mockup-prompt

This skill turns a UI brief into a single paste-ready prompt for a strong-text image model (gpt-image-2, Nano Banana Pro, Ideogram 3 Turbo, Flux 2 Pro, Midjourney v7) that produces designer-quality mockups for **inspiration**, not pixel-exact production UI.

The output is for a working designer to riff on. They will redo the spacing, the radius, the font, the exact palette. What they need from the image is a **visual direction with soul** — one that isn't AI-default purple-gradient-on-white-Inter-rounded-card slop.

## Four things this skill must do, in order

1. **Identify the surface and its job.** A pricing page, a dashboard, a settings screen, an onboarding flow — each has a different job. Aesthetic commitment is constrained by what the surface must *do*, not chosen freely. Look the surface up in `references/surface-patterns.md`.
2. **Pick the right model.** Text density, transparency need, available references, and budget all flow into a routing decision the calling agent should not have to think about.
3. **Compose a slot-labeled prompt** in that model's specific dialect, with the universal anti-slop rules, craft-grounded design intelligence, and the surface's UX-pattern requirements baked in.
4. **Return the bundle:** chosen model + reasoning + paste-ready prompt + multi-ref recipe (if the user has refs) + validation reminder (with surface-specific UX checks).

The prompt should resist AI defaults *by construction*. The model still has freedom — the skill commits to one bold aesthetic direction *constrained by the surface's job* and writes the prompt around it, instead of letting the model fall back to indigo + Inter + rounded cards OR to editorially-polished output that violates the page's UX fundamentals.

**Why both halves matter.** Visual-craft rules alone (no Inter, no purple gradient, no rounded card chrome) produce non-slop pixels. UX-pattern rules alone (comparison matrix on pricing, F-pattern on dashboards) produce functional layout. Without both, the output is either slop OR editorial slop — still slop. Iteration-1 of this skill caught the first; iteration-2 added the second after a pricing-page output rendered with magazine-grade typography but no comparison matrix, hero eating the page, and value-prop below the tiers.

## When the agent invokes this skill

The calling agent has context. The user has been talking about their product, their brand, the page they're working on. The agent already knows:

- Product name, tone, and what the user is building
- Brand palette if any (often partial — "we use a deep green" is enough to start)
- The specific surface to imagine (pricing page, dashboard, mobile habit-tracker home, etc.)
- Whether the user has reference images on hand

If any of those are missing and material to the output (no idea what the product *does*; no clue about palette direction; ambiguous "design something"), ask **one** clarifying question before generating. Not three. The user wants a prompt, not an interview.

## Routing decision

Walk this top-down. First match wins.

| Condition | Pick |
|---|---|
| User explicitly named a model | That one. Skip routing. |
| Single-screen mockup, ≥6 real labels, no transparency | **gpt-image-2** (default; LMArena #1, +242 Elo over Nano Banana Pro on text-heavy UI) |
| Same as above, but UI has glassmorphism / translucent panels / modal stacks | **gpt-image-1.5** (gpt-image-2 transparency is broken — `background:"transparent"` 400s) |
| User has 3+ reference images and wants explicit ordinal control ("layout from image 1, palette from image 2") | **Flux 2 Pro / Flex** (only model with documented prompt-level ordinal indexing) |
| Onboarding / splash / marketing hero with ≤6 words of in-image text and a CTA | **Ideogram 3 Turbo** (`style_type:"DESIGN"`, `magic_prompt:"OFF"`; only model with native `negative_prompt`) |
| Hero illustration / mood / brand vibe — no real labels, will composite text post-render | **Midjourney v7** (Discord/web only — paste-ready, not API) |
| Multi-screen brand-locked set | Single canvas, 4 screens side-by-side on **gpt-image-2** or **Nano Banana Pro**. Cap at 4 — past that, drift wins. |
| User wants Google's "Thinking" pre-pass for multi-region reasoning | **Nano Banana Pro** with `[Subject][Action][Location][Composition][Style][Editing]` bracket-tag dialect |

If none match cleanly, default to **gpt-image-2**.

For deep dives on each model's quirks, dialect rules, and full per-template examples, read the matching file in `references/models/` (loaded only when needed). For the routing evidence base — STRICT NED, ImagenWorld, LMArena, practitioner failure data — read `references/routing-evidence.md`.

## The cardinal anti-slop rules

These are the failure modes that make AI mockups instantly recognizable as AI mockups. The prompt the skill emits must violate none of them. Several of these are auto-linted by the open-design daemon's `lint-artifact` (the user has merged the rules into nexu-io/open-design as P0); we hold the same line.

**Hard P0s (the prompt must never include these):**

1. **Tailwind indigo as accent** — never request `#6366f1`, `#4f46e5`, `#4338ca`, `#3730a3`, `#8b5cf6`, `#7c3aed`, `#a855f7`. These are the textbook AI tell. If the user's brand happens to be indigo, say so explicitly with their hex, not with a Tailwind name.
2. **Two-stop "trust" gradient on a hero** — purple→blue, blue→cyan, indigo→pink. Replace with a flat surface + intentional type, or a single restrained gradient with a real reason.
3. **Emoji as feature icons** — `✨`, `🚀`, `🎯`, `⚡`, `🔥`, `💡` inside headings, buttons, or feature lists. Use 1.6–1.8 px stroke monoline SVG icons or omit icons entirely.
4. **Inter / Roboto / Arial / `system-ui` as the headline typeface.** This is the second-most-reliable AI tell. Pick a distinctive display face that fits the brand (Söhne, Geist, Clash Display, Suisse, Söhne Mono, Public Sans, Tiempos, GT America, Authentic Sans — pick one that fits, name it in the prompt, don't default).
5. **Rounded card + colored left-border accent stripe** — the canonical "AI dashboard tile" shape. Drop either the radius or the left border, not both.
6. **Invented metrics** — never write "10× faster", "99.9% uptime", "3× more productive" in the prompt. Either use real numbers from the user or write a plain-English placeholder ("monthly recurring revenue (real value)").
7. **Filler copy** — never write `lorem ipsum`, `feature one`, `placeholder`, `sample content`, `your text here` in the prompt. Realistic content drives the model's typography choices and composition.

**Soft tells the prompt should avoid:**

- The cliché `Hero → Features → Pricing → FAQ → CTA` template skeleton with no variation.
- More than ~12 distinct hex values in the prompt (signal: tokens weren't honored — pick a palette and commit).
- Equi-weighted color usage. Specify dominant + accent, not 6 colors of equal saturation.
- Pure black `#000000` or pure white `#FFFFFF`. Use `#0F0F0F` / `#FAFAFA`. Vibration on screen is real.

**Why this matters.** The model writes pixels for the literal characters in the prompt. If the prompt says "modern minimalist SaaS dashboard with Inter typography and a purple-to-cyan gradient on the hero", the model produces exactly that AI-default. If the prompt says "a working dashboard for a forensic accounting team, deep oxblood accent on warm off-white, GT America Mono for numerals, Söhne for the headlines, no gradient anywhere", the model has new vocabulary to draw on.

## What "design intelligence" means in the prompt

Beyond the anti-slop list, the prompt should encode the craft rules the user merged into nexu-io/open-design. The image model can't enforce all of them — pixels aren't code — but specifying them shapes what the model paints.

**Color hierarchy** (from `craft/color.md`):
- 70–90% neutrals (background, surface, foreground, muted, border)
- 5–10% accent — at most **2 visible uses per screen**. Typical pair: one chip/eyebrow + one primary CTA.
- 0–5% semantic (success/warn/danger)
- <1% effect (gradients, glows — usually skip)

When you write the prompt, name the dominant neutrals and the **single** accent in resolved hex. Don't describe a flood of color.

**Typography commitments** (from `craft/typography.md`):
- Maximum 2 typefaces in the artifact.
- Display ≥32 px gets negative tracking (`-0.01em` to `-0.02em`) — describe it as "tight letter-spacing on the headline."
- ALL CAPS labels need positive tracking (`0.06em` to `0.1em`) — describe as "wide letter-spacing on the small caps label."
- 50–75 character line length on body copy. The prompt can request "comfortable reading column."
- Three-weight rhythm: Read (400) for body, Emphasize (510) for UI/labels, Announce (590) for headlines/buttons.

**State to depict** (from `craft/state-coverage.md`):
- Default ask: depict the **populated** state with realistic content.
- If the brief explicitly mentions a flow, ask for the relevant state: empty, error, loading, or edge.
- For a multi-screen mockup, the four screens can show four states (populated + empty + loading + error) — that lands as a much richer artifact than four populated variants.

**Touch targets and accessibility** (from `craft/accessibility-baseline.md`):
- AA legal floor for touch target = **24×24 CSS px** (NOT the often-cited 44×44 — that's AAA per SC 2.5.5).
- Body text contrast ≥4.5:1, large text ≥3:1. The prompt should say "high-contrast typography" rather than spec ratios — but the *palette* you pick must clear them.
- Focus indicator visible. For a mockup showing focus state, describe a 2px outline at 3:1 contrast against the unfocused state.

**RTL** (from `craft/rtl-and-bidi.md`):
- If the brief is RTL (Arabic/Hebrew/Persian/Urdu), the prompt must say so up front: "right-to-left layout, Arabic body text, navigation drawer on the right, primary CTA right-aligned."
- Don't ask the model to mirror clocks, refresh icons, media playback controls, charts, or photos. Do ask it to mirror nav arrows, sliders, and progress bars.

**Animation** is irrelevant to a static image mockup. Skip.

## The slot-labeled prompt skeleton

Compose every prompt in this shape, regardless of model. The skeleton is the same; the dialect (bracket tags, ordinal indexing, prose, flags) is per-model.

```
[Asset]        A working <surface> for <real product>, captured as a clean <viewport> screenshot.
[Frame]        <device chassis or browser chrome>, <aspect ratio>
[Surface job]  <One sentence on what this page must DO + 2-4 must-have UX moves drawn from references/surface-patterns.md.
                Pricing page → comparison matrix, recommended tier emphasized, value-prop above tiers, consistent CTAs.
                Dashboard → KPI strip → primary chart → secondary lists, F-pattern, last-updated timestamp.
                Settings → grouped sections, dangerous actions quarantined, save behavior visible.
                Onboarding → single primary action, no decision paralysis.
                Marketing landing → nav, hero, social proof, three-act structure, CTA repeated at bottom.
                Form → labels above, inline error below, required marker, sectioned for >7 fields.

From MohamedAbdallah-14/prompt-to-asset, MIT.

More from MohamedAbdallah-14/prompt-to-asset