How I use Figma MCP + Claude to Vibe Code at Intercom
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
- 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.
- 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.
- 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.
- 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.
- 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.
Related 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 to start in Figma, they can essentially only all the only thing they have to do is copy a link to this design. So copy link to the selection, go to back to their IDE and this chat to cloud and say build the dialogue from this link in this page. We'll send that to Cloud. And if we navigate back here t…
More from Sneak Peek Design
- Design Engineer at DuckDuckGo Shows His Workflow (and AI Tools He uses)
- Designer at Early Stage Startup Shows Her Workflow (and AI Tools She uses)
- 7 Senior Designers Show How They Avoid AI Design Slop
- 12 Senior Designers Show Their Engineering Handoff Process
- How to Build a Figma Design System for 50+ Sports Brands