I can't believe how good Claude 4 is at generating responsive UI.

In case you're confused, this is a demo of UIs I created with Aura. I made over 470 designs with Claude 4 that you can remix or download for free: So why did I build Aura? Well, most ui generation tools out there are developer first. This is design-first. I vibe coded a really fun design tool in it where you can quickly edit visually, with unique features like live preview, designer fonts, unsplash images, drag and drop, 3d transforms, effects, etc. Oh and there's code mode where you can preview the design while vs-coding. For designers, you can click in the preview to find the code of the text/buttons/images, which is insanely useful. It's free to try. We just increased the pricing, but dm me if you want the old price. 15/m -> 10/m.

Okay, many are asking how to get to SUPER nice designs. Here's a trick I use and it works on any design: It's done with a screenshot of a layout, pasted into Aura. I already embedded a ton of prompting into Aura for image to HTML. BUT you can also use ChatGPT's o3 (paid), which has the best vision, with this prompt: "Generate the HTML with TailwindCSS and javascript and use lucide icons. In the end, create a downloadable html file. Make sure to respect the fonts, the rounded corners, containers, padding, design systems. In the style of {FAV SITES} (don't mention names). Checkboxes, sliders, dropdowns, toggles should be custom. Adapt all texts for {YOUR APP}: {APP DESC}. Be extremely accurate with fonts. " Can add more design details where you feel AI is lacking. Avoid illustrations, tons of effects, animations -- those won't work. You can add them later in Aura as an asset. Focus on simple, effective layouts, grids, typography, info architecture, responsive design, etc. Save HTML, view them until you're satisfied. Don't pay attention to broken images, bad icons, these can be fixed easily. KEEP good layouts with good typography and colors. That's the hardest to edit. As a designer, you want to focus on your creativity, post-gen, not on fighting with auto layout. Such as picking the right font weight, images, avatars, copy, adding animations, effects, etc. I like the 90% ai/10% human rule. With a strong html as attachment, Aura will generate a really good result. From there, use Design mode to fix texts, images, colors. Use the Prompt builder to add animation. Use the Code Mode for editing code/adding new code, new buttons, links etc. Knowing Tailwind will help a ton. Yep, if you know HTML, you can build an entire landing page in Aura. No React needed, just a single file.

I still haven’t found a flawless solution for achieving pixel-perfect UI with a custom design system (w/ or without Claud). The best approach so far is to use a custom MCP to extract the Figma JSON file, strip out unnecessary data (about 80% is usually irrelevant), and then create a well-defined translation context. This method lets me solve roughly 90% of the UI in a deterministic way.

There has to be a less painful way.

Wait, what?!

It's that good uh

what software is shown here?

this is - it's a ton of fun to play with the ui

@callme_TOC

have been using claude for a long time now, from 3.7 they have really won the UI game.