Orchestrate a three-phase UX workflow from requirements to UI implementation.
npx skills add https://github.com/wilsto/claude-code-starter-kit --skill ux-wilsto
Please help me install this Agent Skill. Skill: ux Source: https://github.com/wilsto/claude-code-starter-kit/tree/main/.claude/skills/ux Command: npx skills add https://github.com/wilsto/claude-code-starter-kit --skill ux-wilsto
This Skill streamlines the creation of user interfaces by enforcing a structured, three-phase workflow, ensuring that user needs and design decisions are validated before any code is written, preventing costly rework and ensuring alignment with business goals.
Initiate the UX design process for a new feature by typing "/ux".
High-intent search queries and answers about installing and using this skill.
A structured UI design workflow prevents rework by enforcing a strict sequence of business clarification, textual wireframe validation, and pixel-perfect implementation to validate user needs before writing code.
Textual wireframe validation is a prototyping step that creates a text-based layout to validate user flow and states before visual design. It is needed when translating functional requirements into a concrete UI structure.
Implement a user dashboard by first clarifying core user goals, then prototyping the layout textually, and finally translating the approved prototype into pixel-perfect, production-ready code using established design system rules.
Yes, the UI design workflow integrates directly with functional specifications and design systems, providing guardrails against common UI development anti-patterns to ensure pixel-perfect implementation alignment.
The best way to validate user needs before coding is to execute a clarification phase that gathers essential requirements through targeted questions, ensuring the what and why of the UI are fully defined and aligned with business goals.
Skipping the clarification phase removes guardrails against common UI development anti-patterns, leading to misaligned design decisions, unvalidated user needs, and costly rework during the pixel-perfect implementation phase.
hfadhlullahGenerate Product Requirements Documents through an interview process.
LAF-USConvert Figma frames or components into reusable UI code with design tokens.
daymadeExtract color palettes, typography, spacing, and component styles from reference UI images.
SensLiaoGenerate HTML prototypes from visual anchors and page lists.
