Skip to content
Get packs

Design-First UI Prompting

Write structured, spec-driven prompts that get more consistent UI designs from AI image or UI generators

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
5 files

What it does

This skill teaches the agent to turn a vague UI or visual idea into a tight, structured prompt before generating anything. Once installed, the agent fills in a fixed template covering goal, layout, typography, colour, imagery, exact copy and constraints, and follows rules like changing only one variable per iteration and rendering text separately in a design tool when models misspell it. It is a prompting method, not a code generator or design tool itself.

Great for

  • Designers who use AI tools to produce landing pages, slides or dashboard mockups and want more consistent results
  • Developers or product people who need a clear brief to hand to a UI generator
  • Marketers producing a series of on-brand social or carousel visuals

Skip it if

  • Users who need working front-end code or components; the skill covers prompt writing for UI generation, not implementation
  • Situations needing accessibility, usability testing or brand compliance checks, which the skill does not address

Try asking

  • “Turn my rough idea for a fintech onboarding screen into a design-first prompt with layout, type and colour constraints”
  • “Help me iterate on this hero section by changing only the accent colour in the next variant”
  • “Write a copy-ready prompt for a 1080x1350 carousel slide with a minimal dark style”
Step-by-step guide: how to use Design-First UI PromptingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    design-first-ui-prompting.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

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

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Fill in the template fully and lock layout and copy first, then vary one thing at a time
  • If text keeps coming out garbled, generate the image without text and typeset it in Figma or a similar tool
  • Save your reference images in a local folder and point prompts at them rather than relying on the model's memory of a style

What's inside

  • ARTICLE.md
  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.