Show HN: I left Figma to build a diffusion-based UI design tool

Posted by jjcm 3 days ago

Counter43Comment12OpenOriginal

Hey hn, this has been something I've been working on for the last few months and is finally robust enough to really show off.

I've been pretty tired with the design outputs of LLMs for a while, and I've always thought diffusion offered much more creative / on brand design outputs, even before they were able to render text.

I had enough conviction for this to leave my role over at Figma to build Diffui. The goal is to allow for you to design your full web app as quickly as possible, in a figma-like interface, and then hand that off to an agent to build. The page shows some interactive examples. Happy to be an open book here and chat about the approach, the process, etc!

Comments

Comment by adambb 8 hours ago

Liking this concept - definitely seems to have more design freedom and ability to iterate than say Claude Design and at a lower price (well it doesn't blow through it's entire "token budget" after 3 prompts anyhow!)

The "copy agent prompt" feature has what looks like a thorough prompt for the implementation, that can call back to DiffUI to grab assets and make SVGs and other things a FE dev would bug a designer for - nice touch!

Comment by jjcm 7 hours ago

Appreciate the kind words.

Re copy for agent, I originally had a build step that was build into diffui itself, but what I found was that:

1. People wanted their own agent with its own skills/extensions to do the work

2. People wanted to build in their own codebase / style

The copy for agent was a way to allow for that. I do have a MCP as well, but I find I actually really enjoy the process of doing visual exploration on the canvas first, then handing it off to an agent after.

Comment by adambb 3 hours ago

Agree with both points, at least for folks who already have that infra (which I do). Made it much simpler than trying to "extract" things out of a tool that wanted to do everything.

Comment by btown 9 hours ago

This is really cool! What are you using for screenshot animation btw?

Comment by jjcm 9 hours ago

For which segment? The top one is just three vids I took of different builds I had, the lower ones which show the UI actually working are pure html/js/css. Some elements of them are actually interactive - ie you can switch the options in the first walkthrough demo.

For each of them I just told an agent to extract the actual working app logic into a narrower / more rigid flow that automatically does each step, and to animate the cursor.

Comment by capnjngl 3 days ago

Something that's not mentioned here is that for design agencies who work as multiple clients, the app has the ability to save and work with multiple brand profiles. You can upload a bunch of screenshots of examples of the brand's design language - from their app or website or ads or whatever - and have Diffui make a brand guide just based on that, and then any future designs are influenced by that brand guide. Pretty neat little trick.

Comment by dbreunig 3 days ago

I got an early tip on this and used it to build a brand mood board and it crushed previous attempts with Claude. Highly recommend.

Comment by grahac 3 days ago

The Tarot card example on here is so sick.

Comment by jjcm 3 days ago

Thank you! That effect is easier than you'd think. Normal maps/depth maps are actually fairly easy to generate via diffusion models. Once I had the designs for the tarot site in diffui, I just copied the build plan, pasted it into claude, and asked it to "generate normal/depth/roughness maps for each of the card designs and dynamically light and displace them based on the mouse position."

The build plan has tooling built in to generate these. Under the hood the model I'm routing to is Fal.ai's Patina model, which does a fantastic job at creating maps.

File is here btw if you want to explore: https://diffui.ai/app/canvas/be49d1a3-df57-4c61-9305-4aef472...

Comment by lurkyniko 3 days ago

I had this redesign my new landing page. Excited to see how this develops

Comment by cacio-e-pepe 3 days ago

Okay so the diffusion model generates image assets, and you iterate on those, and then another model turns your favorites into code, is that right?

Comment by jjcm 3 days ago

Exactly right. You design with the diffusion model, then hand those designs off to an agent to implement.

It's a lot like having an architect create plans for you before handing it off to a builder. In my (obv biased) experience, you end up getting better/more creative results with this approach. You're using the best model for the job at each specific task, ie a diffusion model as the designer, and a LLM as the engineer.

Comment by manianaai 1 day ago

[flagged]