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
Install this Claude and Codex skill with the command below. The command stays visible even when copy support is unavailable.
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
animation-systems
Used when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel.
article-prompts-to-skills
Convert an article, tutorial, or prompt pack into focused reusable AgentSkills, one independent capability per skill,...
audit-reference-originality
Audit a website or digital experience against its supplied source references for originality and plagiarism risk.