---
spec_name: "Claude Toolkit — Implementation Spec for Designers"
spec_version: "1.0"
last_updated: 2026-05-07
target_audience: "Designers, creative directors, and design-led agency owners who want the full Claude product stack wired into their daily workflow"
expected_outcome: "A working Claude stack — account, Code agent, Connectors (Figma + WordPress + Photoshop), nightly QA Routine, pre-launch Security review, and prompt patterns — running end-to-end on your design projects within one afternoon"
ai_tools_supported: [claude_code, google_antigravity, cursor]
based_on: https://mikekwal.com/blog/claude-toolkit/
author: Mike Kwal
---

# Claude Toolkit — Implementation Spec for Designers

## Instructions for the AI

You are helping a designer (or design-led agency owner) set up the full Claude product stack for client work. They live in Figma, WordPress, and Photoshop — not in a terminal. Walk them through each step one at a time.

For every change:
- Confirm the platform (macOS/Windows, Figma plan, WP host, Photoshop version).
- Explain what each step buys them before you act.
- Ask which Claude plan they're on (Pro / Team / Enterprise) before assuming.
- Give prompts they can copy directly.

Goal: by end of an afternoon, the designer has a Claude account, Claude Code pointed at one real project, three Connectors live (Figma + WordPress + Photoshop), a nightly QA Routine running, and a pre-launch Security checklist.

---

## Step 1: Claude.ai account + Desktop app

**What it does:** Desktop is the orchestrator. Connectors, Routines, Security, and Design only fully work from Desktop — not the browser.

1. Sign in at [claude.ai](https://claude.ai). Pro ($20/mo) is the minimum useful tier.
2. Download Claude Desktop from [claude.ai/download](https://claude.ai/download).
3. Sign in on Desktop with the same account.
4. Settings → Profile → set timezone (Routines depend on it).

**Verify:** Desktop opens, chat history matches browser, Settings shows your plan tier.

---

## Step 2: Install Claude Code + link a project

**What it does:** Claude Code reads your whole repo and edits across files. For designers, it's how Figma frames become live WordPress themes or Webflow embeds.

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

(Node 18+. Get Node from [nodejs.org](https://nodejs.org) first if missing.)

```bash
cd /path/to/your/client-project
claude
```

First run opens a browser to auth. Then Claude Code reads the repo.

**Confirm prompt:**
```
Read this project. Tell me in 5 bullets what it is, what stack it's on,
and the most fragile part of the codebase.
```

For WordPress, `cd wp-content/themes/your-theme` first.

---

## Step 3: Turn on the three Connectors that matter

**What it does:** Connectors let Desktop read/write the apps you already use.

### Figma Connector
Desktop → Settings → Connectors → search **Figma** → Connect → authorize.
Test:
```
Open Figma file [URL]. Pull the hero frame. Describe layout, key text,
image placeholders, and color tokens.
```

### WordPress Connector
Connects via the official WP MCP Adapter (xCloud, WP Engine, Kinsta all support it as of May 2026).

1. Settings → Connectors → **WordPress**.
2. Provide site URL + Application Password (WP Admin → Users → Profile → Application Passwords → Generate).

Test: `List my last 10 WP posts. Flag any not updated in 6+ months.`

### Adobe Photoshop Connector
1. In Photoshop: Plugins → Browse → search **Claude** → install → sign in.
2. Desktop → Settings → Connectors → **Photoshop** → Connect.

Test:
```
The hero photo open in Photoshop is too dark on the left. Brighten evenly
without blowing highlights. Export 1600x900 80% JPEG to the same folder.
```

**Verify all three:** in Desktop type `/connectors`. Figma, WordPress, Photoshop should all be green.

---

## Step 4: Nightly QA Routine

**What it does:** Routines are scheduled Claude runs. While you sleep, it checks your live sites.

Desktop → sidebar → **Routines** → Create New. Schedule daily at 11 PM. Paste this prompt:

```
Nightly site QA. For each site below, check:
- [https://client-site-1.com]
- [https://client-site-2.com]
- [https://client-site-3.com]

1. Homepage HTTP 200
2. All hero images return 200
3. Lighthouse mobile score (aim 80+). Flag drops > 10 points vs last run.
4. 404s in top-level nav
5. Contact page has a <form> tag rendered

Output: status emoji per site (✅/⚠️/🚨), one-line summary, details only on 🚨.
If all green, send "All sites clean. Sleep well." to Slack #site-alerts
(or email if Slack not connected).
```

**Verify:** click "Run Now". You get a status report in 2-3 minutes.

---

## Step 5: Pre-launch Claude Security review

**What it does:** Catches the cross-file bugs AI tools introduced earlier in the build, before launch.

**On Pro (free starter prompt — run inside Claude Code in your project root):**

```
Act as a senior security engineer pre-launch. Read the codebase end-to-end. Find:

1. User input hitting DB without sanitization (SQLi, XSS, IDOR)
2. Hardcoded API keys, tokens, credentials
3. Unauthenticated endpoints that should require auth
4. File uploads without type/size validation
5. Third-party scripts over HTTP or untrusted CDNs
6. Forms missing CSRF protection
7. Admin routes reachable unauthenticated

Per issue: severity (Critical/High/Medium/Low), file path, line, fix as a diff,
1-sentence explanation. End with verdict: SHIP / FIX FIRST / DO NOT SHIP.
```

**On Team/Enterprise:** Settings → Security → enable auto-scanning on the connected repo. Runs on every push.

**Verify:** report returns a verdict + at least one finding. If zero findings on a real codebase, re-run with: "Be more aggressive — find what a junior engineer would miss."

---

## Step 6: Designer prompt patterns (the daily workflow)

**What it does:** these are the prompt patterns I (Mike) run on every client design project. Steal them.

**Brief intake** (Desktop + Drive Connector):
```
Pull the brief from Drive at [link]. Extract: positioning, target user,
3 must-have pages, brand voice, and deadlines. Save to project notes.
```

**Figma frame analysis** (Figma Connector):
```
Open Figma file [URL]. List every frame in the Desktop variant.
For each: name, intended page, 3-bullet content description.
```

**Figma to WordPress** (Claude Code):
```
Take the Figma file at [URL] to a custom WordPress theme in this repo.
Scaffold functions.php, header, footer, front-page.php, and page templates
for each frame. Use Tailwind CDN. Stop after scaffolding so I can review.
```

**Bulk hero prep** (Photoshop Connector):
```
Every photo in /raw/: remove background, color-grade to #D1E000 accent,
export 1600x900 .webp to /assets/heroes/. Process all of them.
```

**Pitch mockup** (Claude Design):
```
Three first-draft homepage layouts. Brand colors: [hex]. Voice: [3 adjectives].
Give me the strongest one as Tailwind I can drop into Webflow.
```

Pre-launch → Step 5. Overnight watching → Step 4.

---

## Quick-start prompts (Claude Code / Antigravity / Cursor)

Paste these in order once Steps 1-5 are done.

**Verify the stack:**
```
Confirm: Desktop installed, Claude Code working here, Connectors live for
Figma + WordPress + Photoshop. Health-check each. Report green/broken.
```

**Figma-to-WordPress build:**
```
Open Figma file [URL]. Pull hero, services, contact frames. Build matching
WordPress page templates. Use Figma brand tokens as CSS variables.
Stop before pushing so I can review.
```

**Bulk hero prep:**
```
Every image in /raw-photos/: crop 1600x900, color-grade warm, export .webp
80% quality to /assets/heroes/. List what you exported.
```

**Schedule the QA Routine:** see Step 4 prompt — paste it into Routines.

**Pre-launch security pass:** run the Step 5 prompt in this repo. Output severity-sorted findings and a launch verdict.

---

## Verification checklist

| Check | How to verify |
|---|---|
| Desktop app is installed and signed in | Open Claude Desktop → bottom-left shows your account email |
| Claude Code runs in a project | `cd` into the project, run `claude`, get a project summary |
| Figma Connector live | Desktop chat: "List my recent Figma files" returns real files |
| WordPress Connector live | Desktop chat: "List my last 5 WP posts" returns real posts |
| Photoshop Connector live | Desktop chat: "What's open in Photoshop right now?" returns the active doc |
| Nightly QA Routine scheduled | Routines tab shows it as "Scheduled — next run [time]" |
| Security prompt produces a verdict | Run Step 5 prompt, get SHIP / FIX FIRST / DO NOT SHIP |
| Designer-flow prompts work end-to-end | Run Prompts 2 and 3 above on a real project |

---

## Need help?

Four ways to go deeper:

- **Free** — Join the [Talk-to-Build community](https://www.skool.com/talktobuild). Designers and creative directors wiring Claude into their daily work, weekly office hours, and live build-along sessions when new Anthropic features ship.
- **Done-for-you** — [MK-Way](https://mk-way.com) sets up the full Claude stack inside your studio or agency — Connectors, Routines, Security gates, the whole thing.
- **Quick question** — DM me on [Instagram](https://www.instagram.com/mikekwal). I read every message.
- **B2B / strategy** — Connect on [LinkedIn](https://www.linkedin.com/in/mikekwal/) for deeper conversations about AI in design and agency operations.

---

*This spec is the actionable implementation companion to the Claude Toolkit hub article: [https://mikekwal.com/blog/claude-toolkit](https://mikekwal.com/blog/claude-toolkit/). The hub explains the why; this spec ships the what.*

*Last updated: 2026-05-07*