Design with Claude Code | 3 Workflows Worth Learning
UI CollectiveUI CollectiveKey takeaways
Claude Code supports three practical design workflows: reviewing designs through a persona skill, generating and refining varied widget concepts, and producing accessibility handoff reports. These workflows provide design feedback and deliverables, not a replacement for user testing or designer judgment.
Persona-based audits can surface prioritized UX gaps, while a prompt that requests distinct data formats and compositions produces more varied widget concepts that can be expanded and reviewed. The accessibility review skill can generate developer-ready tab and reading order reports, but research synthesis and UX copy still require broader design judgment and process.
Video Flow
- 0100:00
Preview: design work and surrounding tasks
Claude Code supports both design tasks and the work around them; three practical workflows focus on persona-based feedback, design variation, and accessibility handoff.
- 0200:18
Build a reusable persona review skill
Persona documents and a journey map serve as source material for a skill that checks UX flows against the persona’s goals, knowledge, behaviors, and constraints, prioritizes evidence-based improvements, and labels assumptions without claiming user testing. Claude Code can navigate a locally running prototype and apply the skill to generate a prioritized audit; the feedback is meant to expose gaps when users are not readily available, not replace user feedback.
- 0303:14
Prompt for distinct widget concepts, then review them
For a full-width net-worth widget, a prompt asking for seven to eight high-quality variations with different styles and data formats yields distinct compositions such as an account table, goal progress, and allocation map. Claude Code’s design skill generates the widgets; the concepts can be expanded into a page or given fuller annotations on rationale, strengths, limitations, and trade-offs, then checked against the persona skill. The variation prompt helps avoid designs that share the same data structure, while the persona audit supplies a prioritized review.
- 0406:51
Create accessibility handoff reports
The accessibility review skill generates tab order and reading order reports for developers, including prioritized issues and details such as element names; a complex dashboard may require careful QA, and this example took 15 minutes. The report can build on an existing order in a Claude Code dashboard or provide an order for a design that has not established one. Accessibility skills can help with this deliverable, but research synthesis and UX copy still require their own design process and judgment.
Tools & Resources
2 references
Creates the reusable persona skill and navigates the local prototype to audit its UX.
Provide persona details used to build a reusable UX review skill.
- 01Provide persona details used to build a reusable UX review skill.00:40
Supplies persona-related context for the reusable UX review skill.
- 01Supplies persona-related context for the reusable UX review skill.00:40
Applies persona evidence and constraints to identify and prioritize UX friction.
Builds a prompt for varied net-worth widget concepts before any designs are generated.
- 01Builds a prompt for varied net-worth widget concepts before any designs are generated.04:01
Generates widget concepts from the copied variation prompt.
- 01Generates widget concepts from the copied variation prompt.04:44
Provides a bundle of design-related skills, including the accessibility review skill.
- 01Provides a bundle of design-related skills, including the accessibility review skill.06:51
Generates tab order and reading order reports for developer handoff.
- 01Generates tab order and reading order reports for developer handoff.08:46