Built With
AI

In 2026, AI tools have matured beyond novelty into genuine creative partners. As a product designer, I wanted to explore what happens when you treat AI not as a replacement for design thinking, but as an amplifier of it.

I set out to build my portfolio from scratch using Claude Code (Anthropic's AI coding assistant) and Figma MCP (Model Context Protocol for design-to-code workflows) — following best practices at every step.

The goal wasn't to see if AI could build a portfolio. It was to see if AI could help me build a better one, faster — without sacrificing craft.

This case study documents the process, the decisions, the surprises, and what I learned about the future of design-engineering collaboration.

I intentionally kept the stack minimal. No React, no build tools, no frameworks. Just HTML, CSS, and JavaScript — the fundamental building blocks of the web. Here's what powered the workflow:

Working with AI isn't about typing "make me a portfolio" and watching magic happen. It's a conversation — iterative, directional, and deeply collaborative. Here's how each phase unfolded:

AI-assisted design and development is still new territory. Through this project, I developed a set of principles that made the collaboration genuinely productive:

1. Be the creative director, not the typist.

The best results came when I focused on what and why, not how. Instead of dictating CSS properties, I described the feeling I wanted: "make it feel like a gallery opening" or "surprise me with something unexpected." The AI's solutions were often more creative than what I'd have written manually.

2. Iterate in conversation, not in isolation.

Each design decision was a dialogue. I'd describe a direction, review the output, and refine. This back-and-forth mirrors how I collaborate with engineers at Manulife — but compressed from days into minutes.

3. Maintain a living design document.

The CLAUDE.md file became the project's source of truth — tracking design tokens, conventions, changelogs, and Figma publish history. This persistence across sessions meant the AI always had full context, eliminating the "starting over" problem.

4. Use Figma MCP as the quality gate.

Capturing code output back into Figma created a natural review checkpoint. Seeing the design in Figma — where I think as a designer, not a developer — revealed issues I'd miss in the browser.

5. Don't over-engineer.

One of Claude's best qualities was restraint. No unnecessary frameworks, no premature abstractions. A single HTML file with embedded styles. The simplest solution that achieves the goal — a principle that applies to design and code equally.

The Figma MCP server was the most surprising tool in this workflow. Here's how it worked:

• Live capture: With one command, the running localhost page was captured and converted into editable Figma layers — not a screenshot, but actual vector objects with text, colors, and layout preserved.
• Design review: Each capture went to the same Figma file, creating a visual timeline of the portfolio's evolution from initial concept to final design.
• Design-to-code: The MCP server also works in reverse — reading Figma designs and generating code. This creates a true bidirectional workflow between design and development.
• Component mapping: Code Connect mappings linked Figma components to their code implementations, maintaining consistency between design and production.

The portfolio went through three distinct visual concepts — each a dramatic departure from the last:

Concept 1: "Structured Warmth"
The initial direction. Dark theme with warm coral accent (#FF7A5C), Space Grotesk + Inter typography, rounded cards with 3D tilt effects, aurora gradient background. Professional and polished — a safe, solid foundation.

Concept 2: "Structured Warmth, Elevated"
Same visual language, but with 2026 interaction trends: scroll-reactive kinetic typography, snap-scroll sections, SVG wave dividers with mouse proximity effects, section dot navigation, and a personality-driven footer.

Concept 3: "NEON VOID"
A complete departure. Pure black, sharp edges, cyberpunk neon palette, film grain texture, glitch animations, Unbounded display font, editorial magazine layout. Born from a single prompt: "Surprise me. Go crazy."

This project convinced me that AI-assisted design isn't about replacing designers. It's about removing the friction between thinking and making.

As a design lead, I spend most of my time on strategy, systems thinking, and team mentorship. The actual pixel-pushing and code-writing often feels like a bottleneck between idea and execution. AI tools like Claude Code collapse that gap.

But the human elements remain essential: taste, judgment, creative direction, and knowing what "good" looks like. The AI doesn't know your brand. It doesn't know your users. It doesn't know which rules to break. That's still — and will always be — the designer's job.

What changes is velocity. What changes is the breadth of exploration possible in a single session. What changes is the accessibility of code as a design medium.

The future of design isn't AI or human. It's AI and human, working in conversation.