AI Product Design Assistant

Problem it solves

Product prototypes often get stuck between a rough idea and a demo-ready artifact. Requirements may be one sentence, metrics are verbal, visual style is inconsistent, and frontend work slows down iteration. The PM owns direction, judgment, and quality, while the AI should execute quickly. Without a shared workflow, output can become scattered, metric logic can drift, and the result may not survive a stakeholder demo.

How the skill works

The skill uses a PM-led strategy, AI-led execution workflow for product design, moving from one-line requirements to single-HTML high-fidelity prototypes, data dashboards, and proposal documents. Key steps include:

• Requirement anchoring: capture background, target roles, usage context, and core modules before implementation.
• Strategy foundation: define core metrics, formulas, classification labels, and thresholds before design or code.
• Scaffolding: use a DataStore pattern for data, and build page routes, navigation, one interactive core page, and dark/light themes.
• Incremental iteration: focus on one UI, interaction, or data logic point per round; the PM corrects with text and screenshots while the AI makes precise changes.
• Polish: verify navigation, empty states, charts, dark mode, and a stakeholder demo test so the prototype opens and works immediately.

It also sets AI boundaries: obvious CSS fixes, interaction states, and performance cleanup can proceed, but new modules, core metric changes, data structure changes, and business decisions require PM confirmation.

Boundaries and notes

Use it for product prototypes, dashboards, internal tools, and proposal docs where strategy, design, interaction, and data must be delivered together. It is not intended for pure PRD writing, pure frontend development, or standalone data analysis. Keep PM judgment first, make demo data business-plausible, and avoid emoji icons, generic purple-blue gradients, and missing dark-mode support.