Claude Pro design workflow setup

01

Tool roles

Before touching a single config file, get clear on what each Claude product actually does — and what it doesn't. Overlap is real. Role-clarity is what prevents you from doing the same work in three places.

"One tool, one responsibility. The stack is only as strong as its seams."

Claude Chat

Think / Plan / Write

Your creative partner and system architect. Use this to think out loud, plan design decisions, generate documentation, write copy, and review work before it hits code.

Design system decisions & rationale

Component spec writing

WCAG audits and a11y review

Client communication drafts

Web search + live research

Claude Code (VSCode)

Build / Refactor / Ship

Your pair programmer inside your editor. File-aware, repo-aware, and context-aware. Use this when you're touching actual code — tokens, component files, config, CI scripts.

Build design tokens (CSS/JSON)

Scaffold component files

Refactor & lint across files

Write GitHub Actions YAML

Read and reason over the whole repo

Claude + Style tools

Visual system reference

Use Claude Chat's style features plus your design tool of choice (Figma, Framer) for the visual styleguide. Claude generates HTML/CSS reference pages; your design tool handles the source-of-truth component library.

Generate living HTML styleguides

Color palette documentation

Typography scale reference

Component preview pages

Claude Cowork (Desktop)

Automate / Schedule / Manage

Desktop automation for file-level tasks. Use it to batch-process assets, move files between your Drive desktop sync and your repo, and run scheduled maintenance tasks without manual babysitting.

Batch asset exports from design tools

Sync Drive → repo folders

Scheduled doc generation

File renaming & organization tasks

Important caveat

Claude Cowork and "Claude Design" are in beta or preview. Feature availability may shift. This guide treats Cowork as the desktop automation layer and relies on Claude Chat + Claude Code for the heavy lifting. Verify current feature availability at support.claude.ai before building critical workflows around preview features.

The decision ladder

When you have a task, ask these questions in order:

Question If yes Tool

Am I thinking, planning, or writing docs?

Start here

Claude Chat

Am I touching actual code files?

Open VSCode

Claude Code

Do I need a repeatable file automation?

Set a Cowork task

Claude Cowork

Am I building a visual component reference?

Generate in Chat, commit in Code

Chat → Code

02

Folder structure

Google Drive (desktop sync) is your source of truth for everything that isn't code. Your GitHub repo is your source of truth for everything that is. The two should never drift from each other. Here's how to set them up so they naturally stay in sync.

Setup rule

Create this top-level folder in Google Drive first. Then your GitHub repo mirrors the code/ subfolder exactly. Your Google Drive desktop app keeps code/ in sync with your local machine, which Claude Code reads from.

Sync strategy

Google Drive desktop keeps 05-code/ available at a local path like ~/Google Drive/Design System/05-code/. You open that exact folder in VSCode. Claude Code reads everything inside it. When you push to GitHub, your deploy Action runs. One folder. Two systems. No manual copying.

03

GitHub setup

This gets you from zero to a working repo with Claude Code running inside VSCode, hooked to GitHub, with a deploy action ready to push to your GoDaddy domain.

1

GitHub

Create your repo

Go to github.com and create a new private repository. Name it something clean: design-system. Don't initialize with a README yet — you'll push from local.

2

Terminal

Init from your Drive-synced folder

Open Terminal, navigate to your 05-code/ folder, and run:

cd ~/Google\ Drive/Design\ System/05-code git init git remote add origin https://github.com/YOUR_USERNAME/design-system.git echo "node_modules/" >> .gitignore echo ".DS_Store" >> .gitignore git add . git commit -m "chore: initial design system scaffold" git push -u origin main

Important: Your Drive path may differ depending on how Google Drive desktop names the mount. Check Finder — it usually appears as Google Drive/My Drive/.

3

VSCode

Install Claude Code

Claude Code is a CLI tool — it runs in your terminal and integrates with VSCode. Install it via npm: npm install -g @anthropic-ai/claude-code. Then open your repo folder in VSCode and launch Claude Code from the terminal with claude. There's also a native VSCode extension and a standalone desktop app — all use the same account.

Authenticate: Run claude in your terminal and follow the login prompt. Use your Anthropic account credentials. Claude Code is billed separately from Claude Pro — check your plan at claude.ai/settings.

4

Claude Code

First Claude Code prompt — scaffold tokens

Once connected, start with this prompt to scaffold your 3-tier token system:

Create a design token system at 05-code/tokens/ with: - primitives.json (Tier 1 — raw named values: color, radius, spacing) - semantic.json (Tier 2 — intent aliases referencing primitives) - icons.json (approved Lucide icon manifest) - tokens.css (compiled CSS custom properties from all tiers) - README.md (explains the 3-tier architecture) Use a neutral dark-surface palette as placeholder. Base font: 16px. Spacing: 4px base unit.

5

GitHub Actions

Set up deploy workflow

Ask Claude Code to write your GitHub Actions deploy file. It will create .github/workflows/deploy.yml that runs on push to main, builds your styleguide, and pushes to your GoDaddy server via FTP. You'll need to add your GoDaddy FTP credentials as GitHub repository secrets first.

GitHub secrets to set: Go to your repo → Settings → Secrets → Add: FTP_SERVER, FTP_USERNAME, FTP_PASSWORD. Find these in your GoDaddy hosting dashboard under FTP credentials.

Reference

For full Claude Code documentation: docs.anthropic.com/en/docs/claude-code/overview. The GitHub Actions + GoDaddy FTP pattern used in this guide is standard and well-documented — reference those docs when customizing your deploy steps.

04

Design system

Your design system lives in two places: a visual reference (HTML styleguide in your repo) and a logical foundation (design tokens). Claude Chat generates the decisions; Claude Code writes the files. Here's the order of operations.

Phase 1: Decisions (Claude Chat)

Use Claude Chat to make and document all the system-level decisions before writing a single line of code. This is the thinking work.

A

Chat prompt

Establish brand principles

Tell Claude your brand voice, your target clients, and the feeling your work should communicate. Ask it to propose 3 design principles. Push back until they're actually yours.

B

Chat prompt

Choose your token values

Work through: primary/neutral palette, type scale, spacing system, border-radius, shadow system. Ask for WCAG contrast ratios on every color pair. Document the decisions in your Drive 02-styleguide/ folder.

Phase 2: Build (Claude Code)

Once decisions are locked, switch to VSCode + Claude Code to convert them into files.

C

Code task

Generate token files

Paste your decisions into Claude Code. Ask it to write tokens.json and tokens.css. Ask it to verify contrast ratios in code.

D

Code task

Build the HTML styleguide

Ask Claude Code to generate styleguide/index.html — a living reference page showing all your tokens rendered. This deploys to your domain and becomes your shareable client-facing styleguide.

3-tier token architecture

05-code/tokens/ — three-file architecture primitives.json — Tier 1: raw named values (never consumed by components) { "color": { "purple": { "600": "#534AB7", "400": "#7F77DD", "900": "#26215C" }, "gray": { "50": "#F1EFE8", "600": "#5F5E5A", "900": "#2C2C2A" }, "ink": "#0d0d0d" } } semantic.json — Tier 2: intent aliases (what components reference) { "color-action-primary": "{color.purple.600}", "color-surface-ink": "{color.ink}", "color-text-primary": "{color.gray.900}" } icons.json — approved Lucide icon manifest { "approved": ["arrow-right", "check", "chevron-down", "..."], "categories": { "navigation": [...], "feedback": [...] } } tokens.css — compiled output: all tiers as CSS custom properties

The tier rule

Components reference Tier 2 semantic tokens only — never primitives. Primitive: --color-purple-600: #534AB7. Semantic: --color-action-primary: var(--color-purple-600). Swap a primitive to rebrand without touching a single component.

05

Deploy pipeline

Push to main on GitHub → your styleguide auto-deploys to your GoDaddy domain. No manual FTP uploads. No forgetting to publish. Here's the full flow.

Edit

VSCode + Claude Code

→

Push

git push origin main

→

Build

GitHub Actions runs

→

Deploy

FTP → GoDaddy

→

Live

yourdomain.com

1

GitHub

Add GoDaddy credentials as secrets

In your GitHub repo: Settings → Secrets and variables → Actions → New secret. Add these three:

FTP_SERVER → ftp.yourdomain.com (from GoDaddy dashboard) FTP_USERNAME → your FTP username FTP_PASSWORD → your FTP password

Where to find these: GoDaddy → My Products → Hosting → your plan → FTP / File Manager. If you haven't set an FTP password, create one there first.

2

Claude Code

Generate the GitHub Actions workflow

Ask Claude Code to create .github/workflows/deploy.yml. The workflow runs in two jobs: first a validate step that checks your JSON token files, then FTP deploy steps that mirror each repo folder to GoDaddy. Use a prompt like: "Create a GitHub Actions workflow that validates token JSON files, then deploys each folder to GoDaddy via FTP on push to main. Use SamKirkland/FTP-Deploy-Action. Credentials from GitHub secrets."

# .github/workflows/deploy.yml name: Deploy on: push: branches: [main] jobs: validate: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Validate token files run: | for f in 05-code/tokens/primitives.json 05-code/tokens/semantic.json 05-code/tokens/icons.json; do node -e "JSON.parse(require('fs').readFileSync('$f','utf8')); console.log('valid: $f')" done deploy-ftp: runs-on: ubuntu-latest needs: validate if: github.event_name == 'push' steps: - uses: actions/checkout@v4 - name: Deploy tokens uses: SamKirkland/FTP-Deploy-Action@v4.3.5 with: server: ${{ secrets.FTP_SERVER }} username: ${{ secrets.FTP_USERNAME }} password: ${{ secrets.FTP_PASSWORD }} local-dir: 05-code/tokens/ server-dir: 05-code/tokens/ - name: Deploy styleguide uses: SamKirkland/FTP-Deploy-Action@v4.3.5 with: server: ${{ secrets.FTP_SERVER }} username: ${{ secrets.FTP_USERNAME }} password: ${{ secrets.FTP_PASSWORD }} local-dir: 02-styleguide/ server-dir: 02-styleguide/

3

GoDaddy

Verify the server directory structure

The deploy workflow mirrors your repo structure directly — 02-styleguide/ on your server corresponds to 02-styleguide/ in the repo. Log into GoDaddy → File Manager and confirm the target folders exist (or let the FTP action create them). Your styleguide will live at yourdomain.com/design-system/02-styleguide/.

4

Test

Push and confirm

Make a small change to your styleguide index.html, commit, and push to main. Watch the Actions tab in GitHub. Green check = deployed. Visit your domain path to confirm it's live.

If it fails: Check Actions logs first. 90% of FTP failures are wrong server hostname or wrong server-dir path. Ask Claude Code to debug by pasting the error log directly into the VSCode Claude panel.

06

Master checklist

Tick these off in order. Each phase unlocks the next. Don't skip ahead — the checklist is sequenced so you're never blocked.

Your Claude Prodesign stack,configured.

Tool roles

The decision ladder

Folder structure

GitHub setup

Design system

Phase 1: Decisions (Claude Chat)

Phase 2: Build (Claude Code)

3-tier token architecture

Deploy pipeline

Master checklist

Your Claude Pro
design stack,
configured.