Launched this week
Lunagraph
Your design canvas that writes code powered by AI
91 followers
Your design canvas that writes code powered by AI
91 followers
Lunagraph is a design canvas — like Figma, but everything you add is real HTML, CSS, and React. Hand-craft UIs from scratch with granular control, or ask Claude to make sweeping changes. Designers, founders, and engineers all work on the same canvas.
Lunagraph
Hi Product Hunt! Excited and a little nervous to share Lunagraph on Alpha Day.
This is genuinely early. I'm sharing it now because I want feedback before I keep building in the wrong direction.
Lunagraph is a design canvas, like Figma, but everything you add to the canvas is real HTML, CSS, and React.
It's for designers, but also for everyone else on the team.
If you're a designer, you've probably been trying Claude or Cursor and feeling handicapped. No canvas, no controls, can't tweak padding with a click, just prompting and praying.
If you're a founder, you've been using Claude for design because Figma is just hard for you to use.
And engineers, meanwhile, are stuck rebuilding mockups and tweaking by hand.
You can hand-craft UIs from scratch with granular control over every value, or ask Claude as your creative partner to do big sweeps of change and make variations you can tweak. The components are real React components, like shadcn. The colors and spacing come from your actual design tokens on Tailwind. The code that ships is the code you designed.
What works today:
Design from scratch with real HTML or React components: divs, text, shadcn, etc.
Use Claude side-by-side to remix screens, apply a design system across a flow, or generate variations.
Customize shadcn components directly in the canvas.
Hand off real code to engineers. No Figma files, no annotations, ready to ship.
Founders, product, and sales can duplicate and remix existing designs without bugging the design team.
What's still rough (because it's alpha):
There's no onboarding. You'll probably need me to walk you through your first session, and I want to, so reach out.
Still working to reach parity with Figma's canvas and shortcuts.
You can't drag components in yet. Please click to add them to the canvas.
No drag for absolute positioning yet. Please use Top, Left, Bottom, Right.
You can use Claude Code Chat to pull components from your codebase into the project. I'm still figuring out the right approach to work between codebase and design system.
Pricing
Free. I'm not pricing this until I know what people are actually using it for.
What I need from you
If you're a designer: try building one screen from scratch and tell me where you got stuck. That's the most useful thing in the world to me right now.
If you're a founder or PM: try the chat to remix an existing screen and tell me if the output felt usable or janky.
If you're an engineer: look at the code Lunagraph produces and tell me if you'd actually merge it.
I'm reading every comment today and I'll reply to all of them. The whole point of Alpha Day is the feedback loop, so let's actually do it.
Big thanks to the small group who's been testing this in the closed alpha. You know who you are.
See you in the canvas.
@putrikarunia Hi. You draw on canvas and it writes code, what if my sketch is super rough, does it still understand?
Lunagraph
@julia_zakharova2 You're adding real HTML like "div" and "input" on the canvas itself. Not "sketching" and asking AI to translate. The frames/text you add is made out of HTML, and every styling you put is basically writing CSS / tailwind, so there's nothing to understand here :)
Offsite
Very cool! How would I go about building more complex UX (scrolling, parallax, etc). If it did that it would be way better than Figma!
Lunagraph
@stefano_delmanto yeah you can edit all CSS and Tailwind on your designs, or ask Claude Code on the chat to help you. All interactions and scrolling works on the canvas!
Wow such a cool idea. Small question, being a non tech founder how would rate the learning curve for this as compared to figma (m ok with figma as of now)
Lunagraph
@gamifykaran Should be similar to Figma! The only thing is that if you want to use Shadcn components or Tailwind classes, you kinda need to know tailwind and how to compose Shadcn components ( but you can always just copy paste from their documentation). And being familiar with CSS would help, but not necessary.
Plus there's Claude Code to chat with on the left sidebar, so you can create UI and ask for guidance if you can't find the right way to style something.
@putrikarunia thanks for the detailed explained, have a good day!
ProdShort
I like it, does it work with TailwindCSS?
Lunagraph
@bengeekly Yess it has tailwind out of the box, you can add p-2 etc on the right sidebar and even write any tailwind classes as well (like hover:bg-blue-500)
and you can ask chat (claude code) to help you update design colors and vas and it will literally update the globals.css in the lunagraph project + it can make a quick mock of all your colors and vars in the canvas to view easily
Baked Design Studio
I have been following Putri's journey since Typedream, when I got the opportunity to test Lunagraph I was amazed by what she and Anthony have created! I use AI a lot in my workflow, but the lack of a design founders take on all these tools puts designer's at a disadvantage as everything is built around developers - Lunagraph is bridging that gap from design to code, while still keeping the design workflow intact and honestly impressed by the product and will be using it!
Lunagraph
@mrnick_buzz thank you Nick!! Super excited to see what you build on Lunagraph and new workflows you're discovering :)
Is there a voice mode? Can I give commands using my voice?
Swapstack
Lunagraph
@jake_schonberger1 Yess, code on the canvas makes everyone's life easier :)