mohamedabdallah-14/prompt-to-asset/ui-mockup-prompt

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.

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.