skills.rest
aimskr
aimskrOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-design

Design UI/UX workflows from spec intake to Playwright-driven live testing.

Updated Jan 7, 2026
Search Tags:#design#ui#accessibility#playwright#ux#design-system
One-click install
npx skills add https://github.com/aimskr/aims-claude-toolkit --skill ui-ux-design-aimskr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/aimskr/aims-claude-toolkit/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/aimskr/aims-claude-toolkit --skill ui-ux-design-aimskr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly translate design direction, wireframes, and PRD-style requirements into workable UI implementations with accessible, consistent interfaces and measurable UX quality.

Core Features & Use Cases

  • Phase 1: Spec Intake – capture design direction from PRD, align stakeholders, and define success criteria.
  • Phase 2: Screen-by-Screen Design – establish layout, components, states, and interaction patterns using a design system, with accessibility guards.
  • Live review with Playwright – perform browser-based validation, visual regression checks, and iterative refinement with live testing.

Quick Start

Provide a design brief or PRD and implement the UI with Playwright-driven live testing.

Frequently Asked Questions about ui-ux-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate PRD requirements into production-ready UI designs?▼

To translate PRD requirements into production-ready UI designs, this Skill captures design direction from a PRD, establishes screen-by-screen layouts using a design system, and validates interactions with Playwright-driven live testing to ensure production readiness.

How do I test UI accessibility and visual regression with Playwright?▼

To test UI accessibility and visual regression with Playwright, perform browser-based validation across breakpoints during a live review to iteratively check state coverage, accessibility guards, and visual consistency.

Can I validate responsive interfaces across breakpoints using a design system?▼

Yes, you can validate responsive interfaces across breakpoints by establishing layout and interaction patterns with a design system, then executing Playwright-driven validation to verify state coverage and accessibility guards.

What is the best way to align stakeholders on UI UX design direction?▼

The best way to align stakeholders on UI UX design direction is to start with a spec intake phase that captures requirements from a PRD and defines measurable success criteria before screen-by-screen design begins.

Does this UI UX design workflow support iterative refinement during live testing?▼

Yes, this UI UX design workflow supports iterative refinement during live testing by using Playwright to perform browser-based validation and visual regression checks, allowing you to refine interfaces based on live results.

Related Skills

Explore More Design & Creative Skills→
rysweetrysweet
2

Analyzing Problems Deeply

Analyzes ambiguous problems to produce evidence-based decompositions and recommendations.

Community
Advanced
zardusai-cyberzardusai-cyber
1

browser-qa

Automate browser-based smoke tests, interaction checks, and visual regression with accessibility audits.

Community
Advanced
cookeyholdercookeyholder

ui-ux-pro-max

Generate master and page-specific design systems for web and mobile projects.

Community
Advanced
adnanmuelleradnanmueller
2

senior-frontend-engineer

Translate design specs and API contracts into Next.js frontend interfaces.

Community
Advanced