Design to Engineering with AI

First wireframe extended into a full template via the Figma MCP. Named every text and paint style for a universal style guide, then ported it to project-jackpot-replica.html as a 1:1 HTML mirror.

~7,000 lines · React + Framer Motion + Tailwind CDN, all in a single HTML file. Feature-rich, but editing one piece of copy meant scrolling through ~6,000 lines of component code to find it.

// CDN libs, in-browser Babel — heavy.
<script src="react@18..."></script>
<script src="framer-motion@10..."></script>
<script src="cdn.tailwindcss.com"></script>

// Five React roots, one per section.
<div id="loyalty-ecosystem-root"></div>
<div id="golden-path-root"></div>

// ~300 lines of state per component.
function LoyaltyStrategicMap() {
  const [platform, setPlatform] = useState('native');
  // ...AnimatePresence, scroll handlers...
}

Stripped the framework. Rewrote everything as plain HTML/CSS ~1,100 lines vs. 7,000+. The point: get the foundation honest before adding interactivity back.

:root {
  --text:        #151515;
  --paleblue:    #EDF5FE;
  --blue-vivid:  #3b82f6;
  --green-vivid: #58CE70;
  --purple-vivid:#7856FE;
  --font: 'Helvetica Neue', ...;
}

/* Hybrid card — same look as the OG
   React, now plain CSS. */
.phase--hybrid {
  background: var(--paleblue);
  border-radius: 28px;
}

Fourteen interactions layered on top, each a self-contained IIFE — scroll-reveal, hotspot carousel, hover-driven iPhone push, lightbox, count-up, custom cursor. ~700 lines of vanilla JS.

Re-pulled the Figma file via MCP, extracted a full text inventory of all 26 sections, and audited the HTML line by line. Locked the typography. Rebuilt Building for Scale with real component PNGs.

Two case studies online, and an audit caught the 0-to-1 case pre-spoiling Growth's headline metric. Migrated ~1,500 lines along a funnel arc using a sub-agent. Result: two case studies that read cleanly back-to-back.

Iteration pass on the Growth file after the split settled. Grouped the four pillars into The Funnel and The Ecosystem. Added a per-view tab strip inside the lightbox so users can jump between rationales without closing it. Traded the 3-card methodology grid for a stat strip. Twelve new patterns shipped: phase-group wrapper, lightbox tab strip, three-layer scroll lock, vh-aware mockup clamp, screen-pill pulse sync, each one earned by a friction a reader would hit on read-through.

Template, style guide, and interaction library all locked in from Stages 01–04. The next case study starts at the audit, not the wireframe. Documentation time drops, build time stays, which means more energy for the work that actually moves the portfolio forward.