From Figma to deployed site with AI
Overview
For years, designers have relied on engineering handoffs to bring ideas to life. With the rise of AI coding agents, that boundary is changing.
This project wasn't about seeing whether AI could generate code. It was about exploring a bigger question:
Can product designers use AI to own the journey from idea to shipped product without becoming full-time software engineers?
To answer that, I rebuilt my own portfolio from scratch by directing AI through design specifications, interaction models, structured prompts, and iterative reviews until it matched a premium Figma design and was deployed to production.
The website became both the experiment and the evidence.
The problem
Most AI discussions focus on productivity. I was more interested in capability. Rather than asking, "Can AI make me faster?" I asked, "Can AI expand what I'm capable of building?"
The answer wasn't simply "yes." It fundamentally changed how I think about design.
Instead of ending my process at high-fidelity mockups, I found myself thinking about interaction architecture, implementation constraints, deployment, performance, and motion systems—areas traditionally owned by engineering.
My role
I owned the Figma design, content architecture, interaction model, and motion timing. Cursor agents handled high-volume implementation; I directed through project rules, Figma node references and it scoped the entire project PRs.
Workflow
One of the biggest takeaways from this project was that AI changes the designer's role.
Instead of writing every line of code, I spent my time:
The work shifted from creating artifacts to directing systems.
Design lifecycle
This project also helped me understand where AI creates the most value across the design lifecycle.
| Stage | Traditional Workflow | AI-Assisted Workflow |
|---|---|---|
| Exploration | Research, moodboards | Faster concept generation and exploration |
| Design | Figma | Figma + implementation-aware thinking |
| Specification | Static handoff | Structured prompts, node references, design constraints |
| Development | Engineering handoff | Collaborative implementation with AI |
| QA | Manual review | Rapid iteration with AI while maintaining design quality |
| Shipping | Engineering-owned | Designer-led deployment and refinement |
Instead of replacing any stage, AI became a collaborator throughout the process.
Execution
AI consistently accelerated:
Once the problem was clearly defined, implementation became remarkably fast.
Decision-making
The highest-value work remained deeply human.
AI couldn't decide:
Those decisions still depended on product thinking and design judgment.
Biggest learning
The biggest shift wasn't learning React or Framer Motion. It was learning how to communicate with AI.
Good prompts weren't clever. They were clear.
The highest quality outcomes came from treating Figma as a specification system- using node IDs, constraints, geometry, acceptance criteria, and interaction models instead of asking AI to "match the design."
In other words:
Better specifications consistently produced better products.
The challenge
The hardest problems were not scaffolding- they were fidelity, compositing, and interaction architecture under motion.
AI collaboration
Prompts evolved from broad asks to measurable specs. Early: “Implement Work section.” Later: “Align with Figma node 1060:14638.” Final: symptom-specific fixes like “Anchor bookmarks spine-relative, single layer behind cover.”
I wrote CLAUDE.md rules — match Figma exactly, no redesign, Framer Motion for animation — and separated content from components so agents had stable targets. Validation scripts for journal assets became acceptance criteria.
Learning
Hiccup
Scroll-driven journal flips, single bookmark assets, and 1× image exports all looked close but broke on interaction or retina displays. Each needed a structural fix, not a polish pass.
Decision
I abandoned scroll-hijacking journal animations when they fought page scroll. Tap toggle + 5s auto-open + idle breath replaced a passport-style 3D flip.
Outcome
This experiment fundamentally changed how I approach product design. AI didn't replace my workflow, it expanded it. By shifting repetitive implementation to AI, I could focus on the decisions that matter most: defining interactions, making trade-offs, and crafting the overall experience.
A single-page portfolio with scroll-driven hero, featured work, interactive journal, Gen AI experiments carousel, writing, testimonials, and footer all statically generated and deployed.
The site is both the artifact and the proof.
Impact
This project isn't meant to demonstrate that I can code. It's meant to demonstrate that I can build. I can take an idea from concept to production by combining product thinking, interaction design, structured AI collaboration, and rapid iteration. To me, that's one of the most important shifts AI is enabling for designers.
Before this project, my workflow ended at Figma. Today, it ends in production.