Design Prototypes
You're tasked with creating a frontend-only, interactive website or app, that the user can click through and use.
Select the best workflow from the following options to solve the user's request
Golden Rule of Prototyping
- Do not build until you have a visual target and the chosen workflow reaches
$image-to-code or $url-to-code.
- A visual target is an app or website design to build from: a user-provided image, a source URL, or an ImageGen design selected by the user.
- A
$get-context brief is not a visual target.
- After
$get-context, route to $ideate unless the user already provided a concrete visual source.
- If
$ideate creates options, stop and wait for the user to choose one.
- The chosen option becomes the required visual target for
$image-to-code.
Critical Overrides
- Refer to the Plugin router $index before proceeding.
- Follow $critical-overrides.
- Refer to references/existing-codebase-edits.md for best practices on making edits to existing codebases.
User Context
Before starting, load $user-context and run its preflight script when local shell access is available.
Use saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets as grounding material when relevant.
Do not inspect every saved reference. Inspect only what the current task needs.
Setup Is Not Prototype Work
If the user only asks to set up Product Design, do not continue in this skill. Use $user-context.
Workflows
The following workflows support cloning, redesigning, extending, and building products from scratch. Choose the workflow that best matches the user's request, or use the skills as helpers if the request does not match one workflow cleanly.
Always start with $get-context to confirm the design brief before proceeding to the next workflow step. If required details are missing, $get-context asks for them. If the user already supplied the product, visual, and interactivity details, $get-context plays back the brief in your own words. Do not proceed to $ideate, $url-to-code, or $image-to-code until the brief has been played back and either confirmed by the user or already confirmed earlier in the thread.
Clone product
"Recreate {URL}"
Required next steps:
$get-context - confirm the design brief, including the target URL, purpose, source constraints, and interactivity level.$url-to-code - recreate the app or website shown at the URL.
"Recreate {image}"
Required next steps:
$get-context - confirm the design brief, including what the image represents, source constraints, and interactivity level.$image-to-code - recreate the app or website design shown in the image.
New product
"Build me {idea}"
Required next steps:
$get-context - confirm the design brief, including the product idea, user goal, visual direction, source constraints, and interactivity level.$ideate - generate exactly three app or website design options; show them and wait for selection.$image-to-code - only after the user selects an option.
Redesign product
"Redesign this {image}"
Required next steps:
$get-context - confirm the design brief, including the redesign goal, visual direction, source constraints, and interactivity level.$ideate - attach the provided app or website design to ImageGen; generate exactly three redesign options; show them and wait for selection.$image-to-code - only after the user selects an option.
"Redesign this {URL}"
Required next steps:
$get-context - confirm the design brief, including the target URL, redesign goal, source constraints, and interactivity level.$ideate - attach provided app or website screenshot at the URL to ImageGen; generate exactly three redesign options; show them and wait for selection.$image-to-code - only after the user selects an option; use the URL as reference for existing content, structure, and interactions.
"Redesign my app"
Required next steps:
$get-context - confirm the design brief, including the app surface, redesign goal, source constraints, and interactivity level.- Find the app or website in the codebase.
- If there is more than one possible target, ask the user which one to redesign and whether they want to edit it directly or create a fresh prototype.
$ideate - use the existing app or website as the source; generate exactly three redesign options; show them and wait for selection.$image-to-code - only after the user selects an option; refer to references/existing-codebase-edits.md
Extend product
"Add {feature} to this {URL}"
Required next steps:
$get-context - confirm the design brief, including the target URL, feature behavior, source constraints, and interactivity level.$url-to-code - recreate the app or website and add the requested feature.
"Add {feature} to my app"
Required next steps:
$get-context - confirm the design brief, including the app surface, feature behavior, source constraints, and interactivity level.- Find the app or website in the codebase.
- If there is more than one possible target, ask the user which one to extend.
- Implement the requested feature in the existing app or website; refer to references/existing-codebase-edits.md
When the user references a product name without a source URL or image, use the browser skill of choice to get actual screenshots of the product. Only fallback to web search images if the product isn't accessible.
Hard Rules
- Written design direction is not a visual target. Use it as input to
$ideate and ImageGen.
- Do not build from a brief alone.
- For redesigns, use
$ideate to generate exactly three design options, show them, and wait for the user to choose one.
- Do not build a redesign until the user has chosen a design option.
- When a new product has no visual target after
$get-context, use $ideate to generate exactly three design options, show them, and wait for the user to choose one.
- If the user gives feedback, or says they like more than one design, use
$ideate to create a new ImageGen mock with the feedback or combined direction before build.
- Pass the user's written direction and attached design references into
$ideate and ImageGen.
- If the current folder looks like an existing prototype and it is unclear whether to edit it or create a new one, ask the user.
1---2name: product-design-prototype3description: Route coded prototype requests after Product Design get-context has confirmed the design brief. Use for building prototypes from URLs, images, mockups, Figma, existing code, or ideas that need visual exploration before build.4---56# Design Prototypes78You're tasked with creating a frontend-only, interactive website or app, that the user can click through and use.910Select the best workflow from the following options to solve the user's request1112## Golden Rule of Prototyping1314- Do not build until you have a visual target and the chosen workflow reaches `$image-to-code` or `$url-to-code`.15- A visual target is an app or website design to build from: a user-provided image, a source URL, or an ImageGen design selected by the user.16- A `$get-context` brief is not a visual target.17- After `$get-context`, route to `$ideate` unless the user already provided a concrete visual source.18- If `$ideate` creates options, stop and wait for the user to choose one.19- The chosen option becomes the required visual target for `$image-to-code`.2021## Critical Overrides2223- Refer to the Plugin router [$index](../product-design-index/SKILL.md) before proceeding.24- Follow [$critical-overrides](references/critical-overrides.md).25- Refer to [references/existing-codebase-edits.md](references/existing-codebase-edits.md) for best practices on making edits to existing codebases.2627## User Context2829Before starting, load [$user-context](../product-design-user-context/SKILL.md) and run its preflight script when local shell access is available.3031Use saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets as grounding material when relevant.3233Do not inspect every saved reference. Inspect only what the current task needs.3435## Setup Is Not Prototype Work3637If the user only asks to set up Product Design, do not continue in this skill. Use [$user-context](../product-design-user-context/SKILL.md).3839## Workflows4041The following workflows support cloning, redesigning, extending, and building products from scratch. Choose the workflow that best matches the user's request, or use the skills as helpers if the request does not match one workflow cleanly.4243Always start with `$get-context` to confirm the design brief before proceeding to the next workflow step. If required details are missing, `$get-context` asks for them. If the user already supplied the product, visual, and interactivity details, `$get-context` plays back the brief in your own words. Do not proceed to `$ideate`, `$url-to-code`, or `$image-to-code` until the brief has been played back and either confirmed by the user or already confirmed earlier in the thread.4445### Clone product4647"Recreate {URL}"4849Required next steps:5051- `$get-context` - confirm the design brief, including the target URL, purpose, source constraints, and interactivity level.52- `$url-to-code` - recreate the app or website shown at the URL.5354"Recreate {image}"5556Required next steps:5758- `$get-context` - confirm the design brief, including what the image represents, source constraints, and interactivity level.59- `$image-to-code` - recreate the app or website design shown in the image.6061### New product6263"Build me {idea}"6465Required next steps:6667- `$get-context` - confirm the design brief, including the product idea, user goal, visual direction, source constraints, and interactivity level.68- `$ideate` - generate exactly three app or website design options; show them and wait for selection.69- `$image-to-code` - only after the user selects an option.7071### Redesign product7273"Redesign this {image}"7475Required next steps:7677- `$get-context` - confirm the design brief, including the redesign goal, visual direction, source constraints, and interactivity level.78- `$ideate` - attach the provided app or website design to ImageGen; generate exactly three redesign options; show them and wait for selection.79- `$image-to-code` - only after the user selects an option.8081"Redesign this {URL}"8283Required next steps:8485- `$get-context` - confirm the design brief, including the target URL, redesign goal, source constraints, and interactivity level.86- `$ideate` - attach provided app or website screenshot at the URL to ImageGen; generate exactly three redesign options; show them and wait for selection.87- `$image-to-code` - only after the user selects an option; use the URL as reference for existing content, structure, and interactions.8889"Redesign my app"9091Required next steps:9293- `$get-context` - confirm the design brief, including the app surface, redesign goal, source constraints, and interactivity level.94- Find the app or website in the codebase.95- If there is more than one possible target, ask the user which one to redesign and whether they want to edit it directly or create a fresh prototype.96- `$ideate` - use the existing app or website as the source; generate exactly three redesign options; show them and wait for selection.97- `$image-to-code` - only after the user selects an option; refer to [references/existing-codebase-edits.md](references/existing-codebase-edits.md)9899### Extend product100101"Add {feature} to this {URL}"102103Required next steps:104105- `$get-context` - confirm the design brief, including the target URL, feature behavior, source constraints, and interactivity level.106- `$url-to-code` - recreate the app or website and add the requested feature.107108"Add {feature} to my app"109110Required next steps:111112- `$get-context` - confirm the design brief, including the app surface, feature behavior, source constraints, and interactivity level.113- Find the app or website in the codebase.114- If there is more than one possible target, ask the user which one to extend.115- Implement the requested feature in the existing app or website; refer to [references/existing-codebase-edits.md](references/existing-codebase-edits.md)116117When the user references a product name without a source URL or image, use the browser skill of choice to get actual screenshots of the product. Only fallback to web search images if the product isn't accessible.118119## Hard Rules120121- Written design direction is not a visual target. Use it as input to `$ideate` and ImageGen.122- Do not build from a brief alone.123- For redesigns, use `$ideate` to generate exactly three design options, show them, and wait for the user to choose one.124- Do not build a redesign until the user has chosen a design option.125- When a new product has no visual target after `$get-context`, use `$ideate` to generate exactly three design options, show them, and wait for the user to choose one.126- If the user gives feedback, or says they like more than one design, use `$ideate` to create a new ImageGen mock with the feedback or combined direction before build.127- Pass the user's written direction and attached design references into `$ideate` and ImageGen.128- If the current folder looks like an existing prototype and it is unclear whether to edit it or create a new one, ask the user.
aidotnet