Design first ui prompting

Skill swd3k/skills/agent-skills/ui/design-first-ui-prompting

Turn vague UI ideas into tight design-first specs for consistent generation. Use when prompting for screens, dashboards, marketing sections, or desktop chrome; covers hierarchy, constraints, variants, and negative prompts.From its SKILL.md

Install

npx -y skills add swd3k/skills --skill design-first-ui-prompting

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.4 KB, 297 tokens by cl100k_base, as published. Nobody here has run it

Design-First UI Prompting

Prompt like a design system, not a wish.

Skeleton

GOAL
- What screen / component?
- Who is it for?
- Success criteria (clarity, speed, conversion, calm)

FORMAT
- Platform: web / desktop window / mobile
- Size or density: compact utility vs marketing

LAYOUT
- Grid / columns
- Hierarchy: title → support → body → primary action
- Zones: nav, main, aside, status

TYPE
- Font vibe (system UI vs editorial)
- Weights and sizes for H1/body/meta
- One mono face only if data-dense

COLOR + MATERIAL
- Background, surface, text, one accent
- Elevation: flat / soft shadow / hairline border

STATES
- default, hover, active, disabled, loading, error, empty

COPY (exact strings)
- ...

CONSTRAINTS (change 1–2 only per variant)
- ...

NEGATIVE
- No extra logos, no lorem in final, no rainbow accents

Iteration

Lock layout + hierarchy + copy.
Variants change one variable: accent, density, or image crop.
If text breaks: generate layout without labels, typeset after.

Questions when vague

Single message of this screen?
Primary action verb?
Utility tool vs marketing vibe?

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.