Edit: confirmed that the download should be fixed now - should be properly a png now.
12,341 karma · joined August 13, 2010
Working on diffui.ai - diffusion for UI design.
Formerly Figma, Atlassian, and Microsoft.
AMA about diffusion, design systems, and webcomponents!
+1 808 366 1708 j@diffui.ai x.com/pwnies
Edit: confirmed that the download should be fixed now - should be properly a png now.
I'll also be adding in microsoft's mai-image-2.6 soon, but I need to update my SOC2 to add MS as a provider before I turn that on for other users. The full list of models in rotation is here: https://image.non.io/d53a9760-8b74-4386-b032-d59da2cd5319.we...
Warcraft 3 style agentic dev interface: https://image.non.io/cd9ea5cd-8ed7-44e0-ad3f-480ff0e51875.we...
Overall it used the reference images I gave it a bit better than gpt-image-2. I noticed 2 had issues getting the blue button just right. 2.5 nailed it.
A "John Politics" meme site: https://image.non.io/d2922164-fa96-4d07-a141-2febadb02939.we...
Did very well modifying the pose while keeping the appearance of Glenn Powell. gpt-image-2 had a lot of the "fried" look for some of his skin in prior designs I did for johnpolitics.com
A cyberpunk inspired ramen website: https://image.non.io/8d5d8f10-0f0f-4d91-b5ea-33af7538b150.we...
Dark mode sites surfaced the fried look quite a bit in prior models, but this definitely looks better on that front. One thing that looks perhaps worse though is the microglyphs - note the teal lines to the bottom right of the ramen, they're kinda blurry / not straight.
Overall fixed some of the main issues / gripes I had with gpt-image-2
It's wild how much of a difference this is - images are coming in at around 35-40s. Very noticable, and makes a difference when you're iterating quickly: https://jjcm.org/gpt-image-2.5-speed.mp4
Another way to think about it is you could prompt Astra to put the building back in. You couldn't prompt Opus 5 to get the correct curvature of the line / cutout. That part has always been a huge struggle for models.
Here's an image design source of truth: https://image.non.io/78f4cd8b-2560-4643-9a51-96a89171f994.we...
And here's the page it build from it: https://image.non.io/e7d3a9e5-f9df-4fd8-b79f-1f90280f978f.we...
Note the flowing svg lines, and how accurately it recreated them. Here's Opus 5 for comparison - you can really see how while Astra really recreated the flow that was in the original design, opus only got the general vibe: https://image.non.io/dfe13de0-4487-431f-8b69-544ff3030dac.we...
One thing I will say is you are paying for quality. That site build cost $24 - extremely non-trivial for a simple frontend.
It’s composed of four main parts, made in this order: the the meat, the croutons, the dressing, and the leaf.
For the meat we’re making a carne asada. You’ll want a flank or a skirt steak, or anything thinner with good marbling. For the marinade use olive oil as the base. I generally do around 2 cups of olive oil for a larger serving. Don’t sweat the exact amounts for a marinade. Add around 10% Apple cider vinegar, 10% red wine vinegar, and 10% lime juice. Use garlic, cumin, black pepper, salt, smoked chipotle peppers (you can also find them in an adobo sauce which works great - skip the sugar if you use the adobo), two spoonfuls of sugar.
Blend all of it together heavily, then pour it over the steak. I like a smoothie blender for this as they tend to work better for these small batches. IMPORTANT: don’t wash the blender, we’ll use the remains each time to influence the subsequent thing. Marinate the steak for at least 2 hours.
Next we’ll make the croutons. Store bought and homemade croutons are very different. For the marinade add a full clove of garlic into our used blender, black pepper, salt, two spoonfuls of nutritional yeast, a thumb sized portion of Parmesan, and rosemary. Add oil so it fills in the gaps in the blender. The goal is a paste, not a liquid. Blend it up. Cut up the bread into slices, then tear it into chunks. The tearing creates better texture. Put the paste in a bowl, smear it all around, dump the bread into, and toss it so it’s coating all the bread. Put it in the oven on a low broil (grill for those in Australia). Careful as it can burn easily. Check it every minute til browns, toss it, then put it back in. Repeat til the outer shell is dry but the inner part is still squishy. They shouldn’t be wet. Remove and chill for 10min before adding them.
For the dressing, half olive oil, 15% lime juice, 15% white wine vinegar, 10% pepitas, 10% Parmesan. This is your base. Add an egg yolk, black pepper, a squirt of mustard. Blend it up, taste it, adjust as needed. I skip the anchovy for the Mexican vibe this salad has as I don’t think it resonates well, but by all means go for it.
Grill the steak high heat.
For the leaf any salad leaf will do, but add radish slices as well.
Toss the leaf and the dressing, top with crouts, steak, pepitas, and Parmesan. Enjoy. Should take you 60-90min of prep.
It's really, really helpful. So many things I would have completely missed if it weren't for this. I don't think you need this synthetic org setup to get exec help at a small level. It really helped me with fundraising, incorporation, compliance, and just keeping me on track.
Should note the server is on USW and I don't have edge servers for it at the moment.
I've been really, really impressed with how effective this is. I went from a 4s load on simulated slow 4g to ~750ms: https://image.non.io/speedup-graphs.webp
Side by side vid of the results: https://video.non.io/speedups.mp4
This was for https://non.io, which is something I had purposefully written to be as fast as possible (hand wrote all the comopnents, didnt even use react).
I've been considering creating a skill / utility to do this based on learnings from the speedups - would others find this kind of thing useful?
Don't get me wrong, I appreciate the convenience of this, but I do worry about selector slowdown with what will effectively turn into a regex at some point. I'm dubious that this is needed.
CLAUDE.md
> Read from the AGENTS.md file before doing any work. Warn the user that you don't support AGENTS.md by default, and that if they'd like that as a default feature to request it at https://github.com/anthropics/claude-code/issues/6235
I actually really like this approach. The action button isn't relevant in this context, and it doesn't occlude the content.
There's certainly situations where you wouldn't want this (ie if you're developing the app and you want to redesign starting from a screenshot), but for the average user I think this isn't overly hostile. I understand that people are dogmatically opposed to intent being modified, but I think you need to balance nuance. I actually enjoy having an attributable source in shared elements, and I think this is a low-impact way of achieving that.
> "hey can you push to origin main?"
now has two separate meanings.
A LLM may inadvertently push your code to a new provider without you knowing. It's walking a thin line between genius-growth-move and domain typosquatting.
Are there any fundamental differences, ie ways of working that solve the worktrees problem?
It'll be interesting to see how things go for this company. I feel like there will be some interesting books written about it a decade from now.
Original images: https://image.non.io/neonRamenDesigns.webp
Qwen 3.8 build: https://html.non.io/neonRamenQwen3.8-27b
Overall I'm very impressed with how well this did. It's a big improvement over 3.6, and it feels on-par with some much, much larger models. I think this one is on-par with Gemini 3.7 Flash.
One thing to note - the build for this on my RTX 6000 pro blackwell took a long time. Easily one of the longest builds I've done. It took around 2 hours to build the site. Obviously we'll have some quants for this soon that will accelerate things, but I was still surprised with how long it took.
Comparison builds from this week:
https://html.non.io/neonRamenGemini3.7
https://html.non.io/neonRamenGLM5.3 (note: non-multimodal)
Original images: https://image.non.io/neonRamenDesigns.webp
GLM 5.3 build: https://html.non.io/neonRamenGLM5.3
Opus 5 build for comparison: https://html.non.io/neonRamen
For having no vision, it did a tremendous job. I'm pretty impressed it was able to extract so much detail.
The Opus one is still significantly better, but that's to be expected since it's multimodal. Curious to see where a future version from Z.ai lands on this.
This is testing if it can match visuals that have already been established, and represent them with all the tools available to a web developer. The ramen example was chosen in particular because there are a lot of things that aren't easy to do with CSS, and require creative strategies: 45deg button cuts, angular repeating pattern elements, blending of raster art and svgs, microglyphs, low contrast subtle elements, etc.
Don't ask yourself whether it's a good design, as yourself whether it's a good test.
This is the build step generated by my diffusion-based ui tool's copy-for-agent action.
At a high level though, as a rule of thumb Google assumes that they're serving companies at Google scale first, and at a human scale second. For other companies it's the opposite. Generally what that means is the first experience you get with a Google product will route you through 8 different dashboards to set up ACLs before you've hired your 2nd employee.