skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-first-ui-prompting

Generates spec-driven prompt structures for consistent UI generation with typography and layout rules.

5.7k|685|Updated Feb 3, 2026
Search Tags:#ai generation#Prompt Engineering#Design system#iteration workflow#Typography#UI Design#Layout
One-click install
npx skills add https://github.com/MengTo/Skills --skill design-first-ui-prompting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-first-ui-prompting
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/ui/design-first-ui-prompting
Command: npx skills add https://github.com/MengTo/Skills --skill design-first-ui-prompting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vague, wish-style prompts produce inconsistent and generic UI outputs from AI models. This Skill turns fuzzy design ideas into tight, spec-driven prompts that lock layout, typography, color, and constraints so generated interfaces stay consistent across iterations.

Core Features & Use Cases

  • Structured Prompt Skeleton: A copy-paste template covering goal, format, layout, type system, color, imagery, exact copy, constraints, and negative prompts.
  • Controlled Iteration Workflow: Rules for changing one variable at a time (accent color, crop, card arrangement) plus a two-pass workflow that typesets text in Figma when models misspell.
  • Reference-Driven Direction: Guidance for curating local reference packs and remixing sources like Mobbin and Bento Grids instead of relying on model memory.
  • Use Case: You need a landing page hero generated by an AI builder. Fill the skeleton with grid, font vibe, one accent color, and exact copy lines, then iterate variants without breaking what already works.

Quick Start

Use the design-first-ui-prompting skill to write a spec-driven prompt for a minimal dark-mode landing page hero with exact headline copy and one accent color.

Frequently Asked Questions about design-first-ui-prompting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write better prompts for AI UI generation?▼

Structure prompts like a design system spec: define goal, format, layout grid, type system, color palette, exact copy, and constraints. Change only one variable per iteration to keep outputs consistent.

How to keep AI-generated UI consistent across iterations?▼

Lock layout, hierarchy, and copy in the first output, then vary one element at a time such as accent color or card arrangement. Add a constraints card with explicit font, style, and mode values to anchor the model.

What should I do when AI misspells text in generated UI?▼

Use a two-pass workflow: generate the design without text while reserving a clean text-safe area, then typeset the copy manually in Figma. Typography is fragile in generative models and should be treated separately.

Which reference sources help with UI design prompting?▼

Mobbin provides real site sections, Bento Grids supplies card layouts, and Iconify with Simple Icons covers iconography. Screenshot references, remix colors and text, and point prompts at the reference style.

When should I use negative prompts in UI generation?▼

Use negative prompts as guardrails to prevent the model from breaking working elements, such as instructing it not to change anything else or to keep the hero. Also exclude logos, watermarks, and extra text beyond provided lines.

Related Skills

Explore More Design & Creative Skills→
NammDevNammDev
2

ai-artist

Generates AI-assisted images from curated Nano Banana prompts via Gemini APIs.

Community
Intermediate
ACHVMRACHVMR

smelteros-creative-build-directive

Define SmelterOS landing page and UI component blueprints with color tokens and animation specs.

Official
Advanced
krzemienskikrzemienski
2

design-validation

Compare implementation screenshots against design references to measure visual and structural fidelity.

Community
Advanced
pulse-energy-eupulse-energy-eu

refine

Refine blog post drafts for accuracy, brand voice, and AI artifacts.

Official
Advanced