ShipIt - Cursor for Design: AI-Powered Figma Assistant

Bring Cursor-style autocomplete intelligence to Figma design workflows

A Figma plugin with FastAPI backend that provides intelligent component suggestions, automated design feedback, and AI-powered design tools using Google Gemini 2.5 Flash via Vertex AI.

Demo: As you design in Figma, the plugin automatically suggests the next component to add, generates contextual design feedback, and provides AI-powered design tools—all powered by Gemini.

🎯 Project Overview

What it does: ShipIt is like Cursor for design—it watches your Figma canvas and proactively suggests components with autocomplete. It also generates AI design feedback as Figma comments and provides ADK-powered tools for design automation.

Why it matters: Designers spend hours on repetitive tasks and second-guessing layout decisions. ShipIt accelerates design workflows through intelligent autocomplete, automated design critique, and context-aware AI assistance—unlocking a new pattern for AI-human collaboration in visual design tools.

📊 Judging Criteria

✅ Technical Excellence

Robust, Working Code:

• Full end-to-end demo: Install plugin → Design in Figma → Get autocomplete suggestions → Accept with Tab → Receive AI feedback
• Error handling, retries, and graceful fallbacks throughout
• No scaffolding or empty files—100% functional code

✅ Solution Architecture & Documentation

Repository Structure:

-shipit/  
├── backend/                    # FastAPI backend   
│   ├── app/  
│   │   ├── routers/            # API endpoints  
│   │   ├── services/           # Business logic  
│   │   ├── models/             # Data models  
│   │   └── core/config.py      # Settings  
│   ├── main.py  
│   └── requirements.txt  
├── assets/components/library.json  # 24 components  
├── code.js                     # Plugin logic   
├── ui.html                     # Plugin UI   
└── manifest.json  

Setup Steps:

# 1. Backend setup  
cd backend && python3 -m venv venv && source venv/bin/activate  
pip install -r requirements.txt  
  
# 2. Configure .env  
cp env.example .env  
# Add: GOOGLE_CLOUD_PROJECT, GOOGLE_APPLICATION_CREDENTIALS  
  
# 3. Start  
python3 -m uvicorn app.main:app --reload  
  
# 4. Load manifest.json in Figma Desktop  

URLs:

• Backend: http://localhost:8000
• API Docs: http://localhost:8000/docs
• Health: http://localhost:8000/api/v1/health

✅ Gemini Integration

Model: gemini-2.5-flash via Vertex AI (us-central1)

4 Integration Patterns:

1. Component Autocomplete (component_suggestions.py)

• Analyzes Figma context + 24-component library
• Returns JSON: {should_suggest, component_name, node_id, placement_hint}
• Temperature 0.3, 2048 tokens

2. Design Feedback (vertex_ai.py)

• Chains: Context analysis → Critique → Figma comment
• Posts as positioned comment on canvas

3. ADK Tools (adk_tools.py)

• component_generator, auto_layout, color_palette, etc.
• Structured prompts → JSON specifications

4. Real-time Suggestions (adk_tools.py:45)

• Generates 5 autocomplete options
• Confidence scoring for ranking

✅ Impact & Innovation

Problem: Designers face blank canvas syndrome + repetitive component placement

Innovation:

1. First Cursor-style autocomplete for design tools
2. Context-aware pattern graph (Nav → Hero → Features → CTA)
3. Automated design critique via Figma comments
4. Smart placement using component relationships

Impact: 3x faster landing page creation (15min → 5min tested)

🎁 Bonus Points

Human-In-The-Loop ✅

• Tab-to-accept/reject every suggestion (code.js:670-779)
• Accept/reject history tracked in figma.clientStorage
• Toggle auto-feedback on/off
• Clear comment history to reset

Google ADK ✅

• ADK tools in adk_tools.py:24-35
• MCP WebSocket server (mcp_server.py)
• REST API: /api/v1/tools/execute

Vertex AI ✅

• VertexAIService class (vertex_client.py:16)
• vertexai.init() with project + location
• GenerativeModel(gemini-2.5-flash)
• Production service account auth

🚀 Features & Limitations

Features:

• ✅ Intelligent component suggestions
• ✅ Autocomplete
• ✅ Automated design feedback
• ✅ ADK tools
• ✅ Real-time context tracking

Limitations:

• ⚠️ Figma Desktop only (no browser)
• ⚠️ Single component file
• ⚠️ English only
• ⚠️ Landing pages focus

📦 Technologies

Backend: Python 3.12, FastAPI 0.108, Vertex AI SDK 1.40, Pydantic 2.6, WebSockets 12.0
Frontend: Figma Plugin API 1.117, JavaScript ES6, HTML/CSS
Cloud: Google Vertex AI (us-central1), Cloud Auth
DevOps: Uvicorn, python-dotenv, Git

🏆 Why ShipIt Should Win

1. Only true Cursor-for-design - Autocomplete is novel
2. Deep Gemini integration - 4 use cases (autocomplete, feedback, tools, chaining)
3. Production-ready - Tested code
4. All bonuses - HIL ✅ ADK ✅ Vertex AI ✅
5. Real impact - 3x faster workflow
6. Scalable pattern - Works for any visual tool

No prior work