Intercom Demos AI-Powered Prototyping in Code
The design team at Intercom has demonstrated a new workflow for AI-powered prototyping directly in code. The process uses Figma Code Connect combined with the AI model Claude to streamline the path from design concept to functional code, reducing manual handoffs between designers and engineers.
- The workflow leverages Figma's Model Context Protocol (MCP), a server that allows AI tools to read and understand Figma design files. Code Connect enhances this by linking design components directly to their corresponding code in a GitHub repository, giving the AI awareness of the production codebase. - Anthropic's Claude 3 is the AI model used in the process; its family of models (Haiku, Sonnet, and Opus) are known for strong performance in code generation and the ability to process visual information like charts and diagrams. The most powerful model, Claude 3 Opus, has benchmarked higher than many competitors in graduate-level expert reasoning. - This initiative is part of a broader strategy at Intercom to create an "AI-native" design team. For several months, their designers have been using AI tools like Cursor to ship code changes directly to production, fixing UI bugs and UX debt without waiting for engineering handoffs. - The demonstrated process of "vibe coding" allows designers to build high-fidelity, interactive prototypes with real code, which can then be used for user testing and provide engineers with working code instead of static mockups. - This approach aims to solve the long-standing "design handoff" problem, where auto-generated code from design tools often doesn't align with a company's existing codebase or design system. By using Code Connect, the AI generates code that uses the actual, approved components from the team's repository. - The rapid evolution of AI coding tools is shifting from simple code completion (like the original GitHub Copilot) to more powerful "agentic" systems. These agents can understand entire codebases, perform multi-step tasks, and bridge the gap between design intent and functional software, a trend this Intercom workflow exemplifies.