:::toc
- Introduction → Getting started
- Orchestrating 101 → Orchestrating AI
- Anchoring the aesthetic → Anchoring the aesthetic
- Lodging supply
- Evaluating Timed-Entry → Evaluation
:::
Introduction
If you’re anything like me, you are feeling pretty overwhelmed these days by all of the tools and techniques being pitched as the future of design. Or the death of design? Personally, I find it exhausted.
So when I set out to update my site, I decided to simply go about it from scratch and learn along the way. If you’re thinking of doing the same:
Just go for it.
Seriously. You will be astonished by how quickly you climb up the first cliff, and then the next and the next. There are steep learning curves in AI, and they are surprisingly surmountable. The worst thing you can do is sit below them thinking they are just too hard or technical to attempt.
Orchestrating 101
When I first started out, it was common for designers to prototype in code. Overtime though, the complications of new frameworks and devtools became too much to keep on top of. Until now.
Just shy of 100% of the code for this site was written by AI, with me contributing a trivial amount of small adjustments and CSS where it was efficient to step in. That’s mindblowing! I’ll save details for how I harness AI for a later post, but at a high level
I used Claude for this project, but everything below works with Codex and other models as well. Personally, I prefer using Claude over Codex for exploratory work largely so I can view its underlying reasoning (select control+o while processing). Still, Codex is great for certain tasks, and honestly you should play with both (and more.)
At this point, I have a pretty advanced personal workflow that involves multi-session management, agent roles and orchestration, and decently strong memory compaction and review skills. If any of that sounds like Greek, don’t panic!
I ask AI to explain technical details to me all the time when I run up against something I don’t understand. Here’s an example of how you might get it to give you a primer on using git to manage your work:
I’m building a personal website and just getting started with Claude/Codex. Make me a micro-site, targeted at a novice, non-technical audience, explaining best-practices to get started. Cover setting up my project (e.g. init Claude), git, worktrees, deploying my work, etc. Help me get 10x better in 10 minutes with specific examples of what to do, and checklists I can return to (along with explanations in plain english about each step).
The same is true if you get stuck. If it hits you up with a technical step, just tell it to run the command. Don’t fret over your comfort level up-front. You’ll be amazed by how quickly your fluency about how agents work (and sometimes don’t work) grows.
Note: I was getting pretty comfortable working with sub-agent orchestration, skills, hooks, etc but I kept getting hung up when I ran into something I didn't understand. I snapped out of this when I was sitting with a developer whose AI was anchoring on an approach that kept creating errors or work for us, and he simply typed bruh just do it. Lo and behold, the agent changed its approach and we moved forward. Embrace the weirdness.
Session management in practice
Before anchoring on a direction, I let myself wander, grabbing screenshots into a Figjam and exploring my archive of references in Are.na. I kept coming back to Alantrotter’s seminal site. It’s so interesting how engaging it feels despite its simplicity.
Researching Alan’s site led me to the concept of Telescopic Text, a browser experiment dating back to 2008. I liked the concept of this interaction style, but I had also started to explore the Nouveau Rebus pattern, so I knew I wanted to have some form of media embedded in the expanded text.
I started to play around with building something similar myself with my rudimentary knowledge of html and javascript, and quickly realized, if I wanted to include interaction, it would be really hard to build.
Shims save you time
Study the dynamics of Telescopic Text and build me a simple workshop where I can create something similar for myself: source on the left, preview on the right. Allow me to create different versions so I can explore without losing my work. Enable syntax for formatting, components (to be defined later), etc and connect it to my index page so I can see what it looks like live.
I had no idea where I would land when I started, but I had a general direction for where I wanted to be. From there, I kept adding features until it met my needs: new components, new syntax, etc. AI was there to do the work, but I was directing it. It’s primary role was removing my technical handicap so I had the full toolset of code at my disposal.
When you’re sitting down and trying this yourself, start small. Build the most basic version of the thing you have in mind, and then add functionality as needed. For example, when I wanted it to create the slot component, I prompted it something like this:
Come up for a syntax for advanced components, and then define this one: render a word like a slot machine or a train ticker. When you click on it, it rotates, locking one letter into place at a time. Use monospace font on a dark background and add a deep drop shadow.
Later, once I had nailed down the animation, I had Claude tell me how long it lasted and then prompted ElevenLabs for a good sound effect, which I gave back to Claude to implement. “bruh just do it” indeed.
@@SLOT@@
One-shot styles can be helpful for early exploration, but every style carries with it unseen tokens that will make their way into the final work. When working off a try having the AI describe the reference first, and have it create a reference style sheet. Only then have it apply the stylesheet to your work, ensuring the outcome reflects your intent without unconscious artifacts.
