// Build Log

How Delightful! I Took OpenAI's Advice About Front End Design

I turned OpenAI's frontend design guide into a simple tool that helps translate the design language stuck in your head into effective prompts.

I kept hitting the same wall.

Every time I sat down to build a front end for one of my projects, the result was fine. Functional. And completely forgettable. The same safe layouts, the same card grids, the same muted gradients that every AI spits out when you say “make it modern.”

The problem was not the tools. The problem was me. I could see what I wanted in my head but I did not have the vocabulary to say it out loud. “Make it premium” is not a design brief. “Make it sleek” is not direction. Without the right language, every prompt I wrote came back generic.

Then OpenAI published this article on designing delightful frontends and something clicked. It laid out the terminology I was missing: visual thesis, composition, density, surface, motion. Real language for real design decisions.

So I turned it into something I could use every day. The Visual Design Helper is a field guide and brief builder that teaches the vocabulary and helps you assemble it into prompts. Pick your composition, your typography direction, your motion style, your anti-goals, and it generates a structured brief you can hand to any AI.

I built this mostly for myself. But if you have ever stared at a screen knowing exactly what you want and having absolutely no idea how to ask for it, this might help. Seeing things clearly in your head but not being able to verbalize them is a unique form of torture. I hope this breaks the bonds on your brain and unleashes your creativity.

Try it with your favorite AI.

// interactive build
Visual Design Helper
HTMLCSSVanilla JS
● active
interact with this build _
click to explore