# Vibe coding for designers > Practical paths and tools for designers building with AI. Canonical page: https://aixdesign.kens-toolbox.com/en/learn/vibe-coding ## 1) From idea to prototype Build one key flow first, then decide which real data, authentication and services it needs. - Decide whether you need a design prototype or a runnable app. - Compare tools on the same small task, including editability, code handoff and cost. - Identify any mocked data or behavior in the demo. ## Lovable Useful for visual app iteration with GitHub code handoff; configure data and permissions before launch. [Lovable](https://aixdesign.kens-toolbox.com/en/tools/lovable) ## Bolt Useful for browser-based JavaScript/Node.js apps or Expo prototypes; choose another route for Python/PHP backends. [Bolt](https://aixdesign.kens-toolbox.com/en/tools/bolt-new) ## Uizard Sketch or describe an interface and get an editable UI with a lower barrier for non-technical designers. [Uizard](https://aixdesign.kens-toolbox.com/en/tools/uizard) ## v0 A starting point for Next.js projects or Vercel delivery; add interfaces, data and services incrementally. [v0](https://aixdesign.kens-toolbox.com/en/tools/v0) ## Figma Make Generate interactive prototypes directly inside Figma when you already have design context. [Figma Make](https://aixdesign.kens-toolbox.com/en/tools/figma-make) ## Figma Make Guide Read setup instructions and known limitations before starting. [Figma Make Guide](https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make) ## Lovable Docs Start here for core workflow and common prompt patterns. [Lovable Docs](https://docs.lovable.dev/) ## Prompt template Paste into Lovable, Bolt, or Uizard to generate a clickable prototype quickly. Prompt: "Build a \[page type\] for \[target user\]. The page should include: \[key sections\]. Key actions: \[buttons/forms\]. Must handle these states: loading, error, empty. Preserve the existing visual style and components: \[reference\]. Complete the core flow first and identify any mocked data." [Prompt template](#) ## 2) From Figma to an interactive prototype Start from an existing design and make the flow interactive enough to test and gather feedback. - Preserve existing components and visual standards and inspect generated changes. - Cover the main task, empty states and recovery. ## Figma Make Generate a live interactive prototype from Figma frames through conversation. [Figma Make](https://aixdesign.kens-toolbox.com/en/tools/figma-make) ## Uizard Turn design screenshots into editable mockups; entire HTML/JavaScript project export is not supported. [Uizard](https://aixdesign.kens-toolbox.com/en/tools/uizard) ## Maze Run remote usability tests on prototypes and aggregate completion, time-on-task, and drop-off. [Maze](https://maze.co/) ## Figma Make → Design Official guide to preview-to-layer copying, code editing and publishing. [Figma Make → Design](https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make) ## Figma Prototyping Guide Set up connections, flows, and sharing before handing off to Figma Make or Maze. [Figma Prototyping Guide](https://help.figma.com/hc/en-us/articles/360040315773-Guide-to-prototyping-in-Figma) ## Maze Prototype Testing Use to set up test scripts and capture structured prototype feedback. [Maze Prototype Testing](https://maze.co/guides/prototype-testing/) ## Prompt template Use with Figma Make to generate a testable prototype with explicit state coverage. Prompt: "Here is my Figma design for \[feature\]. Generate an interactive prototype that covers: (1) main happy path, (2) error state, (3) empty state. Make all buttons functional. Flag any design elements you could not implement." [Prompt template](#) ## 3) AI-assisted development Implement features incrementally in the existing project, using coding tools to edit, debug and explain code. - Provide relevant designs, project conventions and expected behavior for a focused task. - Review changes and exercise key actions in the running app. - After publishing, recheck links, persistence and error handling. ## Codex Implement and check changes with project context across desktop, CLI, IDE or cloud. [Codex](https://developers.openai.com/learn/codex) ## Cursor Modify and iterate on code through conversation, ideal for complex multi-file interactions. [Cursor](https://aixdesign.kens-toolbox.com/en/tools/cursor) ## GitHub Copilot Completion, chat and agent workflows in existing projects; cloud tasks can prepare pull requests for review. [GitHub Copilot](https://aixdesign.kens-toolbox.com/en/tools/github-copilot) ## Replit Develop and publish in the browser; republish changes and use a database or storage service for persistent data. [Replit](https://aixdesign.kens-toolbox.com/en/tools/replit) ## Codex learning resources Official learning resources for desktop, CLI, IDE and cloud coding workflows. [Codex learning resources](https://developers.openai.com/learn/codex) ## Claude Code Complex refactoring in CLI/project context when tasks span multiple files and full codebase understanding. [Claude Code](https://aixdesign.kens-toolbox.com/en/tools/claude-code) ## Gemini Multimodal coding assistance when screenshots or design files must be reasoned with code. [Gemini](https://aixdesign.kens-toolbox.com/en/tools/google-gemini) ## Cursor Docs Core workflows and prompt patterns for getting higher quality output from Cursor. [Cursor Docs](https://docs.cursor.com/) ## GitHub Copilot Docs Team setup and common use-case references for Copilot workflows. [GitHub Copilot Docs](https://docs.github.com/en/copilot) ## Prompt template Use with Cursor or Claude Code to get plan, key code, and verification checklist in one pass. Prompt: "I want to build \[feature\] using \[tech stack\]. Existing logic to preserve: \[describe\]. First give an implementation plan. Then generate key code. Finally list test cases and a regression checklist. Flag anything needing manual review for safety or readability." [Prompt template](#) ## 4) Connect and automate Connect repetitive work across tools, starting with a simple path before adding failure handling and retries. - Identify the data each step needs and what it changes. - Prevent duplicate writes and provide stop, retry or manual recovery paths. ## n8n Connect data and services visually, with self-hosting options; check license scope before offering hosted access to clients. [n8n](https://n8n.io/) ## Zapier Connect common SaaS tools for repetitive tasks with defined steps. [Zapier](https://zapier.com/) ## Make Cross-SaaS visual automation, a practical middle ground between Zapier simplicity and n8n flexibility. [Make](https://www.make.com/) ## Dify Build LLM apps, retrieval and agent flows visually; check license conditions for multi-tenant services and rebranding. [Dify](https://dify.ai/) ## LangChain Customize agent logic and tool-call orchestration in code for fine-grained control. [LangChain](https://aixdesign.kens-toolbox.com/en/tools/langchain) ## Replit Quickly define and run agent task flows in a browser IDE. [Replit](https://aixdesign.kens-toolbox.com/en/tools/replit) ## Dify Docs Guide for publishing agent and workflow applications. [Dify Docs](https://docs.dify.ai/) ## Cynefin framework Classify workflow complexity first, then choose deterministic automation or adaptive agent loops. [Cynefin framework](https://untools.co/cynefin-framework/) ## n8n Docs Reference for node configuration, deployment, and monitoring. [n8n Docs](https://docs.n8n.io/) ## Prompt template Use with Claude or n8n AI node to define step scope, risks, and approval needs. Prompt: "I want to automate this workflow: \[trigger and goal\]. Steps involved: \[list\]. For each step specify input, output, failure condition, and whether human approval is required. Output as a step-by-step plan with risk level per step." [Prompt template](#) ## Recommended combinations ## Build a testable prototype Choose one builder for the core task, then test it with target users. [Build a testable prototype](#) ## Test a Figma design Choose a click-through or runnable prototype for the question you need to test. [Test a Figma design](#) ## Build custom functionality Implement and check features in the existing project without switching tools for every step. [Build custom functionality](#) ## Automate repetitive work Start with explicit steps and introduce an agent only where adaptive decisions are needed. [Automate repetitive work](#) ## Related resources - [Design with AI](https://aixdesign.kens-toolbox.com/en/learn/design-with-ai.md): Methods and references for research, ideas, prototypes and design delivery. - [AI product UX](https://aixdesign.kens-toolbox.com/en/learn/design-for-ai.md): Explore trust, transparency and user control in AI products. - [Vibe coding for designers](https://aixdesign.kens-toolbox.com/en/learn/vibe-coding.md): Practical paths and tools for designers building with AI. - [Build your portfolio with AI](https://aixdesign.kens-toolbox.com/en/learn/build-portfolio-with-ai.md): Use AI to frame your projects, develop case studies and publish your work. - [Community field notes](https://aixdesign.kens-toolbox.com/en/learn/community-field-notes.md): Field notes, exercises and resources from our community discussions. - [AI design tools](https://aixdesign.kens-toolbox.com/en/tools.md): Explore AI tools for design, research, visual creation and development. Part of [Ken's Toolbox](https://kens-toolbox.com/). Account and participant data are not included in this public summary.