Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    UI/UX Designer

    1

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

    $10

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity 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
    • Generated the UI component
    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 `` 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.

    ui-ux-designer.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

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

    What you get

    Generate text wireframes and ASCII maps from functional requirements.Define empty, loading, and error states for every application surface.Produce developer-ready accessibility notes including tab order and contrast.Map information architecture and user flows for specific product slices.

    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 install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    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

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 1 day ago

    • Passed all security checks, Safe to install

    Listed1 day ago

    Frequently Asked Questions