skills.rest
xmx0632
xmx0632COMMUNITY
Explore all skills by this author →
GitHub

product-design

okay, I'll respond with:

1|Updated Jan 26, 2026
Search Tags:#prototype#product-design#ux-design#design-system#wireframe#user-flow
One-click install
npx skills add https://github.com/xmx0632/claude-code-demo --skill product-design-xmx0632
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-design
Source: https://github.com/xmx0632/claude-code-demo/tree/main/SDLC-Framework/02-product-design
Command: npx skills add https://github.com/xmx0632/claude-code-demo --skill product-design-xmx0632

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps product teams translate requirements into concrete design artifacts (wireframes, user flows, and interactive prototypes), aligning UX with business goals and accelerating delivery.

Core Features & Use Cases

  • Wireframes: Create HTML/SVG-based wireframes to visualize layouts before development.
  • User Flows: Map user journeys with Mermaid or similar diagrams to clarify navigation.
  • Prototype Specification: Produce a detailed interactive prototype guide including page transitions and state definitions.
  • Output Artifacts: Provide design-system documentation and basic UI guidelines to support frontend implementation.

Quick Start

Design and deliver a complete product design package by following the steps described to produce wireframes, flows, and a prototype spec.

Frequently Asked Questions about product-design

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

FAQPage Schema
How do I turn product requirements into wireframes and user flows?▼

To turn requirements into wireframes and user flows, this Skill enforces a structured design process that outputs HTML/SVG wireframes and Mermaid flow diagrams. It translates product initiatives into visual layouts and navigational maps to guide UI/UX development.

What is the best way to document interactive prototype specifications for frontend development?▼

Documenting prototype specifications is best handled by generating a detailed interactive prototype guide that defines page transitions and state definitions. The Skill outputs these specifications alongside design-system references to support frontend implementation.

Can I map user journeys and information architecture for a feature redesign without prior design artifacts?▼

Mapping user journeys for a feature redesign requires only your product requirements as input. The Skill produces Mermaid user flow diagrams and structures the information architecture from scratch, making it suitable for new product initiatives and UX optimizations.

Does this Skill include design-system documentation and UI guidelines for handoff?▼

Design-system documentation and basic UI guidelines are included as output artifacts. The Skill delivers these references alongside wireframes and prototype specifications to align UX with business goals and accelerate frontend delivery.

When should I use a structured product design workflow instead of jumping straight into UI development?▼

A structured product design workflow is needed when visualizing layouts, clarifying navigation, or aligning UX with business goals before development. Use this approach for new product initiatives, feature redesigns, and UX optimizations to produce concrete design artifacts.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
pillippillip
11

uiux

Generates UI/UX design system, wireframes, and HTML prototype from kickoff outputs.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

mermaid-builder

Generate syntactically valid Mermaid diagrams for flowcharts, sequence, class, state, Gantt, ER, and data lineage.

Official
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate