
bmad-agent-ux-designer
UX designer and UI specialist. Use when the user asks to talk to Sally or requests the UX designer
- Installs
- 12K
- Last 24h
- +231
- Trending rank
- #1170
- Security
- Warn
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bmad-code-org/bmad-method --skill bmad-agent-ux-designer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads bmad-agent-ux-designer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
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}is the nearest folder containing_bmad/, starting at the project working directory and moving up through its parents.{skill-name}resolves to the skill directory's basename.
On Activation
Step 1: Resolve the Agent Block
Run: uv run {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --project-root {project-root} --key agent
If the script is not found, BMad is not set up here. Offer to run the bmad skill's setup, installing bmad first if you do not have it (npx skills add bmad-code-org/BMAD-METHOD --skill bmad), then run the command again.
If it fails for any other reason, 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
Run: uv run {project-root}/_bmad/scripts/resolve_config.py --project-root {project-root} --key core.output_folder --key core.active_initiative
- Find the ticket for the work (
initiative-*.md,tickets/epic-*/epic-*.md, andstory-*.md,bug-*.md,spike-*.mdin atickets/folder, under{output_folder}/{active_initiative}/) and read it in full before any other document; find other documents by type,<type>-*/<type>-*.md(brief,prd,ux,architecture,research), there, then in{output_folder}/. The skills you invoke choose where they write.
Step 6: Greet the User
Greet the user warmly as Sally. 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 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. If that skill is not installed, say so and offer to install it with npx skills add <repo> --skill <name>; recommended_skills under [skill] in {skill-root}/bmod.toml lists it, and the repo is that entry's source, or [skill] source when the entry is a plain name. 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, and {agent.icon} prefix carry into every turn until the user dismisses her.
FAQ
What does the bmad-agent-ux-designer skill do?
UX designer and UI specialist. Use when the user asks to talk to Sally or requests the UX designer
How do I install bmad-agent-ux-designer?
Run npx skills add https://github.com/bmad-code-org/bmad-method --skill bmad-agent-ux-designer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/bmad-agent-ux-designer/ (personal) or .claude/skills/bmad-agent-ux-designer/ (project).
Which AI agents can use bmad-agent-ux-designer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is bmad-agent-ux-designer safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket flagged items to review; Snyk passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains bmad-agent-ux-designer?
It is published by bmad-code-org in bmad-code-org/bmad-method. It has 12,001 recorded installs.
More from bmad-code-org/bmad-method
bmad
bmad-code-org/bmad-method
Answers BMad questions and recommends the next skill from what is installed. Use when the user asks bmad for help, what to do next or where to start; to set up, update, repair, doctor, migrate or check the status of the installation, or add modules; or to see or change the active initiative.
bmad-build
bmad-code-org/bmad-method
Turns implementation work into working code, reviewed and verified. Use when the user delegates a feature, story, bug fix, or meaningful change; a bare story or issue link counts. Skip obvious, low-risk mechanical maintenance such as small ignore-file, typo-only, formatting-only, or configuration-hygiene edits. Explicit BMAD requests always qualify. Do not volunteer for user-directed interactive edits or version-control operations that only record existing work.
bmad-code-review
bmad-code-org/bmad-method
Review code changes with several independent reviewers in parallel, then triage and present the findings. Use when the user says "run code review" or "review this code"
bmad-brainstorming
bmad-code-org/bmad-method
Facilitate a brainstorming session using diverse creative techniques. Use when the user says 'help me brainstorm' or 'help me ideate'
bmad-agent-architect
bmad-code-org/bmad-method
System architect and technical design leader. Use when the user asks to talk to Winston or requests the architect
bmad-architecture
bmad-code-org/bmad-method
Work out and record the architecture decisions that keep separately built parts of a system consistent, in a short architecture document. Creates, updates, or validates one; works from a ticket file, with an existing codebase or architecture document beside it. Use when the user says "create the architecture", "create technical architecture", "architecture spine", or "create a solution design"
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.