design-first-ui-promptinglisted

# 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. ```text 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 typography ``` ## Rules that improve consistency ### 1) Lock one “system”, then iterate with variant