skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

product_designer

Guides UX research, UI design, and product strategy through a three-phase design workflow.

Updated Jan 14, 2026
Search Tags:#figma#prototyping#usability testing#wireframing#wcag#ux design#ui design
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill product-designer-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product_designer
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/product_designer
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill product-designer-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing digital products without a structured process leads to inconsistent user experiences, missed accessibility requirements, and poor handoffs between design and engineering teams. ## Core Features & Use Cases - Empathy & Research Phase: Define user pain points, build personas, and map user journeys before any design work begins. - Ideation & Prototyping Phase: Progress from low-fidelity wireframes to high-fidelity screens aligned with a design system, including micro-interactions. - Validation & Handoff Phase: Run usability testing, verify WCAG accessibility and responsive behavior, and document designs for developer handoff via tools like Figma Dev Mode. - Use Case: A product team starting a new mobile app feature uses this workflow to research user needs, prototype screens, validate with usability tests, and hand off documented designs to developers. ## Quick Start Use the product designer skill to plan the UX research, wireframing, and usability testing workflow for a new onboarding flow.

Frequently Asked Questions about product_designer

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

FAQPage Schema
How do I structure a UX design process from research to handoff?▼

Follow three phases: Empathy & Research (define pain points, build personas, map journeys), Ideation & Prototyping (wireframes to high-fidelity screens), and Validation & Handoff (usability testing and developer documentation). Each phase includes checkpoints for accessibility and responsiveness.

What is the difference between low-fidelity and high-fidelity wireframes?▼

Low-fidelity wireframes are rough skeleton layouts used early to validate structure and flow quickly. High-fidelity screens come later, applying the design system with real colors, typography, and components before prototyping and testing.

How do I check if my design meets WCAG accessibility standards?▼

Verify accessibility during the validation checkpoint by testing color contrast, keyboard navigation, screen reader compatibility, and text sizing against WCAG criteria. Accessibility review should happen before developer handoff, not after implementation.

How do I hand off designs to developers using Figma?▼

Document the final designs and transfer them via Figma Dev Mode, which lets developers inspect measurements, styles, and assets directly. Include interaction specifications and responsive behavior notes so engineering can implement accurately.

When should usability testing happen in the design process?▼

Run usability testing in the validation phase after prototyping, before handoff. User feedback should feed back into the design iteratively, so testing early prototypes catches problems while changes are still cheap.

Related Skills

Explore More Design & Creative Skills→
soeiroosoeiroo

design-brief

Create structured design briefs with problem statements, audience, constraints, and success criteria.

Community
Intermediate
slantviewslantview
1

frontend

Implement responsive, accessible UI components from Figma designs using modern frameworks.

Community
Advanced
imMamdouhaboammarimMamdouhaboammar

agency-ux-researcher

Generates user research plans, personas, usability testing protocols, and insight reports.

Community
Intermediate
TwuanMinnTwuanMinn

design-orchestration

Coordinate design routing and enforce required artifacts before implementation.

Community
Advanced