Design-First UI Prompting Skill

This skill is for design-first prompting: turn fuzzy ideas into a tight spec that produces consistent UI.

When to use this skill

Turning a fuzzy UI idea into a tight, skimmable spec using the GOAL / FORMAT / LAYOUT / TYPE SYSTEM / COLOR+MATERIAL / IMAGERY / COPY / CONSTRAINTS / NEGATIVE PROMPT skeleton.
Locking a single "system" (layout, hierarchy, copy) first, then iterating by changing one variable at a time (angle/crop, accent color, card arrangement, background tone).
Working around unreliable AI-generated typography with the 2-pass workflow: generate without text, then typeset the copy separately (e.g., in Figma).
Building a "constraints card" (FONT / STYLE / MODE) to anchor a model's output like a mini style guide, or maintaining a local, gitignored reference pack instead of expecting the model to "remember" taste.
Running the fast-iteration checklist (spacing, contrast, one-hero-line hierarchy, single accent color, texture) or the vague-user question list to clarify what a UI generation request actually needs.
Not for defining or governing a shared design-token/visual-language system across pages and products (route to design-system), not for responsive/breakpoint layout strategy or verification (route to responsive-design), and not for reusable component API architecture (no dedicated owner skill currently exists in this repo — treat as a design-system boundary question).

Prompt like a design system, not a wish.

Use this skeleton, then fill the blanks.