Claude Code for
UX Designers
Learn to use Claude Code as your design copilot. From capturing Figma designs to building functional prototypes with Andes, all from the terminal.
From Figma to Code
Capture any Figma design and turn it into a functional prototype in minutes, not hours.
Your Andes Library
Access components and tokens from MELI's design system directly from your prompt.
Rapid Iteration
Modify, test, and refine prototypes with natural language. No coding skills required.
What is Claude Code
Claude Code is an AI agent that lives in your terminal. Unlike ChatGPT or Claude web, it's not just a chat: it has direct access to your files, can run commands, use Git, open the browser, and connect to external tools like Figma.
Think of it as a coworker sitting right next to you who can touch your computer: they read your files, write code, run commands, and show you the results. You tell them what you want and they do it.
How is it different?
- Can only chat - You copy and paste code - Doesn't know your files - Can't execute anything - Starts from scratch every time
- Reads and edits your files - Runs real commands - Uses Git, npm, etc. - Connects to Figma, Andes - Knows your project context
How does it work?
You open the terminal, type
claude and start
talking to it in plain English. Claude analyzes your project, uses
tools as needed, and shows you the
result.
Setup & Configuration
Everything you need to get started with Claude Code. Follow the steps in order.
2a Installation and first use
First, install Claude Code with this command:
curl -fsSL https://claude.ai/install.sh | bashThen, navigate to your project folder and start Claude:
cd ~/my-ux-project
claudeThe first time it will ask you to authenticate with your Anthropic account. Follow the on-screen instructions — it's a quick process through the browser.
2b CLAUDE.md — Your instructions file
The
CLAUDE.md file is
like a personal instruction manual
for Claude. You place it in the root of your
project and Claude reads it every time
it starts. There you define your context,
preferences, and rules.
There are three levels:
-
Project (
./CLAUDE.md): instructions specific to this project -
User (
~/.claude/CLAUDE.md): your global preferences -
Folders (
./src/CLAUDE.md): instructions for a specific folder
Example CLAUDE.md for a UX Designer at MELI
# UX Project — Mercado Libre
## Role
I'm a UX/Product designer at Mercado Libre. I'm not a developer.
Explain things to me in simple terms.
## Prototype stack
- HTML + CSS + JS vanilla (standalone files)
- Use Andes components (our design system)
- Prototypes go in the /prototypes folder
## Design System: Andes
- Always check the Andes UI Library MCP before building
- Use design tokens (colors, typography, spacing)
- Prefer existing components over inventing new ones
## Figma
- When working with Figma, remember: node-id uses X:Y format (not X-Y)
- If a call fails with nodeId, retry without it
## Preferences
- Language: English
- When generating HTML, make it self-contained (a single file)
- Open prototypes in the browser automatically
- Explain what you did after each change2c MCP Servers Configuration
MCP Servers (Model
Context Protocol) are plugins that give
Claude superpowers. They are configured in the
.mcp.json file in the
project root.
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "your-figma-api-key"
}
},
"andes-ui-library": {
"command": "npx",
"args": ["-y", "@anthropic-ai/andes-mcp"],
"env": {}
},
"playwright": {
"command": "npx",
"args": ["@anthropic-ai/mcp-server-playwright"]
}
}
}2d Permissions and basic security
Claude Code asks for permission before performing actions. There are three levels:
- Read files: always allowed
- Write/edit files: asks for confirmation
- Run commands (bash): asks for confirmation
You can configure what is allowed automatically and what isn't. For UX prototypes, you generally want to allow it to write HTML/CSS/JS files and open the browser.
# View current permissions
claude config list
# Automatically allow file writing
claude config set autoApprove "write"Core Concepts
Before diving into the recipes, let's understand how Claude Code thinks and works.
Plan Mode vs Execution
Claude Code has two main modes:
- Plan Mode (Shift+Tab): Claude investigates, reads files, and proposes a plan before doing anything. Ideal for complex tasks or when you're not sure what you want.
- Direct execution: Claude directly reads, writes, and executes. Use it when you know exactly what you want.
- It's a new, large prototype - You don't know where to start - You want to see options first - You're exploring your design system
- It's a specific change - You want to add a component - You need to fix something quickly - You know exactly what to ask for
Shift+Tab
to toggle between Plan Mode and
Execution within Claude Code.
Tools that Claude uses
Claude Code has built-in tools that it uses automatically as needed. You don't have to call them yourself — just describe what you want.
| Tool | What it does | Usage example |
|---|---|---|
| Read | Reads files from your project |
Read the index.html
file
|
| Write | Creates or overwrites files |
Create a new
prototype
|
| Edit | Modifies parts of a file |
Change the button
color
|
| Bash | Runs commands in the terminal |
Open the HTML in the
browser
|
| Glob/Grep | Searches files and content |
Find all the
prototypes
|
| MCPs | External tools (Figma, Andes...) |
Look at the design in
Figma
|
How to communicate with Claude
The quality of what you get depends directly on how you ask for things. Here are some principles:
"Make me a page"
"Create an HTML prototype of the MercadoLibre checkout flow. Use Andes components. Include: cart, shipping details, and purchase confirmation. Open it in the browser when you're done."
"Make it pretty"
"Change the background to #EEEEEE, make the primary button larger (48px tall), and add 24px of spacing between sections."
Context window
Claude has a "context window" — the amount of information it can keep in mind at the same time. Think of it as working memory.
-
/compact— Compresses the current conversation to free up space. Use it when you've been working for a while and feel that Claude is starting to get confused. -
/clear— Clears the entire conversation and you start from scratch. Useful when you switch tasks completely.
/compact. If
you switch projects, use
/clear.
MCP Integrations
MCPs are Claude Code's superpower. Each one gives it access to an external tool. Explore each integration in the tabs.
Figma MCP
Connects Claude Code to Figma bidirectionally: you can read designs, capture screenshots, get metadata — and now also create designs directly in Figma and generate FigJam diagrams.
Read & analyze
| Action | Example prompt |
|---|---|
| Get screenshot |
Capture the design from
this Figma URL: [url]
|
| View metadata |
Get the metadata of the
component in Figma:
[url]
|
| Design context |
Analyze the design
context of this screen:
[url]
|
| Variables |
Show me the design
variables from this file:
[url]
|
Create & generate
| Action | Example prompt |
|---|---|
| Create design in Figma |
Create a login screen in Figma
with email, password, and
sign-in button. Use this file:
[url]
|
| Create FigJam diagram |
Generate a checkout process
flowchart in FigJam:
[url]
|
| Read FigJam diagram |
Read the FigJam diagram and
explain the flow it shows:
[url]
|
Code Connect & handoff
Tools for connecting Figma components with your project's code, making the design-to-development handoff easier.
| Action | Example prompt |
|---|---|
| View existing mappings |
Show the Code Connect mappings
between Figma and the codebase:
[url]
|
| Detect suggested mappings |
Analyze the Figma components
and suggest mappings with the
project code: [url]
|
| Add mapping |
Connect the Figma Button
component to the AndesButton
code component: [url]
|
| Confirm mappings |
Confirm and send the Code
Connect mappings we
reviewed
|
Utilities
| Action | Example prompt |
|---|---|
| Generate design system rules |
Generate a rules file for the
design system based on Figma:
[url]
|
| Check connected user |
Which Figma account are you
connected to?
|
node-id=X-Y (with a
hyphen), but the API needs
X:Y (with a
colon). Claude handles this conversion
automatically if you set up your
CLAUDE.md correctly. If a call fails with nodeId, it
retries without it (which creates a new page).
Andes UI Library MCP
Direct access to Mercado Libre's design system. You can look up components, view their props, and build interfaces using the official tokens.
What can you do?
- Look up available components and their variants
- View props, color tokens, typography, and spacing
- Get usage examples for each component
- Generate code that respects the design system
Check the Andes MCP for available form components.
I need inputs, selects, and buttons. Show me the
main props for each one and a usage example.Use Andes tokens to create a product card with:
image, title, price, and an add-to-cart button.
Make sure to use the design system's colors,
typography, and spacing.Playwright MCP
Playwright gives Claude the ability to open a real browser, take screenshots, click on elements, fill out forms, and navigate pages. It's your preview and testing tool.
Use cases for designers
- Live preview: Open your prototype and verify how it looks
- Screenshots: Capture the current state to share
- Flow testing: Simulate clicks and user navigation
- Responsive: Check how it looks at different sizes
Open the prototype.html file in the browser with
Playwright. Take a screenshot at 1440px wide and
another at 375px (mobile). Let me know if you see
any layout issues.Combining MCPs — The full workflow
The real power comes when you combine all three MCPs in an integrated workflow. Here's the ideal design-to-prototype flow:
I need to create a functional prototype. Follow these steps:
1. Capture the Figma design: [design URL]
2. Check Andes for the components we need
3. Build the HTML using Andes tokens and components
4. Open the result in the browser and take a screenshot
5. Show it to me and tell me which Andes components you usedRecipes / Playbooks
Proven step-by-step workflows. Each recipe includes the exact prompts for you to copy and paste.
Create a prototype from Figma
Capture a Figma design and turn it into functional HTML with Andes.
Navigate to your project folder and run
claude.
Look at this Figma design: [URL].
Capture a screenshot and analyze the screen
structure. List the components you identify.Now create a self-contained HTML that reproduces
this design. Check Andes for the right components.
Save it as checkout-prototype.html and open it
in the browser.Ask for specific tweaks: "Make the header smaller", "Change the CTA color", etc.
Component with design system tokens
Build a component that follows Andes tokens to the letter.
Check Andes for the Card component. Tell me
what variants it has, its props, and the design
tokens it uses (colors, typography, spacing,
borders).Create a product card using exactly the tokens
you found in Andes. Include: placeholder image,
title, discounted price, and an add-to-cart
button.Ask it to open the component in the browser and compare it with the original design.
Interactive user flow demo
Build a navigable multi-step prototype with transitions and states.
I need an interactive prototype of the MercadoLibre
purchase flow. It has 4 steps:
1. Cart (product list with quantities)
2. Shipping details (address form)
3. Payment method (selection between options)
4. Confirmation (summary + confirm button)
Each step has a 'Next' and 'Back' button.
Use Andes components. Make it a single self-contained
HTML with smooth transitions between steps.Open the prototype in the browser and simulate the
complete flow: navigate through all 4 steps, fill in
sample data in the forms, and take a screenshot of
each step. Let me know if you find any usability
issues.Ask for changes based on the screenshots: "In step 2, the form looks too cramped. Add more spacing."
Quick A/B variant generation
Generate multiple versions of a component to compare and decide.
Create 3 variants of a hero section for the
MercadoLibre homepage:
Variant A: Hero with large background image and centered CTA
Variant B: Hero split layout (text left, image right)
Variant C: Minimalist hero with just text and search bar
Generate 3 separate HTML files: variant-a.html,
variant-b.html, variant-c.html. Use Andes tokens.Open all 3 variants in the browser, take screenshots
of each one, and do a comparison. Which one do you
think has the best visual hierarchy?Prototypes for usability testing
Build interactive prototypes ready for user testing sessions.
I need a prototype for a user testing session.
The scenario is: 'The user wants to change their
shipping address on MercadoLibre'.
The prototype should:
- Start on the 'My Account' screen
- Have working navigation to 'My Addresses'
- Allow editing an existing address
- Show a change confirmation
- Be as realistic as possible (believable mock data)
Use Andes components. Make it self-contained.Use Playwright to walk through the flow and verify everything works before the session.
"Add a confirmation toast when the address is saved" or "Make the back button go to the previous screen".
Accessibility audit
Review your prototype's accessibility and fix issues automatically.
Run an accessibility audit on the prototype.html
file. Check:
- Color contrast (WCAG AA minimum)
- Alt attributes on images
- Labels on forms
- Keyboard navigation
- Correct ARIA roles
- Heading hierarchy
List the issues found and fix the ones you can
automatically.Ask it to open the prototype and confirm the fixes were applied correctly.
Tips & Best Practices
5 principles of effective prompting
Be specific about the expected outcome
"Make me a form"
"Create a registration form with: name, email, password, password confirmation, and a terms checkbox. Use Andes components. Validate that the email has the correct format and that the passwords match."
Provide project context
Before making your request, share the context:
- "I'm working on the MercadoLibre checkout flow"
- "It's for a user testing session next week"
- "The users are frequent buyers aged 25-45"
This context helps Claude make better decisions about the design and implementation.
Mention the design system explicitly
Always include phrases like:
- "Check Andes before building"
- "Use the design system tokens"
- "Make sure to use Andes components, don't make up your own"
If you don't mention it, Claude may make up its own styles that don't match your design system.
Iterate in small steps
Instead of asking for everything at once, do it in steps:
- First: "Set up the base layout structure"
- Then: "Now add the header with navigation"
- Then: "Add the main form"
- Then: "Add the validations"
This gives you more control and lets you course-correct before moving on.
Ask it to explain what it did
After each task, ask for a summary:
- "Explain what you did and why"
- "Which Andes components did you use?"
- "What design decisions did you make?"
This not only helps you understand the result, it also teaches you about code and the design system. Over time, you'll be able to make more precise requests.
When to use Plan Mode?
Common mistakes and how to avoid them
| Mistake | Solution |
|---|---|
| Not mentioning the design system | Always include "Check/Use Andes" in your prompt |
| Sessions that are too long |
Use
/compact
every ~30 minutes or when you notice
degradation
|
| Not having a CLAUDE.md | Create one with your context — it drastically improves results |
| Prompts that are too vague | Include: what, how, with which tools, and where to save |
| Not verifying the output | Always ask it to open the result in the browser |
| Asking for everything at once | Break it into steps: structure → content → interaction → polish |
Shortcuts and commands cheatsheet
Advanced CLAUDE.md for a UX project
A more complete example for design projects with multiple prototypes:
# Project: MercadoLibre Checkout Redesign
## Project context
We're redesigning the MercadoLibre checkout flow.
The goal is to reduce cart abandonment by 15%.
Target: frequent buyers, mobile-first.
## My role
I'm a UX Designer. I'm not a developer.
Explain things to me in simple, visual terms.
## Project structure
/prototypes/ → Self-contained HTML files
/prototypes/v1/ → First iteration
/prototypes/v2/ → Second iteration
/screenshots/ → Reference captures
/assets/ → Images and resources
## Design rules
- Always check the Andes UI Library MCP before building
- Mobile-first (375px), then desktop (1440px)
- Use Andes tokens for colors, typography, spacing
- Prototypes must be self-contained (1 HTML file)
- Include realistic mock data (local names, local currency prices)
## Flows to prototype
1. Cart → Shipping → Payment → Confirmation
2. Edit shipping address
3. Apply discount coupon
4. Payment error and retry
## When generating prototypes
- Open the result in the browser automatically
- Take a screenshot with Playwright
- Tell me which Andes components you used
- List any design decisions you made
## Figma
- Figma URLs: node-id uses X:Y (not X-Y)
- If a call fails with nodeId, retry without it
## Preferences
- Language: English
- Prefer simple and clear components
- No excessive animations in prototypes
- Accessibility WCAG AA minimum