How I Built This Site Using AI
What Worked, What Broke, and What I Didn't Expect
I rebuilt my personal website almost entirely with the help of AI tools. I approached it as an AI tool exploration across the full build process.
📝 Note: An expanded version of this article was published on Medium via Bootcamp with additional detail on the decision-making process.
1. The part AI didn't replace: Research & taste
I started with extensive research across personal websites and portfolio sites. Notion personal website templates turned out to be a useful source of inspiration, particularly for individual component patterns. Marketing portfolio examples were especially helpful for stylistic direction.
This phase was almost entirely manual: screenshots, comparisons, notes. The outcome was a clear set of structural and stylistic preferences that informed everything else.
2. Translating ideas into wireframes (with ChatGPT)
Once I had clear preferences from the research phase, I fed them to ChatGPT and started drilling into the specifics for my site. I used ChatGPT to:
- Test various approaches to section hierarchy and content organization
- Draft text-based wireframes that mapped out page structure
- Generate rough style mockups to visualize the direction
Through iteration, I landed on a warm, modern direction: soft neutrals, rounded edges, and a human-tech hybrid feel.
The output: text-based wireframes that became direct inputs for the site prototyping tool, plus rough visual mockups for my own reference.
3. Visual identity: the cartoonification experiment
I decided early to use an illustrated portrait instead of a photograph, aiming for a flat, editorial-style aesthetic with a New Yorker-inspired feel.
I tested Midjourney, DALL·E, Canva, and many tools from this AI cartoonizer roundup. Despite extensive prompt iteration (often with ChatGPT's help), results were inconsistent.
Artlist.io ultimately worked best, producing the closest match to what I had envisioned. I used it for the portrait and case study thumbnails to keep visual language consistent.
One limitation: Artlist (like most AI image tools) doesn't produce transparent PNGs, requiring post-processing in Photoshop.
4. Site prototyping with AI tools (and when things broke)
For prototyping, I used Magic Patterns, one of several AI prototyping tools I'd explored during Reforge's AI Productivity course (alongside Lovable, Bolt, v0).
Magic Patterns' strength is exploration, especially its Inspiration mode, which generates multiple design variations from the same inputs.
I fed it the wireframes and visual assets, then iterated extensively. The project reached around 80% complete.
Then on December 24th, Magic Patterns rolled out an update. Previously working prompts stopped producing usable results. I contacted support, got a rollback and extra credits, but issues persisted for days.
5. Tool switching, testing, and deployment
After multiple support exchanges, Magic Patterns eventually worked again. But at the time, thinking things might be broken for good, I moved the project to Claude Code, converting from React to PHP (based on advice from someone more technical).
I still used Magic Patterns for some design decisions, but completed implementation and final refinements in Claude. While testing across devices, I noticed several mobile issues that hadn't been obvious on the desktop. For instance, text overflowing containers in the Capabilities section or visual assets not rendering correctly on smaller screens.
Claude Code handled these fixes surprisingly well. In practice, it required little more than a screenshot and a short prompt describing the desired behavior.
And because Claude Code, similarly to many other AI-assisted coding tools, integrates with GitHub and hosting platforms, I could also iterate, test, and deploy directly from the same environment.
6. Final reflection
Building this site with AI clarified three things:
First: The tools are now powerful enough to enable work that would previously have required much deeper technical expertise or a few different contributors. A suite of specialized AI tools, each handling different parts of the project, can get you far.
Second: The same power that makes these tools so useful is also a weakness. Many AI-powered tools, especially LLM-based ones, are probabilistic systems. Their behavior can be unpredictable and can change unexpectedly due to underlying model updates, which then require adjustments to the prompt engineering layer and tool orchestration. I've written more about this distinction between probabilistic and deterministic systems in "It Looks Like ChatGPT Learned to Count. It Didn't."
Third: They do not remove the need for research, experimentation, judgment, or iteration. If you want something good and differentiated, you will spend significant time on your project regardless. Building my site with AI did not make the process short, but it made it more ambitious.
This site is the result of navigating all three.