design-first-ui-prompting
Use when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.
Install
git clone https://github.com/MengTo/Skills /tmp/Skills && ln -s /tmp/Skills/agent-skills/ui/design-first-ui-prompting ~/.claude/skills/design-first-ui-prompting
From README
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. Rules that improve consistency 1) Lock one “system”, then iterate with variants First output: nail layout + hierarchy + copy. Variants: change ONE variable at a time: angle / crop accent color card arrangement background tone 2) Treat typography as fragile If the model keeps misspelling: Use 2-pass workflow: 1) Generate without text (reserve a clean text-safe area) 2) Typeset in Figma 3) Use “constraints cards” When you want the model to obey a style: Add a small “Constraints” panel with explicit values. It anchors the output like a mini style guide. Example: 4) Keep a local reference pack Don’t ask the model to “remember” taste. Save references into a gitignored local reference folder, such as refs/...
More from this repo
audit-ai-design-slop
Audit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults,...
no-ai-design-slop
Prevent and remove generic AI-generated design defaults, incoherent visual choices, and established UI defects while...
add-mouse-driven-orbit
Used to add restrained mouse-driven orbit and parallax depth to a Three.js hero by damping one pointer target and...
