Product Design

Turn early product ideas, live URLs, and static screenshots into prototypes teams can review, refine, and carry forward.

When to use this plugin

Use Product Design when you want to understand an existing experience, explore a new direction, or create a prototype that people can interact with and review. You can start from a written brief, screenshots, a design image, a live URL, an existing prototype, or product references you have saved for future work, such as product URLs, Figma files, screenshots, codebase paths, or design tokens.

Optional setup

Ask XpertAI:

@Product Design Help me get started

Product Design has a short optional setup flow that helps save useful product context such as product URLs, relevant Figma files, screenshots, codebase paths, Storybook links, tokens, and brand assets.

Already have a task in mind? Skip setup and ask for the workflow you need directly.

Example workflows

Hero workflows are bolded.

| Workflow | Try this | Skill | Result | | --- | --- | --- | --- | | Prototype a new idea | Build a clickable prototype for this product idea | prototype | Three visual directions to choose from, followed by a runnable prototype based on your selection | | Recreate a live surface | Clone this URL into an editable prototype | url-to-code | An editable local prototype grounded in the visible source | | Implement a selected design | Turn this selected mockup into a responsive prototype | image-to-code | A faithful, interactive implementation of the design you selected | | Explore visual directions | Turn this product idea into three visual directions | ideate | Distinct concepts you can compare before choosing what to build | | Redesign an existing screen | Redesign this settings screen and show me three directions before building | prototype | Three grounded redesign options, followed by a prototype only after you choose a direction | | Audit a product flow | Audit this onboarding flow and identify the highest-impact UX and accessibility issues | audit | Screenshot-backed findings tied to the steps in the experience | | Research user friction | Research the biggest UX problems users are reporting for this product | research | A source-grounded view of user pain, severity, confidence, and product opportunities | | Critique a prototype | Critique this prototype and identify the highest-impact design issues | audit | An evidence-grounded UX, design, and accessibility review | | Share a prototype | Share this prototype with the team | share | A working shareable URL after you choose a hosting target |

Tip: Refine a prototype with Annotations

When editing a prototype in the in-app browser, you can use the Annotations tool to point at the exact elements you want to change. Add comments on the UI or adjust CSS values directly, then send the annotations back to XpertAI for fast, focused edits.

Integrations

Product Design can use available tools when they are connected:

| Tool | What it unlocks | | --- | --- | | Browser, Chrome, or Playwright | Capturing and inspecting live product surfaces for audits, cloning, and prototype QA | | Figma or Canva | Carrying prototype work into a reviewable design workspace and using existing design context | | Image generation | Exploring visual alternatives and producing assets for selected directions | | Sites, Vercel, or another available hosting tool | Publishing runnable prototypes after you choose a deployment target |

You can still begin with a written brief, screenshots, image files, URLs, local prototypes, or saved design context when a connected tool is not needed.