Design & Prototyping
Overview
AI design tool selection is entirely dependent on your context: team size, design system maturity, client type, and project scope. A solo consultant on a fixed-bid project has completely different needs than an enterprise design team managing 15 Figma libraries. This section maps tools to contexts honestly, including where each tool falls short and what the real cost is at scale.
AI workflow
12 steps
- 01
Assess Design System Maturity
Audit exercise
Before selecting tools, audit your situation: No design system (use scaffolding tools: v0, Relume, Uizard). Partial system (use Figma AI with existing components). Established system (use Figma governance + token audit with Claude Code). Mismatched tools destroy more time than they save.
- 02
Information Architecture
Relume + Claude
Relume generates sitemaps and wireframe structures from text prompts. Paste the sitemap into Claude: "What navigation patterns are missing? What user journeys are not supported? Where would users most likely get lost?" Relume free tier supports basic sitemap generation.
- 03
Lo-fi Wireframe Scaffolding
v0 / Uizard / Visily
For rapid wireframing without a design system: v0 (Vercel) for React component generation; Uizard for sketch-to-wireframe conversion; Visily for screenshot-to-editable-wireframe. These tools produce starting points, not final designs. Expect to spend 30-40% of the saved time on corrections.
- 04
Designed Prompts for AI UI Generation
Figma Make
The tool does not become a better designer - you give it better design decisions. A lazy prompt ("Create a dashboard for freelancers to track clients, invoices and monthly revenue") produces something technically complete and visually generic. A designed prompt states the user, the priority, and the visual rules: "Create a desktop dashboard for freelance designers managing 5 to 15 active clients. Monthly revenue and overdue invoices are the highest-priority information. Use moderate information density, clear hierarchy, restrained neutral colours with one accent, consistent 8px spacing logic and compact reusable components." Generate the lazy version first, run the Eye Test on it, then write the designed prompt from what failed.
- 05
Design Agent on the Canvas
Figma Design Agent
Figma's native agent (beta from Config 2026) generates and edits designs directly on the canvas: create UI, apply your design system's components and patterns, update flows, and summarise feedback, then hand code work on to Figma Make. Use it for the mechanical parts of hi-fi work - variants, states, applying the system across screens - and keep the hierarchy and layout decisions yourself. Credits apply once it leaves beta.
- 06
Vibe Coding: Prompt-to-App Prototypes
Lovable / Bolt / v0
For a clickable, working prototype in an afternoon without a codebase: describe the product and the first screen, then iterate in conversation. Lovable and Bolt build full-stack apps with hosting; v0 is strongest at React components. Use these to test a flow with real users or align stakeholders on behaviour, not to ship. Expect generic visual output - the designed prompt and the Eye Test apply here too.
- 07
Vibe Coding: Agents in the Real Codebase
Claude Code / ChatGPT Codex / Cursor / Antigravity
When the prototype needs to live in the product's actual code. Claude Code (Anthropic) is an agent that reads the repository, edits files and runs commands from the terminal, desktop app or IDE. ChatGPT Codex (OpenAI) runs coding tasks in the cloud or locally and returns changes for review. Cursor is a code editor with an agent built in, closest to a familiar IDE. Google Antigravity is an agent-first IDE where agents plan and build across the editor, terminal and browser, running Gemini and other models. All four work best when a designer pairs with an engineer: the designer owns intent and visual quality, the engineer owns architecture and review.
- 08
The Vibe Coding Process
Any agent + Git
1. Write a brief before the first prompt - the user, the priority information, the visual rules (spacing scale, type sizes, one accent colour) and the design tokens. 2. Ask for a plan before code and correct it. 3. Build one screen or component at a time in small changes, and review each one. 4. Run the Eye Test and an accessibility check (keyboard, contrast, labels) on every screen. 5. Commit to Git after every change that works, so a bad prompt is one undo, not a lost afternoon. 6. Share a preview link, not a screenshot - behaviour is the point of a coded prototype.
- 09
Hi-fi Design
Figma AI
Figma AI features: component suggestions, auto-layout assistance, design inconsistency detection, and text rewriting. Most useful for teams with established component libraries. Honest assessment: Figma AI saves 20-30 minutes per screen on component placement, not on design thinking.
- 10
Motion and Interaction
Framer
For animated prototypes and micro-interactions: Framer bridges design and a live website with built-in animation, so motion can be felt rather than described. Use for concept demos and stakeholder alignment, not production handoff.
- 11
Design-to-Code Handoff
Locofy / Figma Dev Mode
Locofy converts Figma designs to React, Vue, and HTML/CSS. Figma Dev Mode provides developer-ready annotations. Honest assessment: AI-generated code from design tools typically requires 40-60% developer refinement. It reduces, not eliminates, handoff friction.
- 12
Design System Token Audit
Claude Code / Figr Design
For enterprise teams: Claude Code can audit design token consistency across Figma files via the API. Figr Design manages token systems at scale. Run token audits before any significant new component work to avoid duplication.
Tools
| Tool | Use | Free tier | Client-safe |
|---|---|---|---|
| Figma | Primary design tool, component libraries, prototyping | Free tier available (limited files) | Yes |
| v0 by Vercel | Text-to-component scaffolding for solo designers | Free tier available | Yes |
| Relume | Sitemap and wireframe generation | Free tier (limited exports) | Yes |
| Google Antigravity | Agent-first coding IDE for building working prototypes | Free Individual tier (weekly agent quota) | Yes |
| Framer | Design-to-publish with advanced animation | Free tier available | Yes |
| Uizard | Sketch and screenshot to wireframe conversion | Free tier available | Yes |
| Locofy | Design-to-code for React, Vue, HTML/CSS | Free tier available | Yes |
| Penpot | Open-source Figma alternative, self-hostable | Fully free and open-source | Yes |
| Figma Design Agent | On-canvas AI agent: generate, edit and apply the design system | Beta - credits apply at general availability | Yes |
| Claude Code | Agentic coding in a real repository from terminal, desktop or IDE | Included with Claude Pro and above (not Free) | Yes |
| ChatGPT Codex | Cloud and local coding agent returning reviewable changes | Included with ChatGPT paid plans | Yes |
| Cursor | AI code editor with a built-in agent | Free Hobby tier (limited agent requests) | Yes |
| Lovable | Prompt-to-app full-stack prototypes with hosting | Free tier (5 credits a day) | Yes |
Constraints
7 constraints
- Honest Assessment: v0 and Uizard produce 60-70% quality output that requires significant refinement. They save time on structure, not on design quality.
- Enterprise Warning: No new components should be created without an AI-assisted audit of existing coverage. Component sprawl is the leading design system debt driver.
- Figma free tier limits you to 3 active projects. For client work, a professional plan ($15/editor/month) is effectively required.
- Locofy and design-to-code tools produce code that needs 40-60% developer review. Set accurate expectations with engineering partners.
- AI-generated UI is often technically right and visually wrong: every component is present, but nothing ranks, spacing is arbitrary and colour is everywhere. Run the Eye Test (hierarchy, spacing, type, alignment, density, colour, consistency) on every generated screen before it goes near a stakeholder.
- Vibe-coded is not production-ready. Agent-built prototypes routinely skip authentication, input validation, error states and accessibility. Treat them as working specifications for engineering, and never put client data into one without an engineer reviewing it first.
- Before pointing a coding agent at a client's repository, check the contract and the client's AI policy. Many enterprise clients only allow approved tools, or require enterprise plans where code is not used for training.
Practice
Free browser games that drill one fundamental at a time. Reading about kerning or the pen tool does not build the eye or the hand - repetition does. Fifteen minutes each is enough to feel the difference.
- The Bezier GamePen toolTrace shapes with the pen tool using as few anchor points as possible. Direct, transferable practice for Figma and Illustrator - fewer, better-placed points is the difference between an icon that scales cleanly and one that has to be redrawn.
- The Boolean GameVector operationsBuild target shapes from primitives using union, subtract, intersect, and exclude. The same operations power Figma's boolean groups, so the habit carries straight into icon and logo construction.
Resources
- NNGroup - Prototyping Study Guide
- Figma - Design System Best Practices
- Laws of UX - For design decision making
- Design Systems Handbook - InVision
- Claude Frontend Design Skill - Design system for Claude
- Claude Canvas Design Skill - AI graphic generation
- Claude Brand Guidelines Skill - Keep AI on-brand
- Claude Skill Creator - Build custom AI skills in 5 min
- Banani - AI design tool
- Figma - The Figma Design Agent is here
- Claude Code - Documentation
- OpenAI Codex - Documentation
- Cursor - Documentation
- Lovable - Documentation