Carthagine
AI-powered, pixel-perfect Figma to React
29 followers
Carthagine is an AI that can convert a Figma design into a usable, pixel-perfect React component hierarchy that integrates into your codebase. It allows developers to focus on the truly challenging parts of building an app and leave the boring, repetitive Figma matching behind. Unlike other tools, Carthagine is precise in matching every single padding and color, while having a high-level understanding of your design that allows it to create production-ready code. It's a new era for frontend.
Lottielab
Hello ProductHunt community!
As a full-stack engineer working at startups and on my own side projects, there is one part of the product development process that I've never enjoyed: translating a Figma design into React + CSS/Tailwind.
To move fast, you need to do this process a lot of times, but it's not a fun one. So, you compromise - you make it look kinda-but-not-quite-like Figma, you skimp on the details, and when you need one-off UIs for user testing, you test with Figma prototypes instead (which sucks). And then it's still a slog.
I've tried to find tools on the market to scratch my itch, to no avail. They all promise perfection and entice you with slick demos, but fall terribly short of expectations as soon as you try them.
I built Carthagine to be nothing like that. I ran countless boring tests, fixed edge cases, added guardrails, iterated, and rewrote the core engine 3 times until I was confident it can provide real value.
🔹 What it does:
✅ Converts Figma designs into a clean, sensible React hierarchy
✅ Outputs real, usable components with props and events
✅ Integrates seamlessly into your codebase and matches your style
✅ Scales with complexity - convert a single form or a whole screen with the same precision
Check out the demo video to see what it can do. It shows the actual product in action - no misleading editing & cherry-picked examples: https://youtu.be/oXL7GosuRms
Or browse the generated code from the video: https://github.com/carthagine/c1-showcase/
🟣 The Road Ahead:
Carthagine c1 (the current version) is a working prototype. I built it to prove that a novel, agentic approach to frontend coding and LLM reliability in general can provide a step change in quality and usefulness.
You still need frontend skills to use it - if only to tidy up its tendency to "prop drill", and the slight inconsistencies inherent in any LLM-powered workflow. (Both are visible in the video.) But it does the most boring 80% of the work for you.
To manage the complexity of scaling a compute-intensive prototype, I’m gradually rolling out beta access to learn from real devs and work towards creating a killer product in this space. I hope you will join me.
🟠 Exclusive for Product Hunt:
ProductHunt users get priority onboarding + free credits. Just drop me a message at hello@carthagine.ai and I'll happily bump your spot in the queue.
Would love to hear your thoughts, feedback, and ideas. Let’s push frontend forward together.
Sincerely yours,
― David
Founder, Carthagine
love that you’ve emphasized real-world testing and ironing out edge cases – that’s often where these tools fall short. The ability to convert even complex designs into usable code sounds pretty powerful, and I’m curious to see how well it integrates with different dev workflows.
I’m particularly interested in how it handles more intricate UI patterns (like dynamic forms, or interactive elements). Does it offer anything around customizing these behaviors as the complexity grows?
Lottielab
@sirui Thank you for the kind words - yes, I tried to make the approach goal- and utility-driven rather than optimizing for flashy results. I'm hoping it will be a worthy differentiator.
As for your question - currently, the prototype is completely autonomous, so it will make a best guess on how to handle any interactivity in your design. For example, if it notices something that looks like a form, it will create events like `onSubmit` and expose them in the React component. In the end, you get plain old code anyhow - so fixing up any issues stemming from an incorrect understanding should be easy.
On the near-term roadmap is allowing the user to step in and correct this understanding in a collaborative manner, but first and foremost, I would like to see how it's used on real-world designs and what kind of mistakes it will make, to determine the best way to allow control.
If you have a design you'd like to try, feel free to write to hello@carthagine.ai and I can fast-track you on the beta train! Cheers.
Chance AI
As someone who's spent countless hours painstakingly translating Figma designs into React components, this feels like finding the holy grail! 🎨⚛️
The eternal dance between designers and developers - "Can you make it pixel-perfect?" "But the design keeps changing!" - might finally have a resolution! This isn't just a tool; it's a peace treaty between design and development!
What really hits home is how you've focused on making the output actually usable in real codebases. We've all seen conversion tools that generate code that needs to be completely rewritten - but you're aiming for code that slots right into existing projects. That's the dream!
The focus on eliminating the repetitive parts while letting developers concentrate on the complex, interesting challenges is brilliant. It's not about replacing developers; it's about elevating their work by removing the tedious parts. It's like having a super-efficient junior dev who handles all the pixel-pushing perfectly!
You're not just saving time; you're reducing one of the biggest sources of friction in the development process. No more back-and-forth about spacing, alignment, or responsive behavior - just clean, consistent translation from design to code.
The potential impact on development workflows is enormous:
Faster iterations
More accurate implementations
Happier designers AND developers
More time for solving real problems
I love that you're making this tedious part of development history. Keep pushing the boundaries of what's possible in the design-to-development pipeline! 🚀✨
Lottielab
@xi_z Thank you for the kind words! Excited for what's to come!