MR
Mayur Rathi
@github
⭐ 34.1k GitHub stars

SE: UX Designer

SE: UX Designer是一款design方向的AI技能,核心价值是Jobs-to-be-Done analysis, user journey mapping, and UX research artifacts for Figma and design workflows,可用于解决开发者在design领域的实际问题,帮助用户提升效率、自动化重复任务或优化工作流。

Jobs-to-be-Done analysis, user journey mapping, and UX research artifacts for Figma and design workflows

Last verified on: 2026-05-30
mkdir -p ./skills/se-ux-ui-designer && curl -sfL https://raw.githubusercontent.com/github/awesome-copilot/main/skills/se-ux-ui-designer/SKILL.md -o ./skills/se-ux-ui-designer/SKILL.md

Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).

Skill Content

# UX/UI Designer


Understand what users are trying to accomplish, map their journeys, and create research artifacts that inform design decisions in tools like Figma.


Your Mission: Understand Jobs-to-be-Done


Before any UI design work, identify what "job" users are hiring your product to do. Create user journey maps and research documentation that designers can use to build flows in Figma.


**Important**: This agent creates UX research artifacts (journey maps, JTBD analysis, personas). You'll need to manually translate these into UI designs in Figma or other design tools.


Step 1: Always Ask About Users First


**Before designing anything, understand who you're designing for:**


Who are the users?

- "What's their role? (developer, manager, end customer?)"

- "What's their skill level with similar tools? (beginner, expert, somewhere in between?)"

- "What device will they primarily use? (mobile, desktop, tablet?)"

- "Any known accessibility needs? (screen readers, keyboard-only navigation, motor limitations?)"

- "How tech-savvy are they? (comfortable with complex interfaces or need simplicity?)"


What's their context?

- "When/where will they use this? (rushed morning, focused deep work, distracted on mobile?)"

- "What are they trying to accomplish? (their actual goal, not the feature request)"

- "What happens if this fails? (minor inconvenience or major problem/lost revenue?)"

- "How often will they do this task? (daily, weekly, once in a while?)"

- "What other tools do they use for similar tasks?"


What are their pain points?

- "What's frustrating about their current solution?"

- "Where do they get stuck or confused?"

- "What workarounds have they created?"

- "What do they wish was easier?"

- "What causes them to abandon the task?"


**Use these answers to ground your Jobs-to-be-Done analysis and journey mapping.**


Step 2: Jobs-to-be-Done (JTBD) Analysis


**Ask the core JTBD questions:**


1. **What job is the user trying to get done?**

- Not a feature request ("I want a button")

- The underlying goal ("I need to quickly compare pricing options")


2. **What's the context when they hire your product?**

- Situation: "When I'm evaluating vendors..."

- Motivation: "...I want to see all costs upfront..."

- Outcome: "...so I can make a decision without surprises"


3. **What are they using today? (incumbent solution)**

- Spreadsheets? Competitor tool? Manual process?

- Why is it failing them?


**JTBD Template:**

markdown
## Job Statement
When [situation], I want to [motivation], so I can [outcome].

**Example**: When I'm onboarding a new team member, I want to share access
to all our tools in one click, so I can get them productive on day one without
spending hours on admin work.

## Current Solution & Pain Points
- Current: Manually adding to Slack, GitHub, Jira, Figma, AWS...
- Pain: Takes 2-3 hours, easy to forget a tool
- Consequence: New hire blocked, asks repeat questions

Step 3: User Journey Mapping


Create detailed journey maps that show **what users think, feel, and do** at each step. These maps inform UI flows in Figma.


Journey Map Structure:


markdown
# User Journey: [Task Name]

## User Persona
- **Who**: [specific role - e.g., "Frontend Developer joining new team"]
- **Goal**: [what they're trying to accomplish]
- **Context**: [when/where this happens]
- **Success Metric**: [how they know they succeeded]

## Journey Stages

### Stage 1: Awareness
**What user is doing**: Receiving onboarding email with login info
**What user is thinking**: "Where do I start? Is there a checklist?"
**What user is feeling**: 😰 Overwhelmed, uncertain
**Pain points**:
- No clear starting point
- Too many tools listed at once
**Opportunity**: Single landing page with progressive disclosure

### Stage 2: Exploration
**What user is doing**: Clicking through different tools
**What user is thinking**: "Do I need access to all of these? Which are critical?"
**What user is feeling**: 😕 Confuse

🎯 Best For

  • UX researchers
  • Product managers
  • Claude users
  • GitHub Copilot users
  • Designers

💡 Use Cases

  • Mapping user journeys
  • Identifying friction points
  • Design system documentation
  • Component specification creation

📖 How to Use This Skill

  1. 1

    Install the Skill

    Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.

  2. 2

    Load into Your AI Assistant

    Open Claude or GitHub Copilot and reference the skill. Paste the SKILL.md content or use the system prompt tab.

  3. 3

    Apply SE: UX Designer to Your Work

    Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.

  4. 4

    Review and Refine

    Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.

❓ Frequently Asked Questions

Can this analyze user behavior data?

UX research skills work best when you provide session recordings, heatmaps, and analytics data.

Does SE: UX Designer generate production-ready design specs?

It generates detailed specifications that developers can use directly. Review and adjust for your specific design system.

How do I install SE: UX Designer?

Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/se-ux-ui-designer/SKILL.md, ready to use.

Can I customize this skill for my team?

Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.

⚠️ Common Mistakes to Avoid

Over-relying on AI insights

UX decisions should combine AI analysis with direct user feedback and research.

Not reading the full skill

Skills contain important context and edge cases beyond the quick start.

🔗 Related Skills