Vibe Designing with Cline + MCP + Figma

The future of design isn’t manual — it’s conversational

🚨 The Problem

• Designing manually in Figma is painfully time-consuming.

• Achieving good visual aesthetics often requires a design background.

• Figma currently lacks an AI chat interface for fast, iterative design.

💡 The Solution

• Use high-level prompts to instruct Figma instead of manual work.

• Leverage Claude Sonnet 3.7 for agentic flow and intelligent execution.

• Bring your own API key (Claude/Cursor) to avoid hitting token limits.

---

⚙️ Setup Instructions

1. Install Cursor Talk.

2. Install Cline in VS Code.

3. Download the Figma desktop app.

4. Run cursor talk in your terminal. Follow install setup: Curser talk

5. Open a new document in Figma.

6. In the Figma doc:
   → Go to Plugins → Add Plugin → Use manifest.json to add Cursor Talk.

7. In the Figma plugin:
   → Start Cursor Talk and copy the channel ID.
   → Press Connect to Server.

8. In VS Code (Cline):
   → Go to mcp and paste the Cursor Talk server JSON in the config.
   → Add your Claude API key to the MCP config.

9. In Cline, enter a prompt like:
   "Use Figma, connect to channel-id: f0wekrcf. Make an app."

---

✏️ Example Workflow

1. Start with a rough outline of your idea:

We will use Figma. Connect on channel f0wekrcf.

- Create a simple payment app  
- Use Google's design aesthetics  
- Add a title to the top-left  
- Make an overview module  
- Add a bottom tab module with 3 buttons (Overview, Send/Receive, Settings)

1. Refine your prompt using ChatGPT or pplx.ai:
   → Paste your idea and prepend: Improve this prompt:

2. You’ll get a polished prompt like:

We'll be using Figma for this project. Please connect via channel f0wekrcf.

Task: Design a simple payment app  
Style Guide: Follow Google’s Material Design principles.

Design Requirements:
- Add an app title in the top-left corner.
- Create an Overview Module showing recent activity, balance, and key actions.
- Add a Bottom Tab Navigation with 3 buttons:  
  • Overview  
  • Send / Receive  
  • Settings

📚 Resources

• Cursor Talk to Figma MCP
  GitHub repository for integrating Cursor AI with Figma via Model Context Protocol (MCP).
  🔗 (sonnylazuardi/cursor-talk-to-figma-mcp - GitHub)

• Cline
  Open-source AI coding assistant for VS Code, supporting autonomous workflows and MCP integration.
  🔗 (Cline - AI Autonomous Coding Agent for VS Code)

• Claude AI
  Anthropic’s conversational AI assistant for tasks like writing, coding, and analysis.
  🔗 (Claude.ai) (Why Everyone Is Talking About Claude AI: Start Using It Today)

• Figma
  Collaborative interface design tool for UI/UX design and prototyping.
  🔗 (Figma: The Collaborative Interface Design Tool) (Figma: The Collaborative Interface Design Tool)

• Visual Studio Code
  Lightweight, extensible code editor with rich plugin support.
  🔗 (Visual Studio Code - Code Editing. Redefined) (Visual Studio: IDE and Code Editor for Software Developers and ...)

• ChatGPT
  OpenAI’s conversational AI model for writing, brainstorming, and more.
  🔗 (ChatGPT) (Why Everyone Is Talking About Claude AI: Start Using It Today)

• Perplexity AI
  AI-powered answer engine that provides accurate, real-time responses.
  🔗 (Perplexity AI) (Perplexity AI)