<aside> 💻

A practical guide for designers who want to use Claude Code — no coding experience needed. Follow the steps, use the prompts, and let Claude do the rest.

</aside>

⚡️ Before You Start

You only need to set up 3 things before jumping in:

1. Download **Claude Code** (Mac app);
2. Create a free GitHub account;
3. Create a free Vercel account.

<aside> 💡

When you open Claude Code for the first time, it will guide you through the setup automatically. Just follow along.

</aside>

<aside> 🙋

Don't overthink the prompts. There's no wrong way to ask. If you're not sure what to say, just describe what you want in plain language, like you would to a colleague. Claude will ask follow-up questions if it needs more detail, guide you through anything confusing, and course-correct if something goes sideways.

</aside>

🗺️ How a Project Works

This is the full journey → from idea to live link.

• 1. Start a new project
• 2. Claude builds it on your Mac
• 3. Iterate until it looks right
• 4. Connect GitHub
• 5. Connect Vercel
• 6. Go live 🚀

🔌 Figma Connection

Connecting Figma lets Claude read your design files directly — frames, components, colors, spacing, comments.

There are a couple of options:

Official Figma MCP

The standard connection and it seems faster as well. Lets Claude read your files and design data.

• [ ] Go to Figma → Settings → Security → Personal Access Tokens → Generate new token
• [ ] Copy the token
• [ ] Ask Claude to connect it:

Help me connect my Figma account using the official Figma MCP.
My token is: [paste token]

Figma Console MCP by Southleft

Claude can read and write to Figma — creating components, frames, and variables directly inside your file.

→ github.com/southleft/figma-console-mcp

• [ ] Go to Figma → Settings → Security → Personal Access Tokens → Generate new token (needs read + write)
• [ ] Copy the token
• [ ] Ask Claude to set it up:

Help me set up the Southleft Figma Console MCP (link).
My Figma token is: [paste token]
Guide me through the full setup including the Figma Desktop plugin.

• [ ] Once done, test it:

Create a simple frame in Figma with a blue background and a centred heading that says "Hello".

If it appears in Figma — you're connected. ✅

<aside> 💡

What's the difference? Option A lets Claude read your designs. Option B lets Claude read and write — pushing changes directly into Figma.

</aside>

Others

Follow the same process as the MCP from Southleft and let Claude handle the rest.