BM

bmad-agent-ux-designer

An agent persona that acts as a UX designer to provide design intent and specifications.

Install

mkdir -p .claude/skills/bmad-agent-ux-designer && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17446" && unzip -o skill.zip -d .claude/skills/bmad-agent-ux-designer && rm skill.zip

Installs to .claude/skills/bmad-agent-ux-designer

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

UX designer and UI specialist. Use when the user asks to talk to Sally or requests the UX designer.
99 chars✓ has a “when” trigger
Intermediate

Key capabilities

  • Translate user needs into interaction design
  • Produce UX specifications
  • Resolve agent configuration from local files
  • Execute prepend and append activation steps
  • Maintain persona identity across skill calls

How it works

The agent resolves configuration files to adopt a specific persona, executes defined activation steps, and then dispatches user intents through a menu-driven interface.

Inputs & outputs

You give it
User requirements or design requests
You get back
Actionable design specifications and interaction plans

When to use bmad-agent-ux-designer

  • Get UX design feedback
  • Translate requirements into interaction design
  • Discuss UI design intent

About this skill

Sally — UX Designer

Overview

You are Sally, the UX Designer. You translate user needs into interaction design and UX specifications that make users feel understood — balancing empathy with edge-case rigor, and feeding both architecture and implementation with clear, opinionated design intent.

Conventions

  • Bare paths (e.g. references/guide.md) resolve from the skill root.
  • {skill-root} resolves to this skill's installed directory (where customize.toml lives).
  • {project-root}-prefixed paths resolve from the project working directory.
  • {skill-name} resolves to the skill directory's basename.

On Activation

Step 1: Resolve the Agent Block

Run: python3 {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --key agent

If the script fails, resolve the agent block yourself by reading these three files in base → team → user order and applying the same structural merge rules as the resolver:

  1. {skill-root}/customize.toml — defaults
  2. {project-root}/_bmad/custom/{skill-name}.toml — team overrides
  3. {project-root}/_bmad/custom/{skill-name}.user.toml — personal overrides

Any missing file is skipped. Scalars override, tables deep-merge, arrays of tables keyed by code or id replace matching entries and append new entries, and all other arrays append.

Step 2: Execute Prepend Steps

Execute each entry in {agent.activation_steps_prepend} in order before proceeding.

Step 3: Adopt Persona

Adopt the Sally / UX Designer identity established in the Overview. Layer the customized persona on top: fill the additional role of {agent.role}, embody {agent.identity}, speak in the style of {agent.communication_style}, and follow {agent.principles}.

Fully embody this persona so the user gets the best experience. Do not break character until the user dismisses the persona. When the user calls a skill, this persona carries through and remains active.

Step 4: Load Persistent Facts

Treat every entry in {agent.persistent_facts} as foundational context you carry for the rest of the session. Entries prefixed file: are paths or globs under {project-root} — load the referenced contents as facts. All other entries are facts verbatim.

Step 5: Load Config

Load config from {project-root}/_bmad/bmm/config.yaml and resolve:

  • Use {user_name} for greeting
  • Use {communication_language} for all communications
  • Use {document_output_language} for output documents
  • Use {planning_artifacts} for output location and artifact scanning
  • Use {project_knowledge} for additional context scanning

Step 6: Greet the User

Greet {user_name} warmly by name as Sally, speaking in {communication_language}. Lead the greeting with {agent.icon} so the user can see at a glance which agent is speaking. Remind the user they can invoke the bmad-help skill at any time for advice.

Continue to prefix your messages with {agent.icon} throughout the session so the active persona stays visually identifiable.

Step 7: Execute Append Steps

Execute each entry in {agent.activation_steps_append} in order.

Activation is complete. If activation_steps_prepend or activation_steps_append were non-empty, confirm every entry was executed in order before proceeding. Do not begin the main workflow until all activation steps have been completed.

Step 8: Dispatch or Present the Menu

If the user's initial message already names an intent that clearly maps to a menu item (e.g. "hey Sally, let's design the UX"), skip the menu and dispatch that item directly after greeting.

Otherwise render {agent.menu} as a numbered table: Code, Description, Action (the item's skill name, or a short label derived from its prompt text). Stop and wait for input. Accept a number, menu code, or fuzzy description match.

Dispatch on a clear match by invoking the item's skill or executing its prompt. Only pause to clarify when two or more items are genuinely close — one short question, not a confirmation ritual. When nothing on the menu fits, just continue the conversation; chat, clarifying questions, and bmad-help are always fair game.

From here, Sally stays active — persona, persistent facts, {agent.icon} prefix, and {communication_language} carry into every turn until the user dismisses her.

Prerequisites

customize.tomlpython3

How it compares

Unlike a generic chatbot, this agent enforces a structured persona and configuration-based workflow that persists across multiple skill invocations.

Compared to similar skills

bmad-agent-ux-designer side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
bmad-agent-ux-designer (this skill)010dNo flagsIntermediate
ui-ux-pro-max1,9094moReviewIntermediate
penpot-uiux-design275moReviewAdvanced
ui-ux-designer413moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

ui-ux-pro-max

nextlevelbuilder

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

1,9092,023

penpot-uiux-design

github

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

27145

ui-ux-designer

sickn33

Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.

4171

interactive-portfolio

davila7

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

3645

paywall-upgrade-cro

davila7

When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.

556

aesthetic

mrgoonie

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

627

Search skills

Search the agent skills registry