Wire Claude into the rest of your toolkit.

How Claude fits with everything else

Claude is unusually strong at three jobs: orchestration (deciding what should happen next), translation (turning one format into another), and judgment (saying whether a result is good). Other tools are better at single specialized jobs. The most powerful setups put Claude in the middle and let it call out to specialists.

Google Stitch

Google Labs' AI design tool. Type a description ("calm editorial homepage for a hot springs spa, three-screen flow"), get a polished multi-screen UI you can drop straight into Figma. Strong at exploring direction; weak at production code on its own.

The pairing

Stitch generates the look. Claude codes it. Stitch is fastest at "what should this even look like?" Claude is fastest at "now build it production-quality." Together you collapse a week of design + dev into an afternoon.

Steps

1. Open Stitch at stitch.withgoogle.com and sign in with Google.
2. Describe the UI in one paragraph — purpose, audience, mood, brand color. Generate.
3. Iterate visually inside Stitch until you have a direction you like. Stitch is fast at exploring; lean into that.
4. Export each screen as PNG (or push to Figma if you prefer a vector hand-off).
5. Open Claude.ai, drop the PNGs in, paste your tokens (colors, fonts, spacing), and ask: "build this in HTML using my tokens. Self-contained, no frameworks." Or: "build this as React + Tailwind."
6. Iterate with Claude — alignment, spacing, mobile, the small things Stitch doesn't sweat.
7. Deploy. Push the result to your host of choice.

Figma

The industry-standard design canvas. Two ways to integrate: the simple one (export PNG, paste into Claude) and the full one (a Figma MCP server that lets Claude read your file directly).

The simple way — PNG hand-off

1. In Figma: select a frame, right-click → Copy/Paste as → Copy as PNG.
2. In Claude.ai or Claude Code: paste. Claude reads the image.
3. State the goal: "Build this in HTML/Tailwind. Use my tokens at <path>."
4. Iterate as in any design recipe.

The full way — Figma MCP

An MCP server that gives Claude direct access to your Figma files. Claude can read frames, components, and styles, and produce code that respects them.

1. Install a Figma MCP server. Anthropic's MCP registry and the community both publish them; pick one that matches your account type.
2. Generate a Figma personal access token (Figma settings → account → access tokens).
3. Add the server to Claude Code: claude mcp add figma and follow prompts; paste the token when asked.
4. Restart Claude Code. The Figma tools appear.
5. Reference frames by URL in chat: "Build the layout from <figma-url> in HTML." Claude reads it directly.

Vercel v0

Generates polished React + Tailwind + shadcn/ui components from a prompt. Excellent for component-shaped work; produces code that fits modern React stacks out of the box.

The pairing

v0 produces the component, Claude weaves it in. v0 makes a self-contained piece. Claude adapts it to your tokens, your file structure, and the rest of the page.

Steps

1. Open v0.dev, sign in with Vercel.
2. Describe the component — "A pricing table with three tiers, feature compare rows, recommended badge on tier 2."
3. Iterate in v0 until the component feels right.
4. Copy the code from v0.
5. In Claude Code (in your repo): paste it and say "integrate this into <path>. Match our existing tokens. Replace the inline shadcn imports with our local ones." Claude does the weaving.

Cursor, VS Code, JetBrains

All three speak Claude. Cursor is Claude-native. VS Code and JetBrains add Claude through the official plugin or extensions like Claude Code's IDE companion.

What you get in an IDE

• Edit-and-preview loops — Claude edits a file, the dev server hot-reloads, you see the result instantly.
• Repo-wide context — the editor and Claude share the same view of your code.
• Inline edits — highlight a block, ask for a change, accept the diff.

Steps — VS Code with Claude Code

1. Install Claude Code first — see /newby.
2. Install the Claude Code extension from the VS Code marketplace.
3. Open a project, open the Claude panel, sign in.
4. Use it in two modes: the side panel for conversation, or inline diffs (highlight + Cmd-K equivalent) for surgical edits.

Cursor specifics

Cursor ships with Claude as a first-class option. Pick Claude in the model picker and it works the same way — chat panel + inline edits + repo context — with Cursor's own UX flourishes.

MCP — Workspace servers

Connect Claude to the tools you already use for work. Each server is a small program that runs locally (or on a remote host) and exposes a set of tools to any MCP client. Claude Code, Claude desktop, and any custom app can use them.

Steps — add the Drive MCP server

1. Open Claude Code, run claude mcp add drive (or follow the README of the server you picked).
2. Authenticate. A browser tab opens for Google OAuth. Approve the scopes you actually need; deny the rest.
3. Restart Claude Code. The Drive tools appear in the tool list.
4. Use them in plain English. "Find the BBQ catering quote in my Drive from March 2026 and summarize the pricing."

MCP — Developer servers

A grab-bag of servers that turn Claude Code into a more capable shop. Add only what you need; each one expands the surface (and risk) Claude can act on.

• Filesystem — scoped read/write outside the project directory.
• Brave Search — web search through the Brave API.
• Puppeteer / Playwright — browser automation. Claude drives a real Chrome.
• SQLite / Postgres / MySQL — direct database queries.
• Redis — read/write a cache.
• Sentry — fetch errors and issues.
• Linear / Jira — read tickets, file new ones, update status.
• Stripe — read customers, charges, subscriptions (read-only by default; never grant write keys to a chat tool).

Building your own

If you have an internal API, wrapping it as MCP gives you instant Claude support. The official SDKs (Python, TypeScript, Go) handle the protocol; you just describe your tools and implement them.

1. Pick the SDK for your language. Start from the Anthropic MCP quickstart.
2. Define your tools with names, descriptions, and JSON schemas — the same shape Tool Use uses.
3. Implement each tool as a function in your code.
4. Run the server. Add it to Claude Code with claude mcp add <path>.
5. Use it. Claude calls your tools when relevant.

GitHub Actions

Run Claude as part of your CI/CD pipeline. Code review on every PR, security scans, automated documentation updates, scheduled cleanups.

Common patterns

• PR review on open — Claude reviews the diff and posts findings as a PR comment.
• Security scan on commit — Claude scans the diff for obvious vulnerabilities (alongside, not replacing, dedicated tools like CodeQL).
• Doc sync — when an API file changes, Claude updates the corresponding doc.
• Scheduled cleanup — once a week, Claude scans the repo for dead feature flags and opens cleanup PRs.

Steps — minimal PR-review workflow

1. Add ANTHROPIC_API_KEY as a repo secret.
2. Create .github/workflows/claude-review.yml.
3. Trigger on pull_request; check out the PR; install the Anthropic SDK; run a small script that reads the diff and posts comments.
4. Scope the model: Sonnet for review (good judgment, decent cost). Use Haiku for high-volume linter-style checks.

name: Claude Review
on: [pull_request]
jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pip install anthropic
      - run: python .github/scripts/review.py
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

n8n & Zapier

Workflow automation hubs. Both have Claude/Anthropic nodes built in. n8n is open source and self-hostable. Zapier is hosted-only but has the broadest catalog of integrations.

When to reach for these

• You need to chain Claude with five SaaS tools (Airtable, Notion, Mailchimp, Stripe, Webflow) and writing the integration code yourself isn't worth it.
• The trigger is event-shaped — "new row in Airtable", "new email matching X", "form submission".
• The output is multi-target — write to a database AND post in Slack AND send an email.

Steps — a Claude node in n8n

1. Self-host n8n (Docker one-liner) or use n8n Cloud.
2. Add your Anthropic API key in Credentials.
3. Build the workflow: trigger node → data shaping → Claude (Anthropic) node with your prompt → output nodes.
4. Use the JSON-shaped output mode on the Claude node so downstream nodes can parse fields cleanly.

Scheduling & cron

Three places to schedule recurring Claude work. Pick by where the state lives.

Steps — your first /schedule

1. In Claude Code, type /schedule.
2. Describe the recurring task: "Every Monday at 9am, scan the repo for new TODOs added in the past week and post a summary in Slack."
3. Pick a cadence — Claude proposes one; tweak if needed.
4. Approve. Claude registers the routine.
5. Manage with /schedule list, /schedule run <id>, /schedule delete <id>.

Cloudflare Tunnel

Expose a Claude-powered service from a machine in your house — your Mac mini, a Beelink, a wall-mounted PCG35 — to the public internet without opening a firewall port. Cloudflare handles TLS, the public DNS, and the front door.

Why bother

• Self-host Claude-driven dashboards or APIs at claude.yourdomain.com.
• Keep the workload on hardware you own — no cloud bill, easy access to local files.
• Hide your home IP. Cloudflare proxies all traffic.

Steps

1. Install cloudflared on the host machine. Cloudflare's docs have one-liners for every OS.
2. Log in: cloudflared tunnel login. Pick the Cloudflare zone (the domain you'll use).
3. Create a tunnel: cloudflared tunnel create <name>. It writes a credentials JSON to your config dir.
4. Map a hostname: cloudflared tunnel route dns <name> claude.yourdomain.com. Cloudflare writes the DNS for you.
5. Run a config file that maps the public hostname to a local port (your dev server, your custom Claude app, an API). Start the tunnel.
6. Optional: install as a service so it runs on boot. cloudflared service install on most platforms.

Three end-to-end chains

Concrete examples of stitching multiple tools together. Each is small enough to build in an afternoon.