Meta Case Study · Portfolio · 2026
This website.
A portfolio built through iterative vibe coding sessions with Claude and Figma MCP.
01 — AI Collaboration Workflow
Claude + Figma MCP
Primary design-to-code
Sketched flows and components in Figma, then used the MCP integration to move designs directly into Next.js. Claude handles layout, copy refinement, and component logic in real time.
Gemini
Second opinion & review
Used for alternative implementations and edge case checks. Comparing responses from different models surfaces assumptions and forces clearer thinking about design decisions.
Codex
Code stress-testing
Stress-testing interaction patterns and exploring implementation variants. Helpful when a feature needs multiple approaches evaluated before committing to one direction.
02 — Design Decisions
"Next Project" at the end of every case study
Each project page ends with a persistent next-project link. Readers stay in a reading flow without having to navigate back to the home page — reducing drop-off and encouraging them to see more work.
Space Grotesk + DM Serif Display
Space Grotesk brings a technical, modern voice to body text and UI labels. DM Serif Display adds warmth and weight to hero headlines — the pairing balances precision with personality.
Per-project visual systems
Each case study has its own color language, component style, and layout rhythm. This lets the work feel intentional rather than templated, and demonstrates range across different design contexts.
Cloudinary for media, Vercel for deployment
Cloudinary handles all project images with CDN delivery and format optimization. Vercel provides zero-config deployment with automatic preview URLs for each push — keeps the iteration loop fast.
03 — Reflection
What worked
- → Figma MCP cut design-to-code handoff to near zero
- → Iterating in code felt faster than mocking in Figma for detail work
- → Multi-model review caught edge cases and improved output quality
- → Vibe coding kept momentum — shipped instead of over-planning
What I'd do differently
- → Establish a shared design token system earlier
- → Write component contracts before generating code
- → Version control Figma files alongside code from day one
- → Set up automated visual regression testing sooner