Overcome generic AI-generated designs by building a custom prototyping environment. This workflow connects your company's design system to an AI code editor, ensuring all prototypes are on-brand and high-fidelity.
Create a new React application that establishes the basic structure of your product, including the main dashboard chrome, navigation, and routing. This provides a consistent shell for all prototypes.
Incorporate your company's internal design system components (e.g., Stripe's 'Sail') into the React application. This ensures the AI has access to the correct UI elements.
Set up a local or internal server that acts as an API for your design system. This allows the AI code editor to programmatically query for available components and their correct usage.
Develop a bundle of custom rules and instructions for your AI code editor (e.g., Cursor). These rules guide the AI on how and when to use your design system components, what to do if the server is unavailable, and what to avoid.
Example Rule: 'If a user pastes a Figma link, you should check the component server before writing any code.' This prevents the AI from hallucinating a design.To maximize adoption, integrate the entire setup with your company's internal development infrastructure (e.g., 'dev boxes'). The goal is to allow any team member to spin up a fully configured prototyping environment from a single internal URL.
With the environment set up, connect your AI code editor and start generating high-fidelity, on-brand prototypes using natural language prompts. You can now quickly create variations for different data states (e.g., startup vs. enterprise user).
Create a simple app to manage your expensive purchases. This workflow uses AI to automatically scan receipts and product photos, extract key information, and save product manuals, all in one place.
Build and iterate on high-fidelity prototypes directly in your browser. This workflow uses a custom web UI to generate designs from prompts, visually annotate feedback, and automatically implement revisions with AI.
Use an advanced AI model to analyze raw packet sniffer logs and research notes to deduce an unknown, proprietary Bluetooth protocol and create a tool to interact with the hardware.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.