A Figma plugin for generating realistic iMessage chat interfaces using AI. Create engaging conversations with customizable participants, message counts, and styling options.
- AI-powered chat generation using Claude API
- Support for 2+ participants with unique names and personas
- Light and dark iMessage themes
- Interactive prototype view with emoji reactions and status indicators
- Built-in test data mode for development without API calls
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