How it’s made | Brad Ulrich

How it’s made

How it’s madeI designed and built this site with Claude Code. But that doesn’t mean Claude designed it. I brought a lot of the old website’s vibe and content along with me to start, and reshaped it over a few months of tweaking.I let Claude take the wheel on the code for this one. I modified a lot of the CSS rules and methods as we went, using Chrome Inspector to tweak and then feed values and screenshots back to Claude (so many screenshots).One of the things I miss about is the endless direction changes and copies that track the progression of your thinking and the places you pushed and explored. With AI, everything is a new version on top of the last one. So as I go, I take screenshots. Some to point out a bug, but a lot, like the ones below, just to document variations. I’d love to build a workflow that automates that step with each major change. But for now it’s just dozens of screenshots in a folder on my computer.Tools, Toggles & OverlaysEvery time I build something with AI, I have it build me little tools to explore options live on the site. Actually I’ve done this for years in front-end development to compare options and simulate states, but it’s much easier to tell Claude the states I need now.For this site, a font picker (F), a color variable picker (C), a grid overlay (G), and some other one-off toggles to compare options live in various sections. I love this way of working. It’s like building my own Figma controls. I tried using DialKit for this in previous projects, but I found adding my own tools on the fly was faster and more specific to my needs.TimelineBelow is a timeline of what I documented of my design process in screenshots so far. I’m sure I’ll continue to tinker on this for years to come, as is my custom. But I’ll stop the timeline here for now, now that the site is live.

Apr 16Starting point from first prompt, deciding what content types to keep from the old site.

Apr 17Playing with projects as a timeline and working on the 3D phone model.

May 3Going from a big tumblr list of inspiration to a literal pile of photos. Tweaking the layout, randomization and layering interactions.

Apparently paused for the summer…

Sep 9Do I need to have my name in the top left? Is this ChatGPT stippled portrait too cringe? (Yes)

Sep 14Added a grid overlay to explore layouts.

Sep 16Adding a nav vs. just a homepage. Still torn on that one.

Sep 17Start of the about “Ask me about” grid.

Sep 24Took the pic out of the header and spent way too much time trying to zhuzh it up. Gradients, dot grid, dithering shader crap. Ended up just using the text.

Sep 26Lil icon guy interactions. Again, way too much time on this, but so fun.

Sep 30Trying Claude Design to explore shaders for the header again. Some wild visuals, but all too noisy, didn’t add anything that wouldn’t just read as AI slop.

Oct 6Original project layout when I launched the site. Realized it relied too much on hover interactions to preview projects. Changed to a scroll with an optional side nav to make sure you see everything without a hover or click.

Oct 9More project layout explorations. Built 4 versions and a toggle to switch between them quickly to compare.

Oct 10More project layout tests. And the mega monitor test.

Oct 14Color backgrounds for the app phone projects? Still might add this.

Oct 16More icon guy exploration. He’s 3D now. Can’t decide if it’s better than the 2D version yet. You can try both in his menu.

Oct 17My very fancy mobile testing process of scribbling markup on top of dozens of iPhone screenshots.