It’s really quick. I’m sharing this now because I want feedback before I continue building in the wrong direction.
Lunagraph is a design canvas, like Figma, but everything you add to the canvas is actual HTML, CSS, and React.
This is for the designers, but also for everyone else on the team.
- If you’re a designer, you’ve probably been trying out clouds or cursors and feeling handicapped. No canvas, no controls, no padding changed with a single click, just pointing and praying.
-
If you’re a founder, you’re using the cloud for design because Figma is hard for you to use.
-
And meanwhile, engineers are stuck rebuilding mockups and making changes by hand.
You can craft the UI by hand with granular control over every value, or ask the cloud as your creative partner to handle the bulk of the changes and create variations that you can tweak. The components are actual React components, such as shadcn. The color and spacing come from your actual design tokens on Tailwind. The code that is sent is the code designed by you.
What works today:
-
Design from scratch with real HTML or React components: divs, text, shadcn, etc.
-
Use the cloud together to remix screens, apply design systems to flows, or create variations.
-
Customize shadcn components directly in canvas.
-
Assign actual code to engineers. No Figma file, no annotations, ready to send.
-
Founders can copy and remix existing designs without disturbing the product and sales design teams.
What’s still hard (since it’s alpha):
-
There is no onboarding. You’ll probably need me to accompany you to your first session, and I’d love to do that, so get in touch.
-
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.
-
There is no stretch for perfect status yet. Please use up, left, down, right.
-
You can use Cloud Code Chat to drag components from your codebase into the project. I’m still figuring out the right approach to working between the codebase and the design system.
Price determination
Free. I’m not pricing it until I find out what people are actually using it for.
what do i need from you
-
If you’re a designer: Try creating 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 chat to remix an existing screen and let me know if the output felt usable or useless.
-
If you’re an engineer: Look at the code produced by LunaGraph and tell me if you’d actually merge it.
I’m reading every comment today and will reply to all of them. The whole point of Alpha Day is the feedback loop, so let’s actually do that.
Big thanks to the small group that is testing it in closed alpha. You know who you are.
See you in Canvas.
<a href