A Figma plugin that helps designers check if their components and screens are optimized for AI code generation. It analyzes your selection against Model Context Protocol best practices and tells you what to fix before handing off to tools like Claude Code or Cursor.
Key Achievements:
Successfully designed and built a working developed plugin using the best practices, Claude Code, and Figma MCP server to execute the build.
Reached 150 users in 60 days with zero marketing spend purely organic growth through product-market fit.
Achieved a 71% conversion rate across 162 users and 210 views.
Validated real demand with roughly 2.5 users a day demonstrating genuine need for the plugin.
Design Challenge
When I started using the Figma MCP server with Claude Code, I kept running into the same issue. My designs would generate messy output, not exactly how I designed them, and code that felt broken. I wanted a way to check my files before handing off to AI. Something that would flag issues like generic layer names, inconsistent auto layout, and give me pointers on how to fix them. I couldn't find anything that did this, so I set out to build it myself.
You are able to use the plugin today and try it for yourself!
Solution
Design the plugin around three easily scanable sections that automatically update whenever a user makes a change.
Utilize best practices in conjunction with Claude Code and command Markdown files to ensure the best output.
Reiterate on initial design for overall better user experience.
Technical Approach
Using the Figma MCP server, I iterated on the plugin with Claude Code over the course of 1 month. While the MCP server relayed the majority of the design seamlessly, the icons and minor coding edits needed to be done manually and through the file tree.
Rename each layer and apply annotations for better translation.
Skills Used
Accessibility
Adobe Suite
Prototyping
GenAI
UI Design
HTML/CSS
User-centered Design
Information Architecture
User Research
Interaction Design
UX Design
JavaScript
Mixed Reality
Outcome
I designed and built MCP Ready over the course of two weeks using Claude Code and iterating within Figma. I designed the plugin interface, used the MCP server to build in Claude Code, and iterated on it within Plugin Development until it worked and looked exactly how I pictured. The plugin analyzes a selected frame and returns a readiness score (Ready, Almost, Rework) along with specific suggestions for improvement.
It checks five areas: component structure, naming conventions, auto layout usage, fill properties, and nesting depth. Each check ties back to what actually affects code generation quality. A further addition was including token cost estimation, so designers can see how complex their selection is before sending it to their AI code editor. This came about from seeing the token estimation in Figma's Dev Mode and removing the need for the user to switch back and forth between modes.
Whenever you make a selection, the plugin updates automatically, removing the need for a refresh.
From the initial launch date of October 27, 2025 to today, MCP Ready has been used by 162 users with 246 views and 19 saves on the Figma Community. That's about a 71% conversion rate, showing there's a niche group of designers and builders looking for a tool like this.
Impact
MCP Ready validated that there is demand for design-to-AI tooling. It also proved I could ship a working product from concept to launch using AI-assisted development. The plugin continues to grow organically and has opened the door to future updates such as automatic layer renaming and possibly LLM assistance for Version 2.