CodeCanvas AI

CodeCanvas AI is a VS Code extension that helps with common development tasks such as turning Figma frames into React components, generating starter projects, explaining errors, and drafting tests.

Features

Figma to React

• Converts a Figma file or frame into React + TypeScript components
• Generates Tailwind CSS utility classes from layout and style data
• Splits reusable top-level sections into separate component files
• Writes output to src/components/<ComponentName>/

Project Structure Generator

• Creates ready-to-edit starters for:
  • React + Vite
  • Next.js
  • Express
  • FastAPI
• Supports custom AI-generated scaffolds from a free-form prompt
• Offers post-create actions such as dependency install, git init, and opening the new folder

Debug Assistant

• Explains selected errors in plain language
• Uses surrounding code context for better suggestions
• Opens the analysis in a side-by-side markdown view

Test Generator

• Generates Jest-style tests for selected code or an entire file
• Works with JavaScript and TypeScript selections
• Reuses the configured OpenAI model and cache settings

Setup

1. Open the Command Palette.
2. Run CodeCanvas AI: Configure API Keys.
3. Save your OpenAI API key.
4. Optionally save a Figma access token for the Figma workflow.

Keys are stored with VS Code secret storage. They are not exposed as normal workspace settings.

Commands

• CodeCanvas AI: Convert Figma to React
• CodeCanvas AI: Generate Project Structure
• CodeCanvas AI: Debug & Explain Error
• CodeCanvas AI: Generate Test Cases
• CodeCanvas AI: Configure API Keys
• CodeCanvas AI: Clear Cache
• CodeCanvas AI: Show Logs

Settings

• codeCanvasAI.model selects the OpenAI model
• codeCanvasAI.enableCaching enables response caching
• codeCanvasAI.logLevel controls extension logging verbosity

Development

npm install
npm run compile
npm test

To create a VSIX package after installing packaging dependencies:

npm run package

Notes

• The extension requires VS Code 1.104 or later.
• OpenAI usage is billed through your own API account.
• Figma conversion quality depends on the structure of the source design and may still need manual refinement.

License

MIT