Claude Code for Designers: The Shortest Workflow from Idea to a Shippable Demo

If you’re a designer (or product builder) who can articulate what “good” looks like, your bottleneck is rarely syntax. It’s usually the missing delivery loop: turn requirements into runnable code, preview quickly, iterate with concrete feedback, and ship.

Claude Code turns “coding” into an interactive process: you provide goals, constraints, and critiques; Claude turns them into files, commands, and working software.

This guide focuses on the shortest path: ship a demo that’s actually usable, then decide how far you want to take it.

Step 1: Install Claude Code

You have two options:

Option A: Install via npm (all platforms)

npm install -g @anthropic-ai/claude-code

This requires Node.js. If you don’t have it yet, install the current LTS release first.

Option B: Download the desktop Mac app

Download the Claude Code Mac app directly from Anthropic. No terminal setup needed — just install and open.

Both options require an Anthropic account. Sign up at console.anthropic.com if you don’t have one yet.

Step 2: Learn the essential terminal commands

You don’t need to become a terminal expert. These six commands cover 90% of what you’ll use:

claude              # Start Claude Code
cd folder-name      # Navigate into a folder
cd ..               # Go back one folder
ls                  # List files in current folder (Mac/Linux)
pwd                 # Show your current location (Mac/Linux)
mkdir folder-name   # Create a new folder

Step 3: Create your first project

mkdir my-portfolio
cd my-portfolio
claude

Treat one folder as one deliverable. It keeps context clean and iteration fast.

The golden rule: always ask for a plan first.

Before writing any code, create a plan.md.
I want a personal portfolio website with:
- A hero section (name, tagline, CTA)
- A Projects section with 4 cards
- An About section (short bio)
- A Contact section with links to Twitter and LinkedIn

plan.md must include:
1) Recommended tech stack (keep it simple by default)
2) File structure
3) Design considerations (typography, spacing, layout)
4) Step-by-step implementation plan (include how to verify each step)

Then do a quick sanity pass:

• Is the stack too heavy? If you can avoid a framework, do it early.
• Is verification executable? You should be able to run a dev server or a local preview command.
• Is the structure clean? Avoid “everything in one file” as soon as you expect iteration.

If you want a minimal stack, say it explicitly:

Update plan.md: use vanilla HTML/CSS (and minimal plain JS if needed). Avoid React/Next.

Step 4: Implement, preview, and iterate

Ask Claude to implement the plan

Implement according to plan.md. Start with HTML structure, then CSS.
After each step, tell me exactly how to preview/verify locally.

Preview locally

For a static site, a tiny local server is often enough:

npx serve

Iterate with concrete feedback

Now use your strongest advantage: clear critique that maps to changes.

Styling feedback:

Make the hero full-height (100vh) and vertically center the content.
Switch the font to Inter (Google Fonts) and adjust line-height for readability.
The project cards feel cramped. Increase spacing between cards to at least 32px.
Add a subtle hover effect (slight scale + shadow), but avoid layout shift.

Responsiveness feedback:

Make it responsive:
- Under 768px, stack project cards in a single column
- Collapse nav into a hamburger menu
- Keep tap targets large enough on mobile

Functionality feedback:

Add smooth scrolling to anchor links.
The contact form should validate email format before allowing submit.

Debugging feedback:

I'm getting this error:
[paste full error output]

Repro steps:
1) ...
2) ...

Find the root cause and fix it.
After fixing, tell me what files changed and what command to run to verify.

For UI discrepancies, screenshots are usually faster than prose. Paste the screenshot and ask for a point-by-point fix.

Step 5: Commit to GitHub

Once you’re happy with the result, put it under version control.

Create a GitHub account and repository

1. Sign up for GitHub if you don’t have an account.
2. Click New repository.
3. Name it (e.g., my-portfolio), keep it public or private, and click Create repository.

Connect and push your code

git init
git add .
git commit -m "Initial commit"
git remote add origin <your-github-repo-url>
git push -u origin main

Create a README.md

Ask Claude to generate one:

Create a README.md for this project. Include:
- Project name and one-line description
- Tech stack used
- How to run locally
- Screenshot placeholder

Create a claude.md

A claude.md file tells Claude Code about your project’s conventions whenever it opens the folder. This is especially useful when you return to the project later:

Create a claude.md with:
- Project overview (what this site does)
- Tech stack and file structure
- Design conventions (colors, fonts, spacing)
- Any constraints (no frameworks, vanilla only, etc.)

Step 6: Deploy to Vercel

Option 1: Vercel dashboard (recommended for first deploy)

1. Open the Vercel dashboard and sign in with your GitHub account.
2. Click Import Project → select your GitHub repository.
3. Click Deploy.
4. In about 30 seconds, you’ll get a live URL like my-portfolio-abc123.vercel.app.

Every future git push will automatically redeploy.

Option 2: Deploy through Claude Code

If you prefer staying in the terminal:

Deploy this project to Vercel.

Claude will walk you through the Vercel CLI setup and deployment.

Step 7: Set up a custom domain

Once deployed, you can connect your own domain:

1. In Vercel, go to Settings → Domains → Add domain.
2. Enter your domain name (e.g., myportfolio.com).
3. Add the following DNS records at your domain registrar:

4. Wait 5–30 minutes for DNS propagation.
5. Vercel will automatically provision an SSL certificate.

Step 8: Build beyond static — users, data, and AI

The usual next step is: authentication, a database-backed feature (comments, messages, saved preferences), and an AI chat widget.

Two rules prevent most mistakes:

1. Keep keys server-side: never ship API keys in front-end code.
2. Treat configuration as a first-class artifact: .env locally, platform secrets in production, never committed.

When you ask Claude to help, put safety and verification into the plan stage:

I want to upgrade this site into a web app:
- Google sign-in authentication
- A comments/messages feature
- An AI chat widget

Write an architecture.md including:
1) Services needed (auth, database, AI, deployment)
2) Architecture diagram + data flows
3) Security boundaries (keys, permissions, rate limiting)
4) Phased implementation plan with verification for each phase

Add a .env file for local development and make sure it’s excluded:

echo ".env" >> .gitignore

Step 9: Set up Supabase (database + auth)

Supabase gives you a Postgres database, authentication, and edge functions — all with a generous free tier. Here’s how to set it up:

Create a Supabase project

1. Create a Supabase account and open the project dashboard.
2. Click New Project, choose a name and region, set a database password.
3. Wait for the project to spin up (about 1 minute).

Get your API credentials

1. Go to Settings → API.
2. Copy the Project URL and the anon (public) key.
3. Add them to your .env:

SUPABASE_URL=<your-supabase-project-url>
SUPABASE_ANON_KEY=your-anon-key-here

Enable Google sign-in

1. In Supabase, go to Authentication → Providers → Google → Enable.
2. You’ll need a Google OAuth Client ID. To get one:
   • Open Google Cloud Console.
   • Create a project (or use an existing one).
   • Navigate to APIs & Services → Credentials → Create Credentials → OAuth Client ID.
   • Set the application type to Web application.
   • Add your Supabase callback URL as an authorized redirect URI (Supabase shows this in the Google provider settings).
3. Paste the Client ID and Client Secret back into Supabase.

Ask Claude to integrate

Add Google sign-in using Supabase Auth.
Use the credentials from .env (SUPABASE_URL and SUPABASE_ANON_KEY).
Show a login button, and after login, display the user's name and avatar.
Protect the comments section so only logged-in users can post.

Step 10: Add AI features with OpenAI

Get an API key

1. Open your model provider console.
2. Navigate to API Keys → Create new secret key.
3. Copy and save it securely.

Store the key server-side with Supabase Edge Functions

Never put the OpenAI API key in your front-end code. Instead, store it in Supabase:

1. In Supabase, go to Settings → Edge Functions → Add Secret.
2. Name it OPENAI_API_KEY and paste your key.

This way the key stays server-side. Your front end calls a Supabase Edge Function, which calls OpenAI on behalf of the user.

Ask Claude to build it

Add an AI chat widget to the site.
- Use a Supabase Edge Function to call the OpenAI API (GPT-4).
- The OPENAI_API_KEY is stored as a Supabase Edge Function secret.
- The widget should appear as a floating button in the bottom-right corner.
- Chat history should persist during the session.
- Add rate limiting: max 20 messages per user per hour.

Step 11: Connect design tools with MCP

When your “inputs” live in tools like Figma, Notion, or issue trackers, MCP (Model Context Protocol) can connect Claude Code to those sources so it can read the actual context and then change code accordingly.

For example, you can connect FigJam to Claude Code via the Figma MCP server — design in FigJam, then have Claude Code generate the corresponding code without editing files manually.

• MCP servers: /en/docs/claude-code/advanced/mcp-servers/

Start with one or two integrations, validate the payoff, and expand gradually to avoid context overhead.

Quick reference: prompt templates

Keep these prompt patterns handy. They work for most situations:

Planning

Research how to build [X] and create a plan.md with:
- Recommended tech stack (simplest option that works)
- File structure
- Step-by-step implementation plan
- How to verify each step locally

Implementation

Implement this according to plan.md. Start with [component/section].
After each step, tell me exactly how to preview and verify.

Adding features

Add a [feature] that [behavior].
Use [service/API] if needed.
Keep the existing design system consistent.
Update plan.md with the new feature.

Debugging

I'm getting this error:
[paste full error output]

Find and fix the issue.
Tell me what changed and how to verify the fix.

You don’t need to learn to code. You need to learn to direct code. Claude Code turns your design judgment — your eye for spacing, your sense of flow, your understanding of what users need — into a delivery capability.

Start small. Ship something this weekend. Iterate from there.

References

• Claude Code installation: /en/docs/claude-code/getting-started/installation/
• Claude Code best practices: /en/blog/claude-code-best-practices-playbook/
• MCP servers: /en/docs/claude-code/advanced/mcp-servers/
• For database, auth, or external model APIs, consult the official documentation of the provider you choose during implementation.