Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    UI/UX Designer

    1

    Turns requirements into information architecture, text wireframes, and accessibility specs without drawing tools.

    $10

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    UI/UX Designer

    UI/UX Designer

    Example session with this skill installed

    Generate the UX handoff for 'TaskMaster' based on the requirements in docs/requirements.md. Focus on the 'Create New Task' slice.

    • Read your context and instructions
    • Compiled the ui ux designer

    I have processed the requirements for TaskMaster. The UX handoff is ready in docs/ux.md.

    TaskMaster UX Handoff

    Product: TaskMaster
    Slice Goal: Create a new task and add it to the primary list.
    Status: Ready

    1. Named User

    Primary Persona: Project Lead (from P0 Story: "As a Project Lead, I want to capture tasks quickly...")

    2. Information Architecture

    • Surface 1: Task Board (Main): The primary list of active tasks.
    • Surface 2: Creation Overlay: A modal-style panel for inputting task details.
    • Navigation: Board -> [Add Button] -> Creation Overlay -> [Submit] -> Board.

    3. Primary Flow: Create & List

    1. Entry: User clicks "+" button on Task Board.
    2. Step: Creation Overlay slides in; focus moves to "Task Title" field.
    3. Step: User types title and selects an optional "Priority".
    4. Step: User hits "Enter" or clicks "Create".
    5. Exit: Overlay closes; focus returns to the new item at the top of the Task Board.

    4. Text Wireframes

    Surface: Creation Overlay

    +------------------------------------------+

| Create New Task                      [X] |

+------------------------------------------+

| [ Task Title (Field)                   ] |
| [ Priority (Select: Low, Mid, High)    ] |
|                                          |
| [ Cancel (Btn) ]          [ Create (Btn) ] |

+------------------------------------------+
    • Interactive: Title field (autofocus), Priority dropdown, Create button (disabled if Title empty).

    5. States

    • Empty (Board): "No tasks yet. Capture your first project goal to get started." + [Create Task] button.
    • Loading: Skeleton rows replace the list during fetch.
    • Success: Toast notification: "Task [Name] created successfully."

    6. Accessibility Notes

    • Keyboard: Tab order: Title -> Priority -> Create -> Cancel -> Close.
    • Focus: 2px solid blue outline on all interactive inputs.
    • Contrast: All text meets 4.5:1 ratio; Priority tags use text labels (not just color).
    • Labels: All fields have associated <label> elements or aria-labels.

    Next steps

    1. Review the flow in docs/ux.md.
    2. Hand off to software-architect to define the frontend components.
    3. Validate the empty state copy with the product owner.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    The problem

    Developers often receive vague requirements or high-fidelity design files that are hard to implement without a clear logical flow. Jumping straight from a vision document to code leads to missing empty states, broken accessibility, and undefined user paths.

    What it does

    • Extracts personas and P0 stories from requirements to establish a primary user flow.
    • Maps information architecture including surfaces, navigation, and grouping without choosing a tech stack.
    • Generates text-based wireframes and ASCII maps that define UI regions and interactive elements.
    • Specifies mandatory empty, loading, error, and success states for every data-driven surface.
    • Provides actionable accessibility notes covering keyboard tab order, focus indicators, and contrast ratios.

    Why this beats prompting it yourself

    This skill enforces a strict UX methodology that prevents "design creep" and refuses to invent missing requirements. It ensures every UI element is tied to a P0 story, preventing the common mistake of designing P1/P2 features before the core flow is stable.

    Use cases

    • Converting a Business Analyst handoff into a developer-ready UI specification.
    • Mapping complex user flows for new product slices before writing any frontend code.
    • Auditing requirements for missing user personas or undefined "stuck points" in a journey.
    • Creating accessibility-first UI documentation for teams without a dedicated design department.

    Known limitations

    Requires a readable requirements file and a named persona to function. It will not generate branding, CSS frameworks, or Figma/Sketch files.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 1 month ago

    • Passed all security checks, Safe to install

    Listed1 month ago

    What's inside

    Frequently Asked Questions