agentsclimarketplace

Design first ui prompting

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

Portable agent skills for desktop apps, programming, UI, and web design - Codex, Claude, Cursor, Grok. English SKILL.md playbooks (Photino, Inno, CI, landings).

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.

2 things to look at

  • 19 days oldThe repository was created 19 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 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.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

1.4 KB, 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

  1. Lock layout + hierarchy + copy.
  2. Variants change one variable: accent, density, or image crop.
  3. 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?

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.