Design Workflows
An umbrella design skill with six modes: UX copy, design systems, design critique, WCAG accessibility audits, developer handoff specs, and user research synthesis.
What it does
It classifies your request into one of six modes, then loads the matching reference file before working.
- UX-COPY: button labels, error messages, empty states, onboarding copy — with rationale, 2–3 alternatives, and localization notes
- DESIGN-SYSTEM: component audits, token architecture, component documentation and extension
- CRITIQUE: structured Describe → Analyze → Interpret → Evaluate critique plus Nielsen's 10 heuristics, scaled to design stage
- ACCESSIBILITY: WCAG 2.1 AA audit (4.5:1 text contrast, keyboard paths, ARIA) with severity-ranked findings
- HANDOFF: implementation specs covering layout, tokens, all states, interactions, and edge cases
- RESEARCH: affinity mapping, theme development, triangulation, and an impact/frequency priority matrix
A failure-mode table explicitly guards against generic copy, inaccessible color suggestions, missing edge cases, and fabricated research quotes.
Who it's for
- Product designers, UX writers, and design-system maintainers
- Frontend developers or founders shipping UI without a designer
- Teams standardizing accessibility reviews and dev handoff docs
Examples
- "Write the payment failure error message" → a What happened + Why + How to fix primary option plus tone-differentiated alternatives
- "Audit this dashboard mockup for accessibility" → findings cited to WCAG criteria, a contrast ratio table, keyboard nav map, and prioritized fixes
- "Synthesize these 12 usability test notes" → themes with prevalence (8 of 12 participants), supporting quotes, insight-to-opportunity table, and open research questions
· · · Install guide · · ·
Try it now, no install
Paste this into Claude to use the skill without installing anything.
Read the instructions in this file and follow them to help me: https://raw.githubusercontent.com/notque/vexjoy-agent/HEAD/skills/business/design/SKILL.md What I want: (describe your task here)
If Claude can't open the link, open it yourself and paste the contents instead.
↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.
Install in the Claude app (no terminal)
- Download the ZIP with the button below.
- In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
- Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
Install in Claude Code
Let Claude do it — paste this into Claude Code
Install the skill I found on Claude Skill Mart. Copy the skills/business/design folder from the GitHub repo notque/vexjoy-agent into my ~/.claude/skills/notque-design/. When it's done, tell me in one line what this skill can do.
Install with a command instead
git clone https://github.com/notque/vexjoy-agent.git /tmp/vexjoy-agent && mkdir -p ~/.claude/skills/design && cp -r /tmp/vexjoy-agent/skills/business/design/* ~/.claude/skills/design/⚠ This is a third-party skill. Check the source repository before installing.
- Open a terminal.
- Clone the repo:
git clone https://github.com/notque/vexjoy-agent.git - Create the skill folder:
mkdir -p ~/.claude/skills/design - Copy everything, including reference docs:
cp -r vexjoy-agent/skills/business/design/* ~/.claude/skills/design/ - Verify that
~/.claude/skills/design/contains bothSKILL.mdand thereferences/folder — without references the detailed guidance is missing. - Restart Claude Code and try a prompt like "review this screen for accessibility" or "write UX copy for this confirmation dialog".