Show HN: I left Figma to build a diffusion-based UI design tool | Hacker News Reader

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

diffui.ai

80 pointsjjcm13 comments

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!

Open articleView on HN

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.

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!

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.

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.

Anthropic should buy you

The Tarot card example on here is so sick.

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

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.

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

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?

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.

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

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.

Reply on news.ycombinator.com