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.
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.
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)
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.