Lunagraph
Putri Karunia co-founded Typedream, a YC-backed no-code website builder that was later acquired. Lunagraph is what she built next — and it shows where her thinking has gone.
The premise is straightforward: design on a canvas, get real code out. Not a Figma file, not a handoff spec — actual HTML, CSS, and React, written into your repo. The canvas is familiar enough (layers, components, visual composition) but the deliverable is different. Live preview in an iframe, screenshot comparison between design intent and built output, Git integration throughout.
Claude Code does the generation. There is a chat interface that understands both the canvas state and the local codebase, so it is working within your actual project rather than producing generic components into a void.
The positioning is precise: this is for designers crossing into engineering, or design engineers who want to stay in a visual tool without giving up code quality. The handoff problem — designers producing one thing, developers building another slightly wrong version of it — disappears when design and implementation are the same action.
Launched on Product Hunt on April 9, 2026. Public beta, free to start, request-access flow.
Putri Karunia co-founded Typedream, a YC-backed no-code website builder that was later acquired. Lunagraph is what she built next — and it shows where her thinking has gone.
The premise is straightforward: design on a canvas, get real code out. Not a Figma file, not a handoff spec — actual HTML, CSS, and React, written into your repo. The canvas is familiar enough (layers, components, visual composition) but the deliverable is different. Live preview in an iframe, screenshot comparison between design intent and built output, Git integration throughout.
Claude Code does the generation. There is a chat interface that understands both the canvas state and the local codebase, so it is working within your actual project rather than producing generic components into a void.
The positioning is precise: this is for designers crossing into engineering, or design engineers who want to stay in a visual tool without giving up code quality. The handoff problem — designers producing one thing, developers building another slightly wrong version of it — disappears when design and implementation are the same action.
Launched on Product Hunt on April 9, 2026. Public beta, free to start, request-access flow.
Similar tools
CSS Studio
A browser-based design tool from the team behind Motion (Framer Motion). Design visually on live pages while an AI agent writes the corresponding code directly into your project files. Works with React, Vue, plain HTML, and Tailwind. One-time purchase, early access.
Agentation
Agentation is a floating toolbar you add to your React app that lets you click on UI elements and generate structured markdown feedback for AI coding agents. Instead of describing "the blue button in the sidebar," it captures CSS selectors, component names from the React fiber tree, and positional data so agents like Claude Code or Cursor can locate and fix the exact element. Free and open source, works with any AI agent that accepts text input.
Onlook
Open-source visual code editor for React — edit Next.js + Tailwind applications with a Figma-like interface that writes changes directly to your codebase in real time. Visual edits map to actual JSX via unique element identifiers; Figma imports convert to working components. Positions itself as 'Cursor for designers' with changes becoming PRs, not handoff specs. Apache 2.0, self-hostable.
Tempo Labs
Tempo is a YC-backed AI platform that combines a visual React editor, AI code generation, and GitHub integration into one environment for building production React apps. Designers, PMs, and developers all work in the same canvas — you can prompt, drag-and-drop, import from Storybook, or edit locally in VSCode and push to GitHub. Primarily for teams building React apps who want to cut front-end time without leaving their existing workflow.