A Figma plugin that generates realistic iMessage chat interfaces using Claude. Supports 2+ participants with unique personas, light and dark iMessage themes, and an interactive prototype view with emoji reactions and status indicators. A test data mode lets you iterate without hitting the API.
git clone https://github.com/pdugan20/chat-builder-plugin.git
cd chat-builder-plugin
npm install
npm run buildInstall in Figma: Plugins > Development > Import plugin from manifest... and select manifest.json.
npm run watch # Dev mode with hot reloading
npm run watch:test # Dev mode with test data (no API calls)
npm run watch:debug # Dev mode with debug panel enabled
npm run setup-hooks # Set up pre-commit hooks
npm test # Run tests
npm run test:ci # Tests with coverage (CI mode)- Build: Webpack 5
- API: Anthropic Claude API (Haiku 4.5)
- Testing: Jest 30, React Testing Library
- Quality: ESLint 9, Prettier, markdownlint, Conventional Commits
- End-to-End Flow - Technical walkthrough of user inputs to Figma components
- Chat Building Architecture - Component structure and rendering pipeline
- Prompt Engineering Guide - AI prompt design and message generation
- Project Guide - Development setup, architecture, and coding guidelines
- chat-app-prototype - Demo iMessage app built with this plugin