Guide · Agent skill
How to use the Design-First UI Prompting agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Design-First UI Prompting skill is an agent skill that helps an AI agent turn a vague UI or visual idea into a tight, structured prompt before anything gets generated. It is aimed at designers, developers, product people and marketers who use AI tools to make landing pages, slides, dashboard mockups or social carousels. After this guide you will know what the skill does, how to install it, how to trigger it, and where its limits are.
Design-First UI PromptingMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 4Describe the UI you want. Make a request that names the screen, audience and goal, and mention design-first prompting if needed.
- 5Answer the clarifying questions. Tell the agent the single message of the screen, its hierarchy and the style lane you want.
- 6Lock the first output. Get layout, hierarchy and exact copy right before exploring visual variants.
- 7Iterate one variable at a time. Change only one thing per variant, such as accent colour or crop, and keep the rest fixed.
What the skill makes the agent do
The skill is built on one principle from its source: prompt like a design system, not a wish. When you ask for a UI, the agent works through a fixed prompt skeleton covering goal, format, layout, type system, colour and material, imagery or UI style, exact copy, constraints and a negative prompt. It asks you clarifying questions when your request is vague, such as the single message of the screen, the hierarchy, and which style lane you want.
The skill also sets iteration rules. The first output should lock layout, hierarchy and copy. Variants should change one variable at a time, such as crop, accent colour, card arrangement or background tone. If a model keeps misspelling text, the skill recommends a two-pass workflow: generate the image without text in a reserved clean area, then typeset the text in Figma.
Install the skill
You can install the skill in either of two ways. Download the ZIP from the skill's page on this directory and unzip it into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder if you want it to apply to one project only. Alternatively, upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
The download contains ARTICLE.md, demo/index.html, demo/PROMPT.md, REFERENCES.md and SKILL.md. The file that defines the skill is SKILL.md.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
The skill's description tells the agent to use it when you need design-first, spec-driven, skimmable prompts for UI generation. In practice you can simply describe the UI you want and ask for a prompt or a brief. The demo prompts in the package name the skill directly, which is a reliable way to trigger it.
Useful requests include asking for a structured brief for a landing page hero, a series of on-brand carousel slides with one accent colour, or a dashboard mockup prompt with fixed type and spacing rules. You can also ask for variants of an existing prompt, and the agent should change only one variable per variant.
- Use $design-first-ui-prompting to write a structured prompt for a landing page hero aimed at first-time founders.
- Use $design-first-ui-prompting to make five carousel slide prompts that share one constraints panel.
- Use $design-first-ui-prompting to create three variants of this prompt, changing only the accent colour each time.
What a good prompt looks like
The skill's template is a plain-text skeleton you fill in. Blanks cover the goal and audience, the output size and safe margins, the grid and hierarchy (H1, subhead, body, CTA), the type system with weights and leading, background and text colours with one accent only, the UI style, the exact copy to render, and the constraints.
Constraints cards are a key idea. A small panel with explicit values such as font, style and mode anchors the output like a mini style guide. The negative prompt rules out logos, watermarks, extra text and gibberish typography.
GOAL
- What are we making?
- Who is it for?
- What's the success criteria?
CONSTRAINTS (change 1–2 things only)
- FONT: ___
- STYLE: ___
- MODE: ___
NEGATIVE PROMPT
- No logos, no watermarks
- No extra text beyond provided lines
- No gibberish typographyKeep a local reference pack
The skill advises against asking the model to remember your taste. Instead, save reference images in a local folder that is gitignored, such as refs/, and point your prompts at that reference style. The package's REFERENCES.md lists sources such as Mobbin, BentoGrids, the Figma Community, Iconify icon sets and Simple Icons that you can use when collecting references.
Work through the fast iteration checklist when a result is off: adjust spacing (margins, leading, baseline rhythm), contrast between background and text, hierarchy, the single accent colour, and texture.
- Spacing: margins, leading, baseline rhythm
- Contrast: background vs text
- Hierarchy: one hero line, one support line
- One accent only
- Texture: add grain, remove smoothing
What people use it for
- Writing a structured prompt for a landing page hero before generating it in an AI image or UI tool.
- Producing a consistent series of social or carousel visuals that share one constraints panel.
- Creating a clear design brief to hand to a developer or a UI generator.
- Building variants of a dashboard mockup while keeping type and spacing fixed.
- Splitting a text-heavy design into a text-free image pass and a separate typesetting pass in Figma.
Frequently asked questions
Is the design-first UI prompting skill free?
The skill is published under the MIT licence, as listed on this page. Check the licence file in the download for the full terms before you reuse it.
What do I need to use this skill?
The listing states no specific requirements. It runs no scripts and uses no network access, so you mainly need an agent environment that supports skills and the ZIP file.
Where do I install the skill in Claude?
Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
Does this skill generate code or components?
No. It is a prompting method for UI generation, not a code generator or design tool. The listing says it does not cover implementation, so use it to write the brief, then use another tool for code.
Why does the model misspell my text, and what should I do?
The skill treats typography as fragile. Generate the design without text in a reserved clean area, then add and typeset the text in Figma.
Does the skill cover accessibility or brand compliance?
No. The listing says it does not address accessibility, usability testing or brand compliance checks, so you need separate processes for those.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want more consistent AI-generated UI, landing pages or on-brand visual series, and you are willing to write a structured brief first. Pick something else if you need working front-end code, or if you need accessibility, usability testing or brand compliance checks, which this skill does not cover.
Download the skill