VibeDesign Studio

A VS Code extension that bridges design tools (Figma and Framer) with AI-powered code generation through Kiro AI.

Features

• Import from Figma: Extract design metadata from Figma files using file URLs and access tokens
• Import from Framer: Extract design and animation metadata from Framer projects
• Designer Panel: Visual interface for viewing and editing design tokens (colors, typography, spacing, components)
• AI Code Generation: Generate production-ready React/Tailwind code from design context using Kiro AI
• Secure Credential Storage: Safely store API credentials using VS Code's SecretStorage

Getting Started

Installation

1. From VS Code Marketplace (recommended):

   • Open VS Code
   • Go to Extensions view (Cmd+Shift+X or Ctrl+Shift+X)
   • Search for "VibeDesign Studio"
   • Click Install

2. From VSIX file:

   • Download the .vsix file from the releases page
   • Open VS Code
   • Go to Extensions view
   • Click the "..." menu and select "Install from VSIX..."
   • Select the downloaded file

3. From source:

   git clone https://github.com/vibedesign/vibedesign-studio
   cd vibedesign-studio
   npm install
   npm run package
   code --install-extension vibedesign-studio-0.1.0.vsix
   

Configure API Keys

Before using VibeDesign Studio, you need to configure your API credentials:

1. Open the configuration command:

   • Open command palette (Cmd+Shift+P or Ctrl+Shift+P)
   • Run VibeDesign: Configure API Keys

2. Enter your credentials:

   • Figma Personal Access Token:

     • Go to Figma Account Settings
     • Scroll to "Personal Access Tokens"
     • Click "Create new token"
     • Copy the token and paste it when prompted

   • Framer API Token:

     • Go to your Framer project settings
     • Navigate to API section
     • Generate a new API token
     • Copy and paste when prompted

   • Kiro AI API Token:

     • Sign up at Kiro AI platform
     • Navigate to API settings
     • Generate an API token
     • Copy and paste when prompted

3. Credentials are stored securely using VS Code's SecretStorage API and persist across sessions

Usage

Import from Figma

1. Get your Figma file URL:

   • Open your design in Figma
   • Copy the URL from the browser address bar
   • Format: https://www.figma.com/file/{FILE_ID}/{FILE_NAME}

2. Import the design:

   • Open command palette (Cmd+Shift+P or Ctrl+Shift+P)
   • Run VibeDesign: Import from Figma
   • Paste your Figma file URL when prompted
   • Wait for the import to complete

3. What gets imported:

   • Component structure and hierarchy
   • Color palette from fills
   • Typography styles (font family, size, weight)
   • Layout information (frames, constraints, spacing)

4. Result: The Designer Panel opens automatically with your design metadata

Import from Framer

1. Get your Framer project ID:

   • Open your project in Framer
   • Go to project settings
   • Copy the Project ID

2. Import the design:

   • Open command palette
   • Run VibeDesign: Import from Framer
   • Enter your Framer project ID when prompted
   • Wait for the import to complete

3. What gets imported:

   • Frame structure and components
   • Animation metadata (types, durations, transitions)
   • Grid configuration and spacing
   • Layout information

4. Result: The Designer Panel opens automatically with your design metadata

Use the Designer Panel

The Designer Panel is your workspace for refining design tokens before code generation:

1. Opening the panel:

   • Automatically opens after import
   • Or run VibeDesign: Open Designer Panel to reopen

2. Editing design tokens:

   Colors:

   • Each color appears with a color picker
   • Click to change color values
   • Colors are stored as hex values (#RRGGBB)

   Typography:

   • Edit font family, size, and weight for each text style
   • Changes apply to all components using that style

   Spacing:

   • Adjust numeric spacing values
   • Values are validated to ensure they're positive numbers

   Components:

   • Toggle component visibility
   • Control which components appear in generated code

   Animations (if available):

   • Preview animation metadata
   • Toggle animation inclusion in code generation

3. Validation:

   • Invalid values are highlighted in red
   • Error messages appear below invalid fields
   • You cannot save until all validation errors are fixed

4. Saving changes:

   • Changes are saved automatically to workspace storage
   • Your design context persists across VS Code sessions

Generate Code

1. From the Designer Panel:

   • Click the "Generate Code" button at the bottom
   • Optionally toggle "Include Animations" checkbox
   • Wait for code generation to complete

2. From the command palette:

   • Run VibeDesign: Generate Code
   • Code is generated from the current design context

3. What you get:

   • Production-ready React components
   • Tailwind CSS styling
   • TypeScript type definitions
   • Animation code (if enabled)

4. Working with generated code:

   • Code opens in a new editor window
   • Syntax highlighting is automatically applied
   • Use VibeDesign: Copy Generated Code to copy to clipboard
   • Save the file to your project directory

Complete Workflow Example

1. Configure API Keys (one-time setup)
   ↓
2. Import from Figma or Framer
   ↓
3. Designer Panel opens automatically
   ↓
4. Refine colors, typography, spacing
   ↓
5. Click "Generate Code"
   ↓
6. Review and save generated React/Tailwind code

Requirements

• VS Code 1.85.0 or higher
• Node.js 20.x or higher (for development)
• Figma Personal Access Token (for Figma imports)
• Framer API Token (for Framer imports)
• Kiro AI API Token (for code generation)

Troubleshooting

Common Issues

"Invalid Figma URL" error:

• Ensure your URL follows the format: https://www.figma.com/file/{FILE_ID}/{FILE_NAME}
• Check that you have view access to the Figma file

"Authentication failed" error:

• Verify your API tokens are correct
• Re-run VibeDesign: Configure API Keys to update credentials
• Check that tokens haven't expired

"Network request failed" error:

• Check your internet connection
• Verify the API services are accessible
• Try again - the extension will retry automatically

Designer Panel not showing data:

• Ensure you've imported a design first
• Try running VibeDesign: Open Designer Panel again
• Check the VS Code Developer Console for errors

Generated code is empty:

• Verify your design context has components and styles
• Check that your Kiro AI token is valid
• Ensure the Designer Panel has valid data

Getting Help

• Report issues on GitHub Issues
• Check the documentation
• View logs in VS Code Output panel (select "VibeDesign Studio")

Extension Settings

This extension contributes the following commands:

• vibedesign.importFromFigma: Import design from Figma
• vibedesign.importFromFramer: Import design from Framer
• vibedesign.openDesignerPanel: Open the Designer Panel
• vibedesign.generateCode: Generate code from design context
• vibedesign.configureAPIKeys: Configure API credentials

Development

Setup

# Clone the repository
git clone https://github.com/vibedesign/vibedesign-studio
cd vibedesign-studio

# Install dependencies
npm install

Build

# Compile TypeScript
npm run compile

# Watch mode for development
npm run watch

# Build for production
npm run package

Test

# Run all tests
npm test

# Run tests in watch mode
npm run test -- --watch

# Run with coverage
npm run test -- --coverage

Testing Strategy

The project uses both unit testing and property-based testing:

• Unit Tests: Verify specific examples and edge cases using Jest
• Property-Based Tests: Validate universal correctness properties using fast-check
• Integration Tests: Test end-to-end workflows

All property tests run with 100+ iterations to ensure comprehensive coverage.

Project Structure

vibedesign-studio/
├── src/
│   ├── api/              # API clients (Figma, Framer, Kiro)
│   ├── commands/         # Command controller
│   ├── services/         # Core services (credentials, storage, orchestrator)
│   ├── transformers/     # Data transformation logic
│   ├── types/            # TypeScript type definitions
│   ├── utils/            # Utility functions
│   ├── webview/          # Designer Panel UI
│   ├── __tests__/        # Test files
│   └── extension.ts      # Extension entry point
├── dist/                 # Compiled output
├── .kiro/                # Kiro specs and documentation
└── package.json          # Extension manifest

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run tests (npm test)
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

Package

# Create VSIX package
npm run package

# Install locally for testing
code --install-extension vibedesign-studio-0.1.0.vsix

License

MIT

Release Notes

0.1.0

Initial release with core functionality:

• Figma and Framer import
• Designer Panel for editing design tokens
• Kiro AI code generation
• Secure credential management