How I use Figma MCP + Claude to Vibe Code at Intercom

By Sneak Peek Design

Categories: Design, Product

Summary

Intercom's design team uses AI-powered tools like Claude MCP and Figma Code Connect to prototype directly in their codebase rather than in design tools, enabling designers to leverage their full design system and engineering infrastructure for rapid iteration.

Key Takeaways

  1. Give designers direct access to the codebase with dedicated playground sections, allowing them to prototype in actual code environments rather than separate design tools, reducing friction and enabling faster iteration.
  2. Connect every component in Figma to code via Code Connect, ensuring Claude has full context of existing components and can reuse them instead of creating duplicates when generating code from design files.
  3. Use Figma MCP and Claude Skills to extract design context (component names, tokens, screenshots) from Figma links, allowing designers to simply copy a link and ask Claude to build it in their IDE without back-and-forth iterations.
  4. Enable one-shot code generation by providing Claude with comprehensive context about the design system, reducing the typical iterative back-and-forth that occurs when AI has incomplete information about available components.
  5. Create dedicated prototype pages in the codebase that engineers also use for rapid development, benefiting both designers and engineers by eliminating setup work and providing a standardized experimentation space.

Topics

Transcript Excerpt

How do designers at intercom do prototyping with AI tools? >> We've done a lot of work to make sure that every single component in Figma is connected to code under the hood via code connect. So if you check this button for example and you see here in developer environment de mode you will see that it's essentially connected to code connects. So when a designer is ready with a design, if they want to start in Figma, some designers start directly in code and that's totally fine. But if they want t...