AutoGineer
Generated banner for Design First UI Prompting
Generated logo for Design First UI Prompting

Design First UI Prompting

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • No issues found
Download ZIP

From the author

Use when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a systematic approach to UI generation by treating AI prompts like a design system. Instead of relying on vague descriptions, it encourages users to define specific constraints, typography, layout, and hierarchy. By using a standardized prompt skeleton and iterative workflows, users can achieve more predictable and professional visual results from generative AI models.

What it does

  • Provides a reusable prompt skeleton for UI generation
  • Defines clear sections for layout, typography, color, and imagery
  • Offers a 2-pass workflow to handle text rendering issues
  • Suggests using constraint cards to anchor stylistic choices
  • Outlines a strategy for iterative refinement by changing one variable at a time

When to use it

  • When you need consistent UI mockups or design assets
  • When generative models are producing inconsistent or messy layouts
  • When you need to maintain specific brand typography and spacing rules
  • When you want to move from fuzzy ideas to a concrete visual specification

Advantages

  • Reduces ambiguity in AI-generated design outputs
  • Promotes a disciplined, design-system-oriented mindset
  • Improves control over typography and layout hierarchy
  • Facilitates faster iteration cycles through controlled variable changes

Usage examples

“Help me write a prompt for a landing page hero section using the design-first framework.”
The agent will provide the structured skeleton, asking for specific details on the persona, success criteria, and layout hierarchy to build a precise prompt.
“My AI-generated UI has messy text. How can I fix this?”
The agent will guide you through the 2-pass workflow: generating the layout without text first, then adding typography in a design tool.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/design-first-ui-prompting/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip design-first-ui-prompting.zip -d .agents/skills

Documentation by Meng To

Design-First UI Prompting Skill

This skill is for design-first prompting: turn fuzzy ideas into a tight spec that produces consistent UI.

Core principle

Prompt like a design system, not a wish.

Prompt Structure (copy/paste)

Use this skeleton, then fill the blanks.

GOAL
- What are we making? (e.g., landing page hero / onboarding / dashboard / carousel slide)
- Who is it for? (persona)
- What’s the success criteria? (clarity, conversion, vibe)

FORMAT
- Size/aspect: (e.g., 1080x1350)
- Safe margins: (e.g., 90px)

LAYOUT (wireframe in words)
- Grid: (e.g., Swiss 6-col)
- Placement: (e.g., type-left / image-right)
- Hierarchy: H1 → subhead → body → CTA

TYPE SYSTEM
- Font vibe: (e.g., Söhne / Neue Haas / SF Pro)
- Weights: (H1 700, body 400)
- Leading: (tight for H1, readable for body)
- Tracking: (micro labels wider)

COLOR + MATERIAL
- Background: (hex or description)
- Text: (white/ivory/charcoal)
- One accent only: (cyan/lime/purple)
- Texture: (subtle grain, no plastic HDR)

IMAGERY / UI STYLE
- UI style: (minimal / glass / editorial / playful 3D)
- If photo: lighting + crop + texture rules
- If 3D: materials + lighting + softness

COPY (render EXACTLY)
- Line 1:
- Line 2:
- ...

CONSTRAINTS (change 1–2 things only)
- FONT: ___
- STYLE: ___
- MODE: ___

NEGATIVE PROMPT
- No logos, no watermarks
- No extra text beyond provided lines
- No gibberish typography

Rules that improve consistency

1) Lock one “system”, then iterate with variants

  • First output: nail layout + hierarchy + copy.

  • Variants: change ONE variable at a time:

    • angle / crop

    • accent color

    • card arrangement

    • background tone

2) Treat typography as fragile

If the model keeps misspelling:

  • Use 2-pass workflow:

    1. Generate without text (reserve a clean text-safe area)

    2. Typeset in Figma

3) Use “constraints cards”

When you want the model to obey a style:

  • Add a small “Constraints” panel with explicit values.

  • It anchors the output like a mini style guide.

Example:

Constraints
FONT  CANELA
STYLE  MINIMAL
MODE  DARK
4) Keep a local reference pack

Don’t ask the model to “remember” taste.

  • Save references into a gitignored local reference folder, such as refs/...

  • Point prompts to the reference style

Fast iteration checklist (what to tweak)

  • Spacing: margins, leading, baseline rhythm

  • Contrast: background vs text

  • Hierarchy: one hero line, one support line

  • One accent only (don’t rainbow)

  • Texture: add grain, remove smoothing

Questions to ask (when user is vague)

  • What’s the single message of this screen?

  • What’s the hierarchy (H1 / sub / CTA)?

  • Which style lane: minimal editorial vs playful 3D vs glass UI?

  • Any must-keep constraints (font vibe, color, spacing, grid)?

Files

ARTICLE.md

Design-First UI Prompting Playbook (Draft)

AI doesn’t make great design. It makes average design fast. Your edge is still taste + craft.

Here’s the workflow that actually ships.

1) Screenshots beat prompts

One screenshot contains fonts, spacing, colors, icons, layout. Gemini 3 reads it instantly.

Rule: Stop writing 1000-word descriptions. Start collecting references.

2) The hero section is half the job

Hero = your cover image for social. Everything else is secondary.

Workflow

  • Use Superhero to collect hero references

  • Lock hero first

  • Build the rest section-by-section

3) Templates are leverage

Template business prints money. Sell on Webflow / Framer / UI8 for ~$50–$100. Stack enough and it compounds.

Rule: Build assets, not one-offs.

4) Taste is the moat

AI raises the baseline. Your visual judgment becomes the differentiator, not your Figma speed.

Rule: Curate hard. Ship fewer, better.

5) Avoid AI slop

Common slop:

  • purple gradients

  • Lucide icons everywhere

  • generic layout rhythm

Fix

  • Switch to Iconify Solar for variety (outline, broken, duotone)

6) Use Simple Icons (logos) via Iconify

Stop hunting SVGs. Use Simple Icons via Iconify for brand logos.

Rule: One API reference in your prompt. No more manual logo scavenger hunts.

7) Work section-by-section (not full-page)

Build in your preferred AI builder, prototyping tool, or code editor:

  • hero → features → footer

Benefit: faster iterations + better creative control.

8) Remix everything

Great sources:

  • Mobbin (sites → sections)

  • Bento Grids (cards)

Workflow: screenshot → remix → change colors/text/animation → make it yours.

9) Use negative prompts like guardrails

Add constraints:

  • “Don’t change anything else.”

  • “Keep the hero.”

Benefit: prevents AI from breaking what already works.

10) Fix images manually (AI breaks them)

When images are wrong:

  • generate replacements in Midjourney or Nano Banana Pro

  • swap them in

Rule: Don’t wait for the model to get it perfect. Patch the weak link.

11) Typography still matters

Google Fonts are free + AI-friendly. Inter is overused—try:

  • Newsreader

  • Playfair Display

Rule: pick one type “move” that signals taste.

12) Add craft signals

Small details that instantly level up:

  • 01/02/03 numbering

  • container-sized grid lines

  • subtle beam/noodle animations

  • hero backgrounds via Unicorn Studio

13) Steal better headlines

Hooks = conversions. Use:

14) Present properly (social is distribution)

  • Record with Screen Studio

  • Screenshot on polished backgrounds

Rule: presentation is part of the product.

15) Speed trick: pick the right model

  • GPT‑5.1 for small text/color tweaks

  • Gemini 3 for complex UI generation

Bottom line

Superhero for heroes. Mobbin for sections. Bento Grids for cards. Iconify for icons.

Screenshot → Gemini 3 → Remix → Polish Your taste curates. AI executes.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/ui/design-first-ui-prompting · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download design-first-ui-prompting.zip