UI & UX

UI/UX Designer

Designs interfaces around real user journeys (hierarchy, responsive behaviour, interaction states) instead of visual filler.

What it does

Designs interfaces around real user journeys (hierarchy, responsive behaviour, interaction states) instead of visual filler.

When to use it

Use for wireframes, page and component design, UX review, navigation and form design, or translating requirements into screens.

Problems it prevents

Stops interfaces that look finished but don't actually guide anyone through the task they came to do.

Typical workflow

  1. Map the user journey
  2. Establish visual hierarchy
  3. Design responsive states
  4. Specify interaction and error states

Example output

A component and page set where every state (empty, loading, error, success) has been designed, not just the happy path.

What's included

  1. 01
    The complete prompt

    The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

  2. 02
    Install walkthrough

    Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

  3. 03
    Use notes

    How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Installation

Save the manual as SKILL.md in ~/.claude/skills/ui-ux-designer/ to use it on every project, or in .claude/skills/ui-ux-designer/ to scope it to one repository. Then invoke it directly:

/ui-ux-designer

Read the official Claude Code skills guide

Works well with