🚀 Figma Plugin by Vibe Coding

TypeScript Figma plugin boilerplate with AI development tools integration

A modern Figma plugin development setup with TypeScript, React, and AI development tools support.

✨ Features

🏗️ Tech Stack

• TypeScript 5.6+ - Type safety with explicit annotations
• React 18 - Functional components with hooks
• Vite - Fast build system with HMR
• shadcn/ui - Accessible component library
• Tailwind CSS - Utility-first CSS framework
• Biome - Linting and formatting

🤖 AI Development Integration

• 15+ AI Tools Supported - Cursor, Claude, Copilot, Cline, and more
• rulesync - AI development rules generation
• Type-Safe Code Generation - Structured codebase for AI tools
• AI Collaboration - Pre-configured patterns for AI assistance

🛡️ Development Features

• HMR Stability - Solved CSS issues during hot reload
• Error Handling - Result pattern implementation
• Quality Tools - Automated lint + format + typecheck
• Dual Process Architecture - Figma Plugin API compliance

🚀 Quick Start

1. Create New Plugin Project

# Create a new plugin using npm create command
npm create figma-plugin-by-vibe-coding my-awesome-plugin

# Or with AI tool selection
npm create figma-plugin-by-vibe-coding my-plugin cursor
npm create figma-plugin-by-vibe-coding my-plugin claudecode

# Navigate to your project
cd my-awesome-plugin

2. Generate AI Development Rules 🤖

If you're using AI-assisted development, generate the rule files for your preferred AI tool.

Configure AI Tool

Edit rulesync.jsonc to select your AI tool:

{
  // ✏️ Specify your preferred AI tool
  "targets": ["cursor"],  // or ["claudecode"], ["copilot"], etc.
}

Generate Rules

# Generate rules for configured AI tools
npm run rules:generate

⚠️ Note: You might see Node.js compatibility errors from rulesync, but files are generated successfully. Check for .cursor/, CLAUDE.md etc. to confirm success.

This generates files for your selected AI tool:

• Cursor: .cursor/rules/ + custom commands
• Claude Code: .claude/memories/ + specialized agents
• GitHub Copilot: .github/instructions/ integration
• Cline: .clinerules/ auto-generation
• Others: Amazon Q, Qwen, Gemini, etc.

3. Start Development

# Start development server
npm run dev

# Or develop UI only in browser
npm run dev:ui-only  # http://localhost:3000

4. Load Plugin in Figma

1. Open Figma Desktop
2. Go to Plugins → Development → Import plugin from manifest...
3. Select dist/manifest.json
4. Your plugin is now loaded with demo random shape generation

📋 Development Commands

🔧 Basic Commands

npm run dev              # Start development server
npm run build            # Production build (hot reload safe)
npm run build:clean      # Clean build (for releases)
npm run dev:ui-only      # UI-only development in browser

🧹 Code Quality

npm run lint:fix         # Auto-fix linting issues
npm run format           # Format code
npm run typecheck        # TypeScript type checking

🤖 AI Development Tools

npm run rules:generate   # Generate AI tool rules

🏗️ Project Structure

src/
├── plugin/           # Plugin thread (Figma API)
│   └── main.ts       
├── ui/               # UI thread (React)
│   ├── components/   # UI components
│   ├── hooks/        
│   │   ├── core/     # Core functionality (communication, connection)
│   │   └── features/ # Feature-specific (custom logic)
│   └── styles/       # Global styles
├── common/           # Shared files
│   ├── messages.ts   # Communication contracts
│   ├── types.ts      # Type definitions
│   └── constants.ts  # Constants
└── .rulesync/        # AI development rules (auto-generated)

🎯 Demo Features

Random Shape Generation

• Function: Generates random shapes (rectangles, ellipses, polygons)
• Features: Random colors, sizes, and viewport positioning
• Notifications: Native notifications via figma.notify()
• Type Safety: TypeScript type checking

🤖 AI Development Tips

1. AI Tool Setup: Configure your preferred AI tool in rulesync.jsonc
2. Rule Updates: Run npm run rules:generate before implementing new features
3. Expert Agents: Use Claude's figma-expert agent for specialized help
4. Keep It Simple: Use rulesync's standard features as-is

💡 Troubleshooting

Build Errors During Hot Reload

# ❌ Issue: npm run build crashes the plugin
# ✅ Solution: Use hot reload safe build
npm run build        # Safe build (recommended)
npm run build:clean  # Full clean build (for releases only)

CSS Application Issues

• CSS disappearing during HMR has been resolved
• Protection mechanisms for stable style application
• forceCSSSafety() for automatic recovery

rulesync Errors

# Node.js compatibility errors are expected but work correctly
ls .cursor CLAUDE.md  # Verify file generation

📦 npm create Command

# Basic usage
npm create figma-plugin-by-vibe-coding my-plugin

# With AI tool selection
npm create figma-plugin-by-vibe-coding my-plugin cursor
npm create figma-plugin-by-vibe-coding my-plugin claudecode

📝 License

MIT License - see LICENSE for details

🙋‍♂️ Support

• Issues: GitHub Issues
• Discussions: Project Discussions
• Documentation: README-LLM.md (Detailed guide for LLM)

🌟 Contributing

Pull requests are welcome! See CONTRIBUTING.md for details.

Made with ❤️ for AI-assisted Figma plugin development