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://mp-staging.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

LICENSE

MIT License

Copyright (c) 2026 Meng To

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

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.

Download ZIP

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