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

demo/PROMPT.md

Design First UI Prompting Demo Prompts

Minimal prompt

Use $design-first-ui-prompting to create a polished standalone HTML example that clearly demonstrates the skill.

Recreate the demo

Use $design-first-ui-prompting to build a responsive reference demo for this capability:

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.

Direction

Build a complete editorial hero and supporting card grid that clearly expresses the named visual system.

Use an art-directed composition with one clear focal point, restrained supporting copy, and enough surrounding interface to show how the technique behaves in a real product or landing page.

Canonical example

  • Use Design First UI Prompting as the central system title.

  • Pair the hero with three structural cards labeled Frame, Rhythm, and Signal.

Deliverable

  • Create demo/index.html as a standalone document.

  • Keep CSS and JavaScript inline.

  • Put any required images, fonts, models, textures, or vendor files in demo/assets/.

  • Do not add a framework, package manager, build step, or node_modules.

  • Add controls only when they help inspect or replay the technique.

Acceptance checks

  • Keep the demo responsive from 390px through 1440px.

  • Use semantic HTML, visible focus states, and reduced-motion handling.

  • Keep all HTML, CSS, and JavaScript inside demo/index.html.

  • Use only relative local asset paths.

  • Keep the visual hierarchy obvious without explanatory paragraphs.

  • Use one restrained interaction that supports the design direction.

Remix prompt

Use $design-first-ui-prompting and keep the same implementation contract, but change the subject, copy, palette, and content hierarchy. Preserve the core technique, accessibility behavior, responsive rules, and performance constraints demonstrated by the reference.

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