Step-by-step workflows from real experts. Each workflow includes prompts, code snippets, and practical tips.
Eliminate design toil by using a single AI prompt to automatically export all component states (e.g., default, error, success) from your codebase into a single Figma file. This keeps design files in sync with the live user experience.
Learn a repeatable process to generate unique, on-brand images in Midjourney. This workflow uses mood boards, style references (SREFs), and personalization codes to create a consistent visual aesthetic without complex prompts.
Use Claude Code, a dictation tool, and a three-pane workspace to turn a natural language idea into a functional Next.js and Tailwind CSS prototype in minutes, bringing design concepts to life.
Leverage Midjourney not for final assets, but as a powerful brainstorming partner to explore visual styles for a brand mascot. This workflow turns AI-generated images into a mood board to guide strategic design conversations.
Turn a static Figma screenshot into a fully interactive, resizable prototype using Cursor. This workflow helps designers test dynamic layouts and improve collaboration with engineers before writing production code.
Transform an ugly, AI-generated UI into a polished, professional design by providing specific feedback to Cursor. This workflow teaches you how to guide the AI using negative feedback, aesthetic direction, real-world examples, and established design theory.
Learn to rapidly prototype complex, interactive components with sound using a single prompt in Cursor. This workflow demonstrates how to automate project setup and generate a fully functional digital piano in moments.
Use Cursor's chat feature to explore and combine diverse visual styles like Brutalism and Y2K. This workflow shows how to generate unique design variations for a webpage by having a creative conversation with AI.
Use the Magic Patterns Chrome Extension to skip the screenshot process and extract UI elements directly from any live website. The tool uses AI to convert raw HTML and CSS into clean, reusable React components in seconds.
Learn to create a custom UI component library in v0 by feeding it screenshots of your product. This ensures all AI-generated prototypes automatically match your brand's visual identity, solving the problem of generic AI designs.
Rapidly convert high-level ideas from stakeholders into a functional, interactive prototype using a combination of AI transcription, prompt refinement with ChatGPT, and a prototyping tool like Lovable.
Transform rough, physical sketches on index cards into high-fidelity digital mockups in minutes. This creative workflow uses your phone's camera, GPT-4 Vision to upscale the design, and Figma to finalize the UI components for a polished, shareable prototype.
Move beyond 'vibe prototyping' by first generating a structured JSON data model with an LLM like Claude. This workflow demonstrates how to create a rich, realistic dataset with real media, which you can then feed into a prototyping tool for a more accurate and flexible UI.
Use Magic Patterns to quickly visualize and explore multiple UI designs for new AI features. This workflow helps you move from an idea to a series of interactive mockups, accelerating collaboration between product and design.
Design and refine a conversational AI by starting with ideal user dialogues in Claude. This workflow takes you from writing sample conversations to generating a fully interactive, LLM-powered prototype with a system prompt.
Turn a Product Requirements Document (PRD) into a clickable, interactive prototype using Cursor. Learn how to generate the initial UI and then use text and screenshot-based prompts to quickly fix bugs and improve the design.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.