✦ Founder @lunagraphHQ design canvas for React ✦ Design Engineering Fellow @a16z ✦ Cofounded @typedreamHQ YCW20, acq

San Francisco
it's happening 🥹 @lunagraphHQ is open not just a design canvas, but a visual editor for React this means you can design the full experience: from exploration to defining every state, interaction, and flow. and when it feels right, hand devs nicely packaged code, UX and all come design with code this weekend 🌸 (sound on 🔊)
125
66
642
95,318
Putri Karunia retweeted
redesigning a component means touching every state it has. i would've forgotten to check truncated titles. so i don't work from memory. i pulled our real tabs out of the codebase with all the states included: hovered, loading, agent working, truncated. added a hover card to the component, tested it against different cases, and sent the PR. all in the @lunagraphHQ canvas.
3
24
954
really resonating with this and it's touching some core part in how i want to build the team in @lunagraphHQ when i first talked to River about working together, we talked over a couple weeks across many personal & professional topics. i mentioned, i will be saying "i feel" a lot. a lot of the time, great ideas starts from a feeling. while i was doing this solo for a while, with no co-founders to align with, i realize i had much more freedom to follow my gut, fully aware it's still a gut feeling. i didn't have to spin up a story to justify an experiment, while keeping in mind staying sharp & focused is key in running a micro team. so when we're thinking of working together, i don't want this to go away. we should be free to have a gut feeling, and talk about it as a gut feeling. it's okay to not have everything figured out, and it's okay to be honest about it, and it's okay to try something from a feeling, because we learn a lot by talking about it, trying things, and trying to formulate our thoughts around it. it needs to be okay, and no one has to pretend they know things they don't. after all, that's how design has always been. start drawing something, explore something, try a few things, the formation of that feeling into something real happens on the canvas, happens by doing.
Being a product designer is basically just one frustration loop after another. First it was the annoying gap between my taste and and what I could actually make. Then it was convincing my team an idea was worth trying. Now we can add getting an LLM to understand what I mean to the mix. But I've seen again and again that the frustration is worth following. When someone doesn't get what I'm saying, it usually means I don't understand it well enough myself yet. I'm building @lunagraphHQ, a design engineering tool, with a really awesome team of people and agents. The people are wonderful. But, tbh, the agents frustrate me a lot. But, every time one misses the mark, I ask why it did things the way it did. The answer usually points to a blind spot in our design system, so I codify the fix and keep going. And then it’s just a matter of running this loop over and over all day every day. I've learned more from this loop in the last few months than from anything else in 15 years of designing software. And it's also really the whole point of Lunagraph. We want to build a tool that makes following the frustration not so, well... frustrating.
1
1
17
951
design is the “source of vision." what's changed now is the cost of translating that vision into "truth".
I completely agree. Which is why (and stay with me here) I’m so excited to be building @lunagraphHQ with @putrikarunian and team! I’ve always dreamed of a world where design could be the actual source of truth. Design-forward orgs I worked with would say the same thing but it was never really possible. It was more a reflection of the guiding principle than anything else. So more than “source of truth” I really mean design is the “source of vision." What's changed now is the cost of translating that vision into "truth." It continues to get easier every day to create code and it's also getting easier to build systems that ensure that code is high quality. And I have every reason to believe that trend is going to continue since people are highly motivated to solve the challenge and it's a verifiable problem. I think our historical focus on "source of truth" is a stopgap for the the real problem which has been translating intention. I'm working for a future where anyone who wants to be a builder, whether they lean more design, dev, or product can communicate their intention with whatever tool they want and it is seamlessly translated into the final product. At Lunagraph we're building the tool that we want. For us that means a mix of flexibility and ease of use. Flexibility meaning you can build your own tools, use any code library, etc right on the canvas. Ease of use meaning it's a cloud tool so you can share and collaborate with team members who aren't into the whole localhost thing. But it's just one way of doing things! I firmly believe in the new era of niche software. I think unicorn culture has distracted us from the real point of all of this. Making things people love. Builders want to code, prompt, draw, orchestrate, and a bunch of other "vision to truth" methods we haven't even thought of yet. And that's why I think it's such an exciting time to build for builders!
1
4
531
Putri Karunia retweeted
This is the fork moment in design! 🤘🏼👏🏼
1
1
92
This is the exact philosophy we have in mind when building @lunagraphHQ. I’m a designer and an engineer, running a startup, and running a design studio, so we’re very much on the same page. Let me explain: "letting AI create the environment for you" What we’re building at Lunagraph is a “programmable design canvas”. Exactly as you said, most of these tools are walled-gardens, if they don’t make a feature, you can’t build the experience. If Figma didn’t build motion, you can’t do motion design. In Lunagraph, you can build any experience that you can build with code, make your own controls, handles, anything you need. You can use any React package, like three.js, or motion dev, and cook without waiting for a feature release. You can make a metallic 3d card with knobs for roughness, metallic-ness, and handles for lighting and for the svg logo. You can literally build Lunagraph inside Lunagraph. We are essentially here so you don’t have to remake these primitives every time. PLUS we’re also building the best UX to work on this programmable canvas with your own agents. And now let’s talk about “source of truth” I think everyone has been wrongly fixated on this. Yes what’s in prod is what ships. But what about the intention? Say you’re redesigning an app, or making a new feature: there’s this point in time where there are 2 truths, by definition: > Your intended design is the intended truth > Your current prod is the current truth Eventually you want both to be the same, the intention implemented in the code. But in this point in time, there are these 2 states. So where should the design intent live, for that period of time when it’s not yet implemented in the code? No, not *always* a PR. If you’re designing a new feature, and make a PR in the codebase, would you also be responsible to wire it up, make it truly work? Or would someone else do that part? If it’s someone else, I promise you as a dev making the implementation, I prefer I make the PR and grab your designs piece by piece instead of getting a huge PR I have to unravel and re-wire. And if it’s yourself, it’s so much nicer and more efficient to iterate on the design without your coding agent trying to make it work before you know how you want it to work. This is where Lunagraph comes in. It’s a place to do the big chunk of the design work, all the way to making a PR. - Explore, drawing board, discuss - Start formulating an intent - Make prototypes, test, refine - Iterate, share, get feedback - Finalize - Then convey your intention = to your coding agents, to devs, or to yourself. And yes it’s made of React, so when you “convey your intention” you can choose to go as precise as you want: - At 50% fidelity: you can share static designs and let your agent or your devs interpret the UX and flow - At 90% fidelity: you can build a component, complete with the UX, interaction, transition, states, and how it takes in data based on Typescript data type. - At 100% fidelity: you can implement it yourself and make a PR. We’re definitely making Lunagraph for design engineers who can utilize AI in designing to the max. Many of us are still exploring designing with code with AI, so me and @Riyvir are working hard on distilling our own workflows and hundreds of user feedback into tools anyone can use right away, and building the best way for teams to add their own tooling on the same canvas.
I honestly don't understand many new design tools. There are Pencil, Paper, Elyx, MagicPath, and many more launching each month. Great designers are behind them, and it feels like many people use them. But I feel so disconnected from their approach to design. Let me share my thoughts. They all have a middleman issue. What you design is not what you ship. We're in the age of AI. I want to see the exact behavior of my components, I want to see the exact "rendering"/"look" of my components. Why do I need a canvas that shows me just "designs"? We had that already in Figma for many years. Authors of those tools can argue with me, saying, "But we're much closer to the code than Figma. We use HTML/React or whatever to render your designs." Great, but it's not the same code anyway. From that issue comes another one, a lack of a single source of truth. Design lives in two places again. Users see the one that is built in code, while designers look at their versions on the canvas. Then you can tell me, "Come on, I'm a designer, not a developer. I need a canvas. Those apps give me a canvas." Do you know that you can ask AI to bring you a canvas into the actual project you're working on? "But building code is slow, I need something simpler just to quickly iterate on my design ideas." Again, what's the problem with asking your Claude/Codex to solve that thing for you? AI can stop running tests/linters/performance checks, or simply make some drafts on that canvas for you in plain HTML/CSS, exactly like those tools do. But if you want to do something more complicated, nothing can stop you. Which brings us to another point. Those are closed-source tools. I like to adapt my environment to my needs and my tasks. I don't want to wait anymore for companies to decide to prioritize or build something that's important to me, or support the AI client that someone uses (recent Figma drama). Software development has become cheap. Bringing any controls or canvases into your environment is not an issue if you need them. I still use Figma, more like a sketchpad or for some brand work, but I don't understand why I would want to switch to something else if those tools fundamentally have the same problem as Figma. For me, those tools still feel like they're made for designers who haven't figured out yet what AI is capable of. And I'm not talking about letting AI design instead of you. I'm talking about letting AI create the environment for you, which can be much more powerful and more efficient for the exact tasks that you or your team work on.
9
2
19
1,854
Example of card design (the handles are not a feature, it's user-made just for the card that's in the design)
Quiver's Arrow 2 on Lunagraph: engraved this SVG onto a 3D metal card with three.js right on the canvas
1
2
219
Side note: some objection may come from “What if my app is not on React?” We chose React as a language, like “English”. It’s the best way to convey your intention, because it’s widely used and understood by your coding agents. React has all the vocabulary and grammar needed to design most experience possible. So your intended behavior, states, UX, can be encoded in your design code, and easily translatable without loss to other frameworks. And of course, without waiting for us to release any feature 😉
81
Putri Karunia retweeted
there's a browser in Lunagraph you can drag things out of it✨
people keep telling me they don’t design from scratch. it starts from prod. so we make prod into a design layer: → ⌥-drag an element out of the live app → drop it on the canvas now prod is just designs: grab a piece, redesign it, try variations. sneak peek @lunagraphHQ 🌸
1
3
478
Putri Karunia retweeted
this is the way
people keep telling me they don’t design from scratch. it starts from prod. so we make prod into a design layer: → ⌥-drag an element out of the live app → drop it on the canvas now prod is just designs: grab a piece, redesign it, try variations. sneak peek @lunagraphHQ 🌸
2
1
6
634
Putri Karunia retweeted
people keep telling me they don’t design from scratch. it starts from prod. so we make prod into a design layer: → ⌥-drag an element out of the live app → drop it on the canvas now prod is just designs: grab a piece, redesign it, try variations. sneak peek @lunagraphHQ 🌸
7
1
52
3,233
Putri Karunia retweeted
Just tried making an illustration for the portfolio. Took quite some time. Made in @lunagraphHQ
5
2
34
2,046
Putri Karunia retweeted
"every time i jumped tools, my design drifted a little." an agency founder told me a third of his time goes to fixing designs that already looked right. his flow before: mobbin → claude design (html/css) → paper (html/css) → codex + claude rebuild it in react by the time it hit prod, it didn't look like the design & prototype he approved. his app runs on shadcn + untitled ui. so on @lunagraphHQ, he designs with those exact React components, all in one canvas: > design system > components > screens > prototypes and implementing to the codebase is just sending the same code to codex/claude. one truth from design to implementation. his words: "FINALLY there is a design tool in react that fixes these thorny translation/drift issues."
3
3
18
931
Putri Karunia retweeted
lunagraph was born between cities. nov, NYC: walking around brewing the idea. dec, HK: building between dim sum spots. jan, Tokyo: v1 used in prod for every design client I had. fewer hours at the desk means only what mattered got built. i closed X, ignored the hype, and just shipped. that's my kind of trip. today it's singapore :)
6
1
62
1,640
been on an "on & off" relationship with @WisprFlow starting to observe why: when someone else is talking in the background, my brain just cannot speak... when i try to speak my brain tunes in to the person talking but i can type, no problem anyone else having this issue?
1
3
413
Putri Karunia retweeted
For years designers made pictures of a product and engineers turned them into code AI changed that. Designers can now build with code themselves But their work is scattered. One of @putrikarunian users told her he now spends only about 10% of his time in Figma. The rest is split across code, prototypes and code changes for engineers to review The AI coding tools also work one step at a time. Ask for something, get something back, ask again Design doesn't work that way. You try a few ideas side by side, keep the best and mix in parts of another Putri built @lunagraphHQ for this. It's a design canvas where everything you place on it is real code You explore the way designers always have. Then click through the result to see how it actually works and share it with your team as a link Engineers get working code instead of a picture. They take the component they need and add it to the product "Design with code, on your familiar design canvas" Design, explore, and hand off the whole experience. States, interactions, and flows, all as React code, ready for your engineers or your coding agents. 🎙️ @putrikarunian, CEO & Founder, @lunagraphHQ on Fondo @thestartpod w/ Guest Host, @gracegongGG, Founder, Smart Venture Media 01:42 Why the design canvas itself is made of code 03:12 Where designers work now that Figma isn't home 03:46 Why design exploration isn't linear and coding agents are 05:19 How @lunagraphHQ differs from Lovable and Claude Design 06:21 Why a chat box can't describe a shadow 08:21 Why designers don't always need to open production PRs 09:16 Handing engineers working code instead of static designs 10:26 Building for the one-designer startup 10:55 Using @lunagraphHQ daily on paying client work 11:25 Bring your own agent and pricing
7
6
37
10,019
Putri Karunia retweeted
Animating tabs design x agent loader with Opus 5.5 🌸 on @lunagraphHQ having all code for my designs, components, animation, prototype on the same canvas = no drift from jumping between tools
3
3
22
1,075