A collection of custom Claude Code skills for UX design workflows.
Generate low-fidelity and mid-fidelity ASCII wireframes from natural language descriptions. Supports mobile apps, web applications, dashboards, landing pages, e-commerce flows, and multi-step workflows. Applies UX principles and produces annotated wireframes with realistic pseudo-content.
Trigger phrases: "create a wireframe for...", "design a [screen name]", "show me a layout for..."
Iterative UI design collaboration that builds and refines screens into working HTML. Start from a wireframe, screenshot, or design brief and refine through structured back-and-forth. Claude translates design intent into working visuals while preserving decisions made across the session.
Trigger phrases: "let's work on [screen name]", "I want to redesign X", "here's what I have so far" + image upload
Synthesize usability testing notes, transcripts, or recordings into a stakeholder-ready .docx report. Organizes findings by severity (Critical → High → Medium → Positive), writes an executive summary that identifies the theme connecting issues, and produces a prioritized table of design changes.
Trigger phrases: "create a user testing report", "write up my usability findings", "turn my testing notes into a document"
- Download the
.skillfiles from this repository. - Place them in your Claude Code skills directory:
- Mac/Linux:
~/.claude/skills/ - Windows:
%USERPROFILE%\.claude\skills\
- Mac/Linux:
- Restart Claude Code — skills are loaded automatically.
Invoke a skill by describing your task naturally. Claude will recognize the trigger phrases and activate the appropriate skill. You can also invoke skills explicitly using /skill-name in Claude Code.