Claude Prototyping Guide for Designers
Prototyping with Claude for Designers
Practical guide to building prototypes with Claude Code + Cursor for designers
Adapted for the Mattermost Design team
This guide walks designers through setting up an AI-assisted prototyping workflow using Claude Code and/or Cursor. The goal: go from idea to a working, shareable URL in under an hour — no engineering required.
What's inside
This guide is organized into the following sections:
- Prerequisites — Before You Start
- 1. Why We're Going Deeper Than Figma
- 2. Mental Models Before We Start
- 3. Getting Comfortable with Terminal
- 4. Setting Up Your Environment
- 5. Building Your First Prototype with Claude Code
- 6. Cursor as Your IDE
- 7. Connecting Claude Code to Figma
- 8. Prompting Patterns for Designers
- 9. When Things Break
- 10. Your First Week
- 11. Using AI Tools Efficiently — Credits and Model Selection
Who this is for
Designers who are comfortable in Figma and want to extend their prototyping capabilities into code — without becoming engineers. You don't need to understand every line of code. You need to get comfortable with a few new tools and a new mental model.
Navigate to the child pages below for each section of the guide.