Product Design

Audit or critique a product flow, journey, workflow, funnel, onboarding path, checkout path, settings path, screen, or multi-step product experience by capturing screenshots first, then reporting UX, design, and accessibility findings from that evidence. Default to an inline report; use a canvas for a visual walkthrough when requested or clearly implied by the ongoing task. Use when the user asks to audit, review, critique, or give feedback on an app or website experience.

audit

Internal prototype QA helper. Use only after a Product Design prototype, URL-to-code build, or image-to-code build has a source visual target and a rendered implementation to compare before handoff. Do not use for broad UX critique, design critique, product audits, or flow reviews; route those user-facing requests to audit.

design-qa

Mandatory design-brief gate for clarifying the product and outcome. Use before ideation, image-to-code builds, redesigns, or product UI work to clarify missing product information and play back the brief before proceeding.

get-context

Generate image-based alternatives, design remixes, or new design directions from a Product Design brief. Use when the user asks for design variants, visual exploration, design remixes, or image-generated approaches from provided context.

ideate

Implement a selected image, screenshot, mockup, or Image Gen reference as a faithful, responsive frontend.

image-to-code

Use when Product Design is explicitly invoked, or when the user's main goal is to explore a design, research UX, audit or critique a UX, product or web design, faithfully clone a visual design of a website or app into code, check a built design, or share a prototype. Do not use Product Design for ordinary implementation unless the user explicitly asks for it.

index

Run fast, source-grounded UX research on the highest-signal problems users are experiencing with a user-specified digital product. Use when the user asks to research user pain, UX friction, onboarding issues, docs/help problems, developer experience friction, support pain, product workflow issues, or current user complaints for a named product.

research

Share a runnable prototype using the user's preferred deployment tool.

share

Clone a live URL as a runnable frontend-only local app.

url-to-code

Load or manage Product Design's saved user context. Use when the user asks to set up Product Design, get started, onboard, save product or design sources, see what Product Design remembers, update saved context, or remember Product Design preferences. Examples include product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, and general product/design notes.

user-context