This is my own tool, diffui. Thanks, though I will say I spent like... 7 minutes on this. Feel free to completely lift the design or the implementation.
Not bad at all, and this is pretty consistent of what I've found from the current open source models. I haven't tried it with kimi 3 yet, that's on my todo.
Right now generation is entirely at-cost (0% margin). Once I finish my SOC2 I'm going to release a enterprise/team license, which I'll charge a fixed 50% margin for. Long term the goal is for those enterprise licenses to be the profit center and for individual accounts to drive growth.
At the moment I currently have around $600 of revenue on $1200 spend, but that's primarily because I'm subsidizing new accounts (each new account gets $5 to spend for free, which translates to around ~36 designs). I'm in the process of doing an angel round, so I can afford to operate at a bit of a loss during the growth stage.
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.
IMO what makes things awesome is human hours invested.
The ramen shop website above is pretty, but it's a veneer. It's not weird and awesome, it's just a representation of a site. I spent about... 7 minutes of my life making it. It's a tech demo, nothing more.
If someone actually poured their heart and soul into a vision for a cyberpunk themed ramen cart, and happened to use this because they didn't have the capabilities or funds to do a proper design, suddenly it becomes less of a veneer, and more just a component in the wider vision of that individual. Their human hours poured into the wider thing that's the business becomes what matters.
Ideally what AI does is it amplifies the hours we do pour into things that are weird and awesome, it doesn't replace them.
http://impeccable.style/ also just released their latest version which has some image->html conversion. They just released a couple days ago and haven't had a chance to try, but I suspect theirs is a bit more robust than mine for pure LLM instructions. Worth trying and comparing it with mine.
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.
This was just from a prompt "A cyberpunk themed ramen food cart website. Should feature menu, locations, and an ability to put in an order for pickup. Simple and clean website with angular cyberpunk microglyphs, pink/teal colors."
All of these are using a build skill which specifies rules for building it, requirements to create a pixel perfect implementation, and tooling to help in that process. Here's the build skill / instructions I pasted in to both of them:
> Create a web page implementation from the following instructions:
Here's another test of a cyberpunk ramen shop website.
One thing I've found LLMs have a lot of difficulty with is angular cuts / elements that aren't easily representable with CSS. Cyberpunk aesthetics are generally a great test of that, since they have a lot of microglyphs / window decoration.
Thoughts: It does a really, REALLY good job at these angular cuts / microglyphs. The responsiveness is off, but I'm very impressed at how well it did here. One way I think of it is "how close to a finished product did this get me?". Opus gets you like 90% there.
I agree the fable version looks nice - the rounded hero image for instance.
Opus though followed the source of truth better imo. The details are more present.
Fable filled in the gaps for things it wasn't able to do (ie in the design the hero image goes behind the nav), which resulted in a better looking page that was more divergent.
Note the buttons - for fable they're pill buttons, opus got the rounded rectangle nature of them. Opus' images are closer to the source of truth as well (both LLMs were provided with image gen capabilities for the assets).
Running more tests now, but preliminary results are saying this is indeed better than Fable in some areas. Crazy.
> especially with OpenAI making so much progress with the efficiency of their models
To be fair though, Sol tends to go off the rails sometimes. It's much less reliable than Fable in its outputs. It tends to be overzealous in its research/changes.
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.
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.
The voice activity detection alone here is compelling - very useful for doing things like highlighting a speaker who's transmitting in realtime. At that rate the impact on perf will be so minimal that you could easily run it in the browser across devices.
Working on diffui.ai - diffusion for UI design.
Formerly Figma, Atlassian, and Microsoft.
AMA about design tokens, webcomponents, and design systems!
+1 808 366 1708 [email protected]