I recently pushed a major update to this website’s design system, dubbing it “Renaissance Technical.”
The goal was specific: avoid the generic “SaaS” look and the overly harsh “Brutalist” trend. I wanted something that felt like Da Vinci’s Notebook—a blend of classical humanism and mechanical precision. It sits at the intersection of the organic and the engineered.
The Design Philosophy
The core conflict in this design is Circle vs. Square:
- The Grid (Square): Layouts, cards, and dividers are rigid, schematic, and precise. They represent the “Engineered” side of my background.
- The Human (Circle): Buttons, avatars, and tags are perfect circles or pills. They represent the organic, human element interacting with the machine.
The Workflow: AI as Creative Partner
This redesign wasn’t just about CSS; it was an experiment in a new workflow using OpenCode as my harness.
1. Plan Mode & Ideation
I started by working with the Gemini Pro model in “Plan Mode.” We didn’t write a single line of code at first. Instead, we iterated on the vibe. I acted as the Creative Director, pitching abstract concepts (“Da Vinci,” “Drafting Table,” “Sonar”). The AI returned concrete art directions.
We went back and forth. I rejected the “Cyber” look. I rejected the “Landscape” look. We settled on “The Drafting Table”—technical schematics, compass arcs, and grid lines.
2. The Harness
Once the plan was set, I used OpenCode to execute. This is where the magic happens. I could describe a complex component (like the SVG background in the footer), and the system would build it.
3. Pro vs. Flash
I utilized a tiered approach to intelligence:
- Pro Model: Used for high-level reasoning, design decisions, and complex architectural changes.
- Subagents (Interns/Flash): Once the rules were established (e.g., “All buttons must be
rounded-full”), I offloaded the tedious implementation tasks to faster, cheaper subagents. They audited the codebase, fixed border radii, and standardized colors without me having to touch every file.
The “Creative Director” Role
This process highlighted a shift in how we build software. I wasn’t getting bogged down in the syntax of border-radius or z-index. I was making decisions.
- “Make the buttons circular.”
- “Change the footer to look like a blueprint.”
- “Add technical annotations (FIG 1.0) to every page.”
I acted as the conductor; the AI was the orchestra. This ability to quickly prototype, visualize, and iterate allows for a level of creative exploration that used to be too “expensive” (in terms of time) to justify for a personal blog.
What’s Next?
I intend to write more about this workflow. The ability to use AI to quickly prototype ideas is a game-changer, but it’s crucial to remember: the human makes the decisions.
I am the Creative Director. The AI is the tool. And together, we built something that feels uniquely me.