Claude Code Generator

Generate production-ready UI components directly inside VS Code from Figma designs, screenshots, and Functional Specification Documents (FSDs) — powered by the Claude Agent SDK.

Prerequisites

Before using this extension, make sure the following are installed and configured on your machine.

1. Claude CLI (required)

The extension drives the Claude Agent SDK through the Claude CLI binary. You must have it installed and authenticated.

Install:

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

Or download it from claude.ai/code.

Authenticate:

claude auth login

Follow the browser prompt to log in with your Anthropic account. The extension will detect your login status automatically and show an error with an "Open Login Terminal" action if you are not authenticated.

The extension searches for the claude binary in your PATH, common install locations (/usr/local/bin, /opt/homebrew/bin, ~/.local/bin), all nvm-managed Node versions, and the SDK's bundled platform binary — so it works regardless of how you installed it.

2. Figma Personal Access Token (required only for Figma URL input)

If you want to generate from a Figma URL you need a Figma Personal Access Token.

1. Go to Figma → Account Settings → Security → Personal access tokens.
2. Create a token with File content read scope.
3. Paste it into the extension when prompted (stored securely in VS Code's secret storage).

You can skip this entirely if you only use screenshots or FSD documents.

3. An open workspace folder

The extension writes generated files into your project. Open a folder (File → Open Folder…) before generating.

Installation

Install from the VS Code Marketplace:

1. Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
2. Search for Claude Code Generator.
3. Click Install.

Or install the .vsix directly:

code --install-extension claude-code-generator-0.1.2.vsix

Quick Start

1. Open the Claude Code Generator panel from the Activity Bar (look for the Claude icon).
2. Set your Figma token if you plan to use Figma URLs (click Set next to the token status indicator).
3. Fill in one or more inputs:
   • Figma URL — paste a Figma design or frame URL.
   • Screenshots — select PNG/JPG reference images.
   • FSD Documents — select .docx, .pdf, .md, or .txt specification files.
   • Additional instructions — free-text prompt (e.g. "Use react-hook-form, place in src/components/Checkout/").
4. Click Generate Component.

Claude will inspect your project, match its conventions, and write the component and supporting files directly into your workspace.

How It Works

Inputs you provide

If you provide a Figma file URL without a node ID, the extension lists all frames in the file and lets you pick one via a quick-pick menu.

What Claude reads from your workspace

The extension automatically loads the following files and includes them as project context:

Tools available to Claude

Claude is given the following file-system tools so it can inspect your project before writing anything:

Read · Write · Edit · Glob · Grep

It will typically read package.json and a few existing components first to learn your framework, styling library, folder layout, and naming conventions — then generate files that fit the project naturally.

Output

A dedicated Claude Code Generator output channel opens automatically. It streams every text response and tool call (Read, Write, Edit, …) from the agent in real time. You can cancel generation at any time using the notification progress bar.

Extension Settings

Configure via Settings → Extensions → Claude Code Generator or add to settings.json:

{
  "claudeCodeGenerator.model": "claude-sonnet-4-5",
  "claudeCodeGenerator.permissionMode": "acceptEdits"
}

Commands

Supported FSD Formats

Troubleshooting

"Claude CLI not found" Install the Claude CLI with npm install -g @anthropic-ai/claude-code and ensure it is on your PATH. The extension also checks ~/.nvm, /usr/local/bin, /opt/homebrew/bin, and ~/.local/bin.

"Claude is not logged in" Run claude auth login in a terminal, or click Open Login Terminal in the error notification — this opens a terminal with the login command pre-filled.

"Open a folder/workspace first" The extension needs a workspace root to write files into. Use File → Open Folder… to open your project.

Figma token required If you provide a Figma URL without a saved token, the extension will prompt you inline. You can also set or reset the token at any time using the Set / Reset buttons in the panel header.

Generation produces wrong framework/style Add a CLAUDE.md at your project root describing your stack (framework, component library, folder structure, naming conventions). The agent loads it automatically on every run.

Requirements Summary

Release Notes

0.1.2

Initial release.

• Generate components from Figma URLs, screenshots, FSD documents, or free-text prompts.
• Streams agent progress live in the output channel.
• Cancellable generation.
• Secure Figma token storage via VS Code secrets API.
• Workspace context loading (CLAUDE.md, rules, skills).
• Configurable model and permission mode.
• Added support for Win