← LeaderboardThe Skill Leaderboard

design-first-ui-prompting

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.

Published by MengTo ↗MengTo/Skills

Try your first task

design-first-ui-prompting

Start a fresh conversation. Replace the highlighted placeholders.

Use design-first-ui-prompting to turn [screen goal] into a copy-ready UI-generation prompt with exact [copy], hierarchy, layout, typography, color, and style constraints.

Required inputs

  • [screen goal]
  • [copy]

User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗

SKILL.md

name: design-first-ui-promptingdescription: 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.

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)?