npm package  ·  by Mehul Jatiya  ·  github.com/mehuljatiya/troupe ↗

AI workflows for everyone on the team

One install gives designers, developers, and PMs a shared set of AI-powered tools — from Figma to code, spec to QA.

Open Terminal — ⌘ + Space, type Terminal, hit Enter — then paste:

$ npx @cashfree/troupe@latest setup
MIT License Node 20+ npm v0.1.5 9 slash commands

 ·  What gets installed →

Why terminal?

Claude runs on your machine,
not in a browser tab.

→

It reads your actual project files

A browser tool can't open your codebase. Running locally means Claude sees your components, tokens, and conventions — and writes code that fits.

→

It connects to Figma directly

No copy-pasting. Claude reads your Figma file in real time via the official Figma MCP — variants, tokens, states, everything.

→

Your code never leaves your machine

Nothing is uploaded to a cloud editor. Claude runs in your terminal, writes to your local files, and only the prompts go to Anthropic's API.

Who it's for

Built for the whole team

✦

Designers

From Figma to production

  • Turn Figma designs into working code
  • Document components from a design system
  • Review components for missing states & accessibility
  • Understand design tokens in any project
  • Generate developer handoff specs
  • Create new components through guided conversation
⌥

Developers

Less back-and-forth, faster builds

  • Implement Figma designs without chasing the designer
  • Audit hardcoded values that should be design tokens
  • Write and update component documentation
  • Self-review components before PR
  • QA: compare Figma to built component, flag gaps
◈

Product Managers

From design to ticket in minutes

  • Generate ticket-ready specs from Figma designs
  • QA: compare Figma to what's built, flag gaps
  • Audit components for missing states before shipping
  • Understand the visual language of a product

This is v1 — a starting point. More commands, more workflows, and deeper integrations are on the way.

Slash commands

9 commands, ready to use

Command For What it does
/figma [url]
DesignersDevs
 Takes a Figma URL → reads every variant and state → describes the component in plain language before writing a line of code → inspects your project's stack, existing patterns, and design tokens → builds it following your conventions. Never hardcodes values.
/document-component [url]
DesignersPMs
 Takes a Figma URL → reads the design → generates a full .md + polished .html preview with anatomy, tokens, states, do/don't guidelines, and accessibility tables. Can push the docs back into Figma.
/spec [url]
PMs
 Takes a Figma URL → reads every variant and state → outputs a structured spec you can paste directly into Jira, Linear, or Notion. Covers overview, variants/states table, interactions, edge cases (empty, overflow, error, loading), testable acceptance criteria, open questions, and explicit out-of-scope items.
/qa [url]
PMsDevs
 Takes a Figma URL and a codebase component → reads both → outputs a gap report with severity ratings. Flags visual mismatches (wrong token, wrong value), missing states, missing variants, interaction gaps, and accessibility issues. Also lists what's correct so you know what not to touch.
/new-component
DesignersDevs
 Starts a short conversation — asks what it should do, what it looks like, and what states it needs — before writing anything. Then inspects your existing components to match project patterns, tokens, and file naming conventions. Builds only what was asked, nothing extra.
/document
DesignersDevs
 Works on existing code components (no Figma needed). Writes a designer-friendly .docs.md covering what it is, when to use it, all configuration options in plain language, visual states, and accessibility.
/review
Everyone
 Audits a component across five areas: token consistency (flags hardcoded values), completeness of states (default, hover, focus, disabled, loading, error, empty), responsiveness and touch targets, accessibility (keyboard, contrast, screen reader labels), and edge cases (long text, missing images, no data). Each finding is rated ✓ Good, ⚠ Needs attention, or ✗ Missing.
/tokens
DesignersDevs
 Scans the project for all design tokens — CSS variables, theme files, named values — and produces a designer-friendly reference grouped by color, typography, spacing, shape, and elevation. Then scans for hardcoded values (raw hex, magic px numbers) and lists each one with a suggested token replacement.
/handoff
DesignersPMs
 Generates a precise, build-ready spec from an existing component — exact token names, pixel values, and state-by-state visual diffs. Covers visual specs, all states with what changes in each, mouse/keyboard interactions, responsive behavior at mobile/tablet/desktop, and accessibility requirements. Saved as a .handoff.md next to the component.

Transparency

What gets installed

1
Claude Code CLI Required

Checks if @anthropic-ai/claude-code is already on your machine. If it isn't, asks your permission before installing it globally via npm. If you decline, it gives you the manual command and exits cleanly — nothing is installed without your approval.

→ Installs: npm install -g @anthropic-ai/claude-code
→ Adds the claude binary to your PATH
→ Also adds design — a shortcut that launches Claude from any project folder
2
9 slash commands Required

Copies 9 .md slash-command files into ~/.claude/commands/ — Claude Code's global commands folder. Each file is a natural-language instruction that tells Claude exactly how to run that command. If a file already exists, it is skipped rather than overwritten, so any customisations you've made are preserved.

figma.md document-component.md document.md new-component.md review.md tokens.md handoff.md spec.md qa.md
3
Figma MCP server Optional

Asks if you want to connect Figma. If yes, registers Anthropic's official Figma MCP server so Claude can read your designs directly — no copy-pasting node IDs. Nothing is downloaded; it's a one-line config entry that points Claude at Figma's hosted MCP endpoint. After setup, the first time you type /mcp inside Claude you'll do a one-time OAuth login to connect your Figma account.

→ Runs: claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user
→ Writes a single entry to ~/.claude/claude.json — no other files touched
→ One-time OAuth in Claude: /mcp → figma → Authenticate (you'll only do this once)
4
Chrome DevTools + Figma Friend plugins Required

Installs two Claude plugins that power the browser automation in /document-component — opening an HTML preview in the browser and pushing documentation back into Figma. Both are installed automatically; if either already exists it is skipped.

→ Runs: claude plugin install chrome-devtools-mcp@chrome-devtools-plugins
→ Runs: claude plugin install figma-friend@figma-friend-marketplace
→ Both installed at user scope — available across all your projects
5
Anthropic API key Required

If Claude Code wasn't already installed, the setup points you to console.anthropic.com to get a free API key. Nothing is stored or sent during setup — Claude will ask for the key the first time you run it and save it locally in its own config. If Claude was already installed and configured, this step is skipped entirely.

→ Key is stored by Claude Code itself in ~/.claude/ — not by this package
→ Free tier available at console.anthropic.com
✦

After setup completes

Open Terminal in any project folder and type claude (or design for a cheat sheet of all commands). Claude launches with all 9 workflows ready. Type any slash command — /figma, /spec, /review — and you're running.

Get started

Running in 2 minutes

01

Install

Run npx @cashfree/troupe@latest setup in your terminal. The wizard handles the rest.

02

Launch

Open Terminal in any project folder and type claude. You're in. Optionally type design for a printed cheat sheet of all available commands.

03

Use a command

Type any slash command — /figma, /spec, /review — and paste a Figma URL or describe what you need.

Node.js 20+ Anthropic API key (free to start) Figma account (for Figma commands)