Ten pages. One token system. Shipped in React.
Migrating a Squarespace portfolio to a custom Framer site by designing a shared token architecture first, then implementing ten pages as React/TSX components with AI-assisted development.
Custom code components
AI-assisted dev
Live and published
~4 sessions
A Figma-only portfolio wasn't telling the right story.
Squarespace was limiting, not visually, but strategically. The roles I wanted required evidence of design-to-code fluency, systems thinking, and the ability to work across the design and engineering boundary. A static portfolio couldn't demonstrate any of that.
The deliberate choice: rebuild in Framer using custom React/TSX components instead of drag-and-drop defaults. Design the system first, then build the pages on top of it.
Token architecture before a single page was built.
Before writing any layout code, every visual primitive was defined as a shared JS object: color tokens, typography scales, border values. The rule was simple. If a value needed to be consistent across pages, it lived in the token block at the top of every file.
This is the same thinking that drives enterprise design systems. A brand color update propagates automatically. No hunting through ten files for the right shade of olive.
The token system also acted as a design constraint. Visual decisions had to be made once, explicitly. That discipline is what makes the site feel coherent without ever opening a style guide.
AI as code labor. Designer as decision-maker.
Every layout decision, every typographic call, every component hierarchy was mine. Claude handled the React/TSX execution. The distinction matters. This isn't "AI designed my portfolio." It's a documented, iterative workflow where the designer stays in the driver's seat.
The process ran across four sessions: preview in chat, give feedback, generate TSX, paste into Framer, publish, repeat. Real constraints surfaced along the way. Framer's compiler rejects TypeScript Record types, so inline JS objects became the convention across all ten files.
Knowing how to direct AI-assisted development, not just use it, is increasingly a senior skill on modern product teams.
What building your own product teaches you about design systems.
Tokens first, always.
Locking color and type before building pages is not overhead. It's the work. Every hour spent on the token system saved three hours of inconsistency fixes later. By the time the first page was built, every design decision had already been made.
Constraints are a gift.
Framer's compiler limits pushed better conventions: inline JS objects over TypeScript Record types, self-contained components over shared state. The output is more portable for it. Each TSX file can move to another React project without modification.
AI amplifies, not replaces.
The quality of AI output scales directly with the clarity of design decisions. Vague prompts produce vague code. Sharp design thinking produces sharp implementation. The bottleneck is never the AI. It's the precision of what you ask for.
Ship early, improve in phases.
Going live before imagery or mobile breakpoints were finished created real feedback loops. The site improved faster because it was real, not sitting in a Figma file. A live, imperfect product teaches you what a polished prototype never can.
