Hello Product Hunt! Excited and a little nervous to share the Lonograph on Alpha Day.
It’s really early. I’m sharing this now because I want feedback before I build in the wrong direction.
Lunagraph is a design canvas, like Figma, but everything you add to the canvas is real HTML, CSS, and React.
This is for the designers, but also for everyone on the team.
If you’re a designer, you’ve probably tried Claude or Cursor and felt overwhelmed. No canvas, no controls, can’t tweak padding with a click, just point and pray.
If you’re a founder, you’re using Claude for design because Figma is difficult for you to use.
And engineers, meanwhile, are stuck recreating mockups and tweaking them by hand.
You can handcraft UIs from scratch with granular control over each value, or have Claude as your creative partner to make big changes and variations that you can tweak. Components are components of the original reaction, such as shadcn. Color and spacing come from your original design tokens on Tailwind. The code that ships is the code that you designed.
What works today:
Design from scratch with real HTML or React components: divs, text, shadcn, etc.
Use alongside Claude to remix screens, apply a design system to a flow, or create variations.
Customize shadcn components directly in canvas.
Give the original code to the engineers. No figma files, no annotations, ready to ship.
Founders, product, and sales can duplicate and remix existing designs without disrupting the design team.
What’s still rough (because it’s alpha):
There is no onboarding. You will probably need me to take you to your first session, and I would, so get in touch.
Still working to get it up to par with figma’s canvas and shortcuts.
You cannot drag components yet. Please click to add them to the canvas.
There is no drag yet for absolute positioning. Please use up, left, down, right.
You can use CloudCodeChat to pull components from your codebase into a project. I’m still figuring out the right way to work between the codebase and the design system.
Pricing
free. I’m not pricing it until I know what people are actually using it for.
What do I need from you?
If you’re a designer: try building a screen from scratch and let me know where you get stuck. This is the most useful thing in the world for me right now.
If you’re a founder or PM: Try the chat to remix the current screen and let me know if the output feels usable or buggy.
If you’re an engineer: look at the code generated by Lonagraph and let me know if you really want to integrate it.
I am reading every comment today and I will 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 testing it in closed alpha. You know who you are.
See you in the canvas.