Design First UI Prompting
Meng ToCommunityCreated by Meng To
- Skill
- Guidelines
- Design and creative
- MIT
- No issues found
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
Download the skill as a ZIP:
https://autogineer.com/agent-skills/mengto/design-first-ui-prompting/downloadUnzip 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 typographyRules 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:
Generate without text (reserve a clean text-safe area)
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 DARK4) 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.md3.1 KiB
- ATTRIBUTION.mdAdded by AutoGineer864 B
- LICENSELicence file added by AutoGineer1.0 KiB
- REFERENCES.md141 B
- SKILL.md3.0 KiB
- demo/PROMPT.md1.9 KiB
- demo/index.html16.1 KiB
- demo/preview.jpg56.1 KiB
SKILL.md
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 typographyRules 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:
Generate without text (reserve a clean text-safe area)
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 DARK4) 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)?
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.
Related skills
Frontend Design
AnthropicOfficial
A framework for creating distinctive, intentional UI designs that avoid common templated aesthetics.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0GitHub stars of the source repository188.6k
Theme Factory
AnthropicOfficial
A toolkit for applying professional color and font themes to documents, presentations, and web artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0GitHub stars of the source repository188.6k
Brand Guidelines
AnthropicOfficial
Applies Anthropic's official brand colors and typography to digital artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0GitHub stars of the source repository188.6k
Impeccable
Paul Bakaus· Community
A comprehensive design system and UI refinement tool for auditing, polishing, and evolving digital interfaces.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0Low riskHas scriptsGitHub stars of the source repository105.3k
Diagram Design
Cathryn Lavery· Community
Generate branded, editorial-style technical diagrams as self-contained HTML, SVG, or PNG files.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreMITLow riskHas scriptsGitHub stars of the source repository65.6k
UI UX Designer
Seth Hobson· Community
An expert UI/UX designer focused on systematic, accessible, and research-backed interface creation.
Design and creativeClaude CodeMITGitHub stars of the source repository42.3k
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download design-first-ui-prompting.zip