omgskills Get the Mac app
Skill

design-first-ui-prompting

@MengTo 3.8k stars Updated 2026-07-28 Author match: High

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.

Install command
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

View on GitHub

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