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
- 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. - 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.
- 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.
- 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.