agentsclimarketplace

Design first ui prompting

Skill nota-america/forgecat-agent-profiles/profiles/mengto/skills/mango_skills_agent-skills-ui/for-forgecat/skills/design-first-ui-prompting

Production-ready AI agent profiles for Claude Code, Cursor, and Codex. Search, install, and contribute ForgeCat packages.

Install
npx -y skills add nota-america/forgecat-agent-profiles --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

  • 24 stars24 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

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.

SKILL.md

3.0 KB, as published. Nobody here has run it

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.

GOAL
- What are we making? (e.g., landing page hero / onboarding / dashboard / carousel slide)
- Who is it for? (persona)
- What’s the success criteria? (clarity, conversion, vibe)

FORMAT
- Size/aspect: (e.g., 1080x1350)
- Safe margins: (e.g., 90px)

LAYOUT (wireframe in words)
- Grid: (e.g., Swiss 6-col)
- Placement: (e.g., type-left / image-right)
- Hierarchy: H1 → subhead → body → CTA

TYPE SYSTEM
- Font vibe: (e.g., Söhne / Neue Haas / SF Pro)
- Weights: (H1 700, body 400)
- Leading: (tight for H1, readable for body)
- Tracking: (micro labels wider)

COLOR + MATERIAL
- Background: (hex or description)
- Text: (white/ivory/charcoal)
- One accent only: (cyan/lime/purple)
- Texture: (subtle grain, no plastic HDR)

IMAGERY / UI STYLE
- UI style: (minimal / glass / editorial / playful 3D)
- If photo: lighting + crop + texture rules
- If 3D: materials + lighting + softness

COPY (render EXACTLY)
- Line 1:
- Line 2:
- ...

CONSTRAINTS (change 1–2 things only)
- FONT: ___
- STYLE: ___
- MODE: ___

NEGATIVE PROMPT
- No logos, no watermarks
- No extra text beyond provided lines
- No gibberish typography

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:

Constraints
FONT  CANELA
STYLE  MINIMAL
MODE  DARK

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/...
  • Point prompts to the reference style

Fast iteration checklist (what to tweak)

  • Spacing: margins, leading, baseline rhythm
  • Contrast: background vs text
  • Hierarchy: one hero line, one support line
  • One accent only (don’t rainbow)
  • Texture: add grain, remove smoothing

Questions to ask (when user is vague)

  • What’s the single message of this screen?
  • What’s the hierarchy (H1 / sub / CTA)?
  • Which style lane: minimal editorial vs playful 3D vs glass UI?
  • Any must-keep constraints (font vibe, color, spacing, grid)?

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.