product-design-index

Routes product design requests to focused skills for research, ideation, prototyping, and audits.

634|124|Updated Feb 10, 2026
One-click install
npx skills add https://github.com/AIDotNet/OpenCowork --skill product-design-index
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: product-design-index
Source: https://github.com/AIDotNet/OpenCowork/tree/main/resources/extensions/product-design/skills/product-design-index
Command: npx skills add https://github.com/AIDotNet/OpenCowork --skill product-design-index

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Product design work spans many distinct workflows—UX research, flow audits, visual ideation, prototyping, and deployment—and choosing the wrong process wastes effort. This Skill acts as a router that interprets a design request and directs it to the correct focused Product Design skill.

Core Features & Use Cases

  • Request Routing: Maps requests like "design this app", "audit this flow", or "share this prototype" to the right focused skill such as $research, $audit, $ideate, $prototype, $url-to-code, $image-to-code, $design-qa, or $share.
  • Design Brief Gate: Enforces a get-context step before ideation or implementation so builds never start from under-specified requirements.
  • Visual Target Enforcement: Blocks scaffolding or coding until the user selects one of three visual options when no URL, screenshot, Figma frame, or mockup is provided.
  • Use Case: A user says "redesign my onboarding flow from this Figma link." The router loads saved user context, confirms the design brief via $get-context, then routes to $prototype and finally $design-qa before handoff.

Quick Start

Ask the agent to design, audit, research, or prototype a product experience, for example: "Audit the checkout flow from these screenshots and then prototype an improved version."

Frequently Asked Questions about product-design-index

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

FAQPage Schema
How do I route a product design request to the right workflow?

Describe your goal in natural language, such as auditing a flow, researching user pain, or building a prototype. The router matches the request to a focused skill like $audit, $research, $ideate, or $prototype and loads it automatically.

How do I turn a Figma frame or screenshot into a working prototype?

Provide the visual source and the router runs $get-context to confirm the brief, then routes to $image-to-code for a faithful, responsive frontend implementation. A $design-qa comparison against the source visual runs before handoff.

Can I build a prototype without providing a URL or screenshot?

No build starts without a visual target. The workflow first confirms a design brief, then generates exactly three visual options through $ideate, and only proceeds to scaffolding after you select one.

What is the difference between the audit and design-qa skills?

The $audit skill handles user-facing reviews of product flows, screens, and journeys with UX and accessibility findings. The $design-qa skill is an internal helper that compares a coded prototype against its source visual before handoff.

Does the router support sharing or deploying prototypes?

Yes, the $share skill deploys a runnable prototype and returns a shareable URL using your preferred target such as @Sites or @Vercel. Saved context is checked first to pick an available deployment target.