Designer Workflow · Vibe-Coding · Design System

From Figma to production —
as a designer.

A real, end-to-end workflow. Design changes go from Figma into code, reviewed on localhost, and deployed to Vercel — no hand-off, no waiting.

01 Access

Connect with GitHub

Before anything else, you need access to the GitHub repository. GitHub is the source of truth for all code — it tracks every change, who made it, and why.

What to do

  1. Create a GitHub account at github.com if you don't have one
  2. Ask the repo owner to add you as a collaborator — Settings → Collaborators
  3. Generate a Personal Access Token — GitHub no longer accepts passwords
    Profile → Settings → Developer Settings → Tokens (classic) → repo scope
  4. Save the token — you'll paste it as your password in the terminal
GitHub Personal Access Tokens page
Settings → Developer Settings → Personal access tokens (classic)
GitHub org switcher
Switch between your personal account and org
02 Setup

Connect Claude to Figma via MCP

MCP (Model Context Protocol) lets Claude read your Figma files directly — components, tokens, styles — so it translates design intent into code without you copy-pasting values.

Steps to connect

  1. Open Claude Desktop → Settings → Developer → Edit Config
  2. Add the Figma MCP entry to your config JSON
  3. Get your Figma API key → Figma → Profile → Settings → Personal access tokens
  4. Restart Claude Desktop — Figma MCP shows as connected in the toolbar
→ Once connected, share a Figma frame URL with Claude and it reads the design directly — colours, spacing, component names, and variables.
Claude Figma connector panel
Claude → Your connectors → Figma → Connect
Figma account connected confirmation
Figma account connected — Claude can now read your design files
03 Local Setup

Clone the repo & set up locally

To make changes, you need a local copy of the code on your machine. Once cloned, Claude Code can read and edit files directly — no manual copy-paste.

Terminal — run once

cd /Users/yourname/Explorations
git clone https://github.com/your-org/your-repo.git
cd your-repo
git config user.name "Your Name"
git config user.email "you@example.com"
python3 -m http.server 3001

Connect Claude Code

  1. Open Claude Code desktop app
  2. Open the project folder — Claude has full read/write access
  3. Claude can run terminal commands, edit files, and preview changes — all from chat
Repo folder structure in Finder
The cloned repo — project structure in Finder
Claude installing packages
Claude installing dependencies
Terminal showing git commands
Terminal — git setup and push
04 Branching

Branch out for every change

A branch is an isolated copy of the code where you make changes safely — without touching the live site or anyone else's work. Like duplicating a Figma file before editing.

→ Why it matters: If something breaks on your branch, main (production) is untouched. Every branch also gets its own Vercel preview URL — share with stakeholders before merging.

Create a branch

git checkout main
git pull origin main
git checkout -b design/your-change-name

Naming convention

  • design/hero-typography — visual change
  • design/colour-tokens — design system update
  • fix/nav-mobile — bug fix
Claude creating a new branch
Claude creating the branch and committing — all from chat
Branch switcher showing design branches
Branch switcher — design-changes, design-changes2 visible alongside dev
05 Vibe-Coding

Feed Figma into Claude & vibe-code

This is the core. Share your Figma design — tokens, component specs, or a full frame — with Claude, describe what you want, and Claude edits the actual code files.

What to share with Claude

  • Figma frame URL — Claude reads layout, spacing, components via MCP
  • Colour tokens — paste the variable list from Figma Variables panel
  • Screenshots — for quick visual changes Claude infers from the image

Example prompts

"Update the hero colour to Primary/500
from this Figma frame: [url]"

"Apply these colour tokens to style.css —
replace all hardcoded hex values"
→ Claude edits style.css and index.html directly. Refresh localhost to see the change instantly.
Claude reading and summarising design tokens
Claude reads the Figma tokens and is ready to apply them to code
Sapiens Design System file fed to Claude
Feeding the Sapiens design system file to Claude
06 Review

Review on localhost

Before anything is committed, review the change at http://localhost:3001. This is your private sandbox — nothing is public yet.

What to check

  • Does it match the Figma design?
  • Does it look right on mobile? Resize to ~375px
  • Any visual regressions elsewhere on the page?
  • Hover, focus, and scroll behaviour still working?

If something's off — tell Claude. Describe it or share a screenshot. Claude iterates until it matches.

Old design before changes
Before — old design on localhost
New design after vibe-coding changes
After — updated design with Sapiens branding on localhost
07 Ship

Commit, push & open a PR

Once happy on localhost, save the change to GitHub and open a Pull Request — a formal proposal to merge your branch into main.

Terminal commands

git add .
git commit -m "Update hero colour to Primary/500"
git push -u origin design/update-hero-colours

Open the PR on GitHub

  1. Go to the repo — yellow banner: "Compare & pull request"
  2. Add Figma link + before/after screenshots in the PR description
  3. Submit — Vercel immediately posts a preview URL as a comment
Claude committing and resolving git identity
Claude staging files, resolving git identity, and committing cleanly
Claude pushing branch successfully to GitHub
Branch pushed — SSH auth verified, PR link ready
08 Review & Deploy

PR review & merge

A reviewer checks the Vercel preview URL, leaves comments if needed, and approves. Merge into main — Vercel deploys automatically.

Review checklist

  • Open the Vercel preview URL from PR comments
  • Compare against the Figma frame linked in the PR
  • Check mobile view on the preview URL
  • Approve → Merge → Delete branch
→ Merging to main triggers a Vercel production deploy. Usually live in 30–60 seconds.
GitHub PR merged with Copilot and peer review
PR reviewed by Copilot + teammate, 6 commits, merged into dev
09 Verify

Verify on the deployed version

Always check the live URL after deploy. Production can behave differently — caching, CDN, environment differences.

Final checks

  • Hard refresh with Cmd+Shift+R to clear cache
  • Check on an actual mobile device, not just a resized browser
  • Confirm the Figma design intent is fully realised
  • Done — loop back to Figma for the next change
→ The full loop — Figma to production — typically takes under 30 minutes for a focused visual change.
Live site on ux-cc-trial.vercel.app
ux-cc-trial.vercel.app — live and verified after merge to main

Figma to production.
No developers were harmed in the making of this.

Watch it live — Demo