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

diffui.ai

35 points by jjcm 3 days ago

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!

adambb 27 minutes 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!

btown 1 hour ago

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

  • jjcm 1 hour 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.

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.

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.

grahac 3 days ago

The Tarot card example on here is so sick.

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

lurkyniko 3 days ago

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

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?

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