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.

AppSignal — Full-stack monitoring for errors, metrics, and logs

Full-stack monitoring for errors, metrics, and logs

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.

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)

@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!