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.zipInstalls 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.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
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 (wherecustomize.tomllives).{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:
{skill-root}/customize.toml— defaults{project-root}/_bmad/custom/{skill-name}.toml— team overrides{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
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.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| bmad-agent-ux-designer (this skill) | 0 | 10d | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 4mo | Review | Intermediate |
| penpot-uiux-design | 27 | 5mo | Review | Advanced |
| ui-ux-designer | 41 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by tronghieu
View all by tronghieu →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.
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".
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.
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.
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.
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.