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

Join the discussion

• Hacker News
• This is really cool! What are you using for screenshot animation btw?
  by btown
• 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.

  by jjcm
• 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?
  by cacio-e-pepe
• 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.

  by jjcm
• I had this redesign my new landing page. Excited to see how this develops
  by lurkyniko
• The Tarot card example on here is so sick.
  by grahac
• 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...

  by jjcm
• 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.
  by dbreunig
• 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.
  by capnjngl
• 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!

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

  by jjcm