chat-builder-plugin
A Figma plugin that encodes iMessage's grouping, participant, and timing logic into its prompt, turning a text input into both a static mock and an interactive prototype.
A prompt becomes a fully editable iMessage prototype on the Figma canvas, assembled by Claude from real components in a domain-specific UI kit.
iMessage Chat Builder turns a text prompt into a realistic, fully editable iMessage prototype on the Figma canvas. Claude writes the conversation. The plugin assembles it from real components in a companion UI kit, so the output stays part of your design system rather than a one-shot generation.
Figma's own content-population AI doesn't know anything about iMessage. The plugin does. It encodes message grouping, participant roles, timing, and theme variants directly into the prompt, so what lands on the canvas reads as real iMessage rather than a generic chat mockup.
This was a proof of concept built before Claude Code or Figma Make existed. When Figma's Dev Mode MCP server shipped, I exported the UI kit into chat-app-prototype, a React Native app where you can chat with Claude inside an iMessage interface. Mention a song and Claude returns a music bubble. Ask for directions and Claude surfaces a map. The prompt became a protocol, then a runtime, with the same domain knowledge moving higher up the stack at each step.
Links
Mentioned in
Where design decisions actually live
I recreated iMessage in React Native from a Figma design system, then again in SwiftUI from Apple's documentation. The comparison changed how I think about where design decisions belong.
·6 min readThe case for building your own Figma plugins
The most useful Figma features might be the ones you build yourself. Here's what I learned building a plugin that assembles AI-powered iMessage prototypes.
·4 min read