WritingCerebrasCerebraspublished Jun 4, 2026seen Jun 26

Generating Beautiful Uis

Open original ↗

Captured source

source ↗
published Jun 4, 2026seen Jun 26captured Jun 27http 200method plain

Cerebras Skip to main content

Cerebras Announces First Quarter 2026 Results >>

May 08 2026 Generating Beautiful UIs Sarah Chieng

With contributions from Sherif Cherfa and Halley Chang There’s an intuitive skepticism we have toward AI-generated work. We see it clearly in writing, where the patterns have gotten familiar and punctuation (the em dash — ) has become a universal signal that AI has been used. Design has lagged behind writing, but it’s catching up. Recent models can produce better UIs, yet it still requires heavy hand-holding and prompt “band-aids.” Overall, AI-generated designs often lack that feeling of deep satisfaction, joy, or whimsy that human designers create. Basic prompts produce boring outputs Media theorist Marshall McLuhan is often credited for his beliefs on the co-evolution of humans and tools: “we shape our tools, and thereafter our tools shape us.” Although AI can create superficially “beautiful” designs, they’re often shallow. When you give a model a generic prompt, you get a generic output. When your intentions lack direction, so will the result. For example, here’s a basic prompt we used: "Hello! I want you to build me a website for my computer parts recommendation business, it should look nice, use dark mode." What we get is boring and predictable: Classic dark background Overuse of cards Side shadows on boxes Interfont Hero section with gradient text Feature section with three columns Classic footer with social icons that we never asked for

We see patterns in AI outputs much like we see patterns in writing. There are even guides, Signs of AI Writing that flag it. While testing generic prompts, we similarly developed a checklist of common AI-design “tells”: Everything becomes a dashboard There's a chronic let's make everything look like an AI SaaS dashboard even if it's not supposed to be one. That every single AI model seems to have. And even if you are trying to build a landing page for a bakery or a portfolio website, if you squint hard enough, you can almost always mistake the website for a dashboard.

And the reason is mostly statistical for why we constantly get SaaS dashboard specifically. A lot of the modern web and UI training data is heavily biased towards SaaS products, dashboards, component libraries, and startup landing pages Cards inside cards One of the most reliable, obnoxious tells. The AI wraps content in a card, then realizes it needs to organize content inside that card, so it adds more cards. The result is nested containers all the way down.

See the example prompt: ‘Build me an email client for children’

Over-coding and unwanted refactors Perhaps one of the most frustrating things is when your design is 99% of the way there and you need a small tweak. Ask for a simple button change and the AI refactors the entire component tree. Ask for a simple API call and it rewrites unrelated error handling or adds types you didn't ask for.

This is one area where fast and scoped models like Codex-Spark (1200 tokens/second on Cerebras) shine. It tends to do the specific thing and stop. The rest of the time, you'll need to be explicit:

Instruction-to-UI leakage One of the more embarrassing failure modes: implementation instructions end up as visible product copy. "Add a placeholder for the user's name here" shows up as literal placeholder text on the live page. It builds but looks wrong Technically, a lot of AI-generated UI works. It compiles, and runs, but something is off : misaligned spacing, bad mobile behavior, or incorrect components. If you ask it to duplicate a site you point it to, the output often looks like a bad screenshot from memory rather than an actual reconstruction. There's still a long ways to go from replacing the front-end designer, but a few really exciting advancements have made AI-generated beautiful UI possible. No composition sense The AI doesn't think about how elements relate to each other. It thinks about elements individually. The result is a pile of correct components with no compositional logic holding them together.

Despite these issues, meaningful advancements make AI-generated UI feel less like a gimmick and more like a viable starting point. What is different now? Faster generation means faster iteration. When a round-trip prompt to result takes 30 seconds instead of 3 minutes, you committed too early and corrected too late. Now, with systems like Codex-Spark running at ~1,200 tokens/sec on Cerebras, the loop tightens. You can probe, discard, and refine in quick succession. Vision models let you show, not just describe. Now your model can actually see what it's building and can use that updated information to self-iterate and better understand its progress. Better tooling around design systems. Tools like shadcn/ui, Figma MCP integrations, and standardized design tokens give models constraints to operate within. There's now actual infrastructure for giving AI something to work with rather than making it invent a design from scratch. Setting our intentions right from the start Whether you’re in a creative role or not, intention-setting matters when using AI tools to generate visuals. The most meaningful AI-assisted designs use AI to fill gaps in your skills and weaknesses and develop the projects that you want to create. We learned that rather than treating AI as a replacement for a designer or the entire design workflow (which creates regurgitated, devoid designs), AI’s full potential pops off when it’s used as an intermediary tool that elevates, reinterprets, and broadens the creative perspective . After all, design at the end of the day is another visual form of problem-solving . Here are some of the ways we’ve used AI to solve common design problems: Creating an embossing effect: Using FigmaMake to vibecode, to automate UI prototyping & create DIY aluminum embossing (@Designteamofone) . Historically, this has been a complex process. It would require you to change multiple different settings in Photoshop. In Figma/FigmaMake, you can prompt it in one go to achieve a similar effect!

Generating design mockups using software like Flora.ai : Mockups are very important for environmentally situating designs to look and feel realistic. Historically, creating a mockup involved downloading a Photoshop file from websites (such as Mockup World, Bendito Mockups, Mr. Mockup, etc) that specialize in creating mockup files that you would use to paste in your...

Excerpt shown — open the source for the full document.

Notability

notability 5.0/10

Substantive post on AI-generated UI without traction data.