Inspiration We were tired of manually building the same UI components over and over. Every project started with a login screen, a product card, or a settings page. We thought, "What if you could just tell Figma what you want, and it builds it for you?"
What it Does You type a prompt (like "Create a modern login screen") or upload a screenshot of an app you like. UIgenie uses AI to generate a complete, 100% editable Figma design with proper auto-layout.
How We Built It (Using Kiro AI IDE) It's a full-stack application. We used the Kiro AI IDE to help us build the "brain" of the operation—the complex backend. Kiro AI was essential for quickly generating the code for user accounts, the coin-based payment system, and the logic that connects to all the different AI models.
Challenges We Ran Into AI is messy. Getting an AI to output the perfect JSON code that Figma needs for a flawless auto-layout design was extremely difficult. Also, AI providers can be slow or fail, so we had to build a system to handle that.
Accomplishments That We're Proud Of The Smart Fallback: If one AI (like OpenAI) is down, our plugin automatically tries another (like Google Gemini). This makes it super reliable.
Image-to-UI: The feature that turns a simple screenshot into an editable design is a huge win.
It's a Real App: We built a complete, secure platform with user accounts and billing, not just a simple plugin.
- What We Learned You can't just "plug in" an AI and expect it to work. The real work is building the code around the AI to make it reliable and useful.
Using an AI-powered IDE like Kiro to build an AI-powered product is a massive speed boost.
Built With
- anthropic
- bcrypt
- figma:
- gemini
- node.js
- openai
- preact
- typescript
- vite
- vitest
Log in or sign up for Devpost to join the conversation.