I use Claude Code, Codex, Antigravity Gemini, and the Figma MCP to turn ideas into production-ready prototypes in hours, not days. The AI accelerates the build; the design system keeps every output conflict-free with the team's existing engineering framework. Below: 5 campaigns shipped in 3–6 hours each, the live CodePen reference implementations, and the open-source repos that distilled into the work.
The Tooling Stack
Since 2024, I've been compounding design work with AI agents — not replacing engineers, but compressing the gap between Figma and shippable code. Each agent below has a specific role; together they let one designer deliver 2–3 production campaigns per day from a Marketing brief.
Agent 01
CLI agent that reads my design tokens and scaffolds components against the existing frontend framework — React + MUI, vanilla TS, WordPress block, whatever the team uses. Zero conflicts with team conventions.
Agent 02
When I need a one-off interaction — a price tick animation, a chart easing curve, a complex form validation — Codex gives me 80% of the JS in 30 seconds. I refine the last 20% by hand.
Agent 03
Google's coding agent — used when a campaign needs API routes, server actions, or refactors spanning 5+ files. It holds the whole project in context the way I hold a Figma file in my head.
Agent 04
Model Context Protocol pipe between Figma and the coding agent. The agent reads my design tokens, component variants, and prop states directly from the Figma file — no manual spec sheet, no copy-paste hex codes.
The Collaboration Pattern
A real session, condensed. The pattern stays the same whether it's a WordPress block, a Next.js campaign page, or a one-off interactive landing. The bottleneck is no longer typing — it's knowing what to ask for.
Copy doc + brand reference + deadline. Sometimes a Figma sketch.
5 minI block out structure using my design system. Tokens already locked.
30–60 minAgent reads the Figma file, scaffolds the page against the existing framework.
10–20 minI review every line, fix edge cases, test mobile, validate WCAG AA.
60–120 minPR + handoff note + Loom walkthrough. Engineering merges, not rewrites.
15 minindex.html · styles.css · hero.ts. Using your existing --gold token from main.css. Hero parallax via IntersectionObserver. Mobile breakpoints at 480/768/1024.
localhost:5173.
--accent-hover + box-shadow inset. Component now matches the design-system contract. ok shipped.
The point isn't that Claude writes code. The point is that the design-system constraints, token architecture, and existing engineering framework are all carried as context into the conversation — so the output drops into production without conflicts. The designer's job has shifted from "drawing screens" to "carrying constraints into the right conversation."
Production Output · 2024-present
Each card below is a real campaign page running in production right now. The pattern: Marketing hands me a copy doc Monday morning; the page is live Monday afternoon. At 2024 baseline this was one campaign per week. By 2026 it's 2–3 per day — same designer, better tooling.
Campaign 01 · Product Launch
Multi-section landing page introducing the ACY mobile trading app — feature carousel, OS-aware install CTAs, animated transitions, multi-language ready.
Open live page ↗Campaign 02 · Brand Partnership
Editorial-style hero, motion-rich content sections, partner gallery with hover-driven reveals. Brand-aligned typography hierarchy without departing from the design system.
Open live page ↗Campaign 03 · Product Vertical
Commodity-vertical campaign with live price tile, scrolling chart parallax, multi-currency price comparison. Bilingual EN/ZH content surfaces.
Open live page ↗
Campaign 04 · Anniversary
Long-form scroll-driven anniversary celebration. Timeline animation, milestone counters, gallery transitions. Built into existing WordPress site without theme conflicts.
Open live page ↗Campaign 05 · Internal Asset
Full digital brand guidelines — 32 sections, sidebar nav, jump-to-section anchors, copy-to-clipboard hex codes, downloadable assets. Replaces a 60-page PDF.
Open live page ↗Why this matters for hiring: The deliverable isn't faster. The scope is larger. With a stable design system + AI agents that respect framework constraints, one designer ships what used to take a design-and-frontend pair a full sprint. Marketing teams get more campaigns, engineering teams get cleaner handoffs, and the design system stays the single source of truth.
The Productivity Curve
The output curve below tracks campaigns shipped per week, not because hours-per-page changed, but because the surrounding system matured: stable design tokens, framework conventions, AI tools that learned my preferences. The 2026 productivity isn't a 10× hack — it's the dividend on three years of design-system investment.
Baseline: I designed in Figma, handed off to engineering, waited for build cycle. Throughput limited by engineering bandwidth.
Design system stabilised. I started shipping reference implementations alongside Figma. Engineering merged faster because nothing surprised them.
Claude Code + MCP + the stable design system compound. Marketing brief in the morning → live page after lunch, with engineering review-not-rewrite.
Static Figma specs can't convey easing curves or interaction nuance. These run live in your browser — the same code that shipped to production.
createTheme() token overrideLive candlestick charts · EMA indicators · Simulated order book · Position P&L · Portfolio VaR · AI signal feed. Every price updates in real-time.
Engineering extension of the design system — live component variants, prop controls, and state logic directly in the browser. The verification layer between design and code.
The token architecture that governs both custom prototypes and MUI integrations. KYC/AML flows, compliance patterns, trading components — with token export in CSS, JSON, and MUI createTheme() format.
Industry-standard HTML5 charting — same engine as TradingView's 50M+ users. Studied 20+ plugin examples: heatmap, volume profile, Bollinger Bands, custom tooltip primitives.
Decoder-only transformer for OHLCV forecasting across 45+ global exchanges. Studied its WebUI and tokenizer architecture — directly inspired the AI Signals tab in the Terminal Demo.
Production platform where AI agents register, publish signals, and copy trades. Analyzed its React architecture and OpenAPI spec to inform the Positions and Signals UX in the Terminal Demo.
Vue 3 + D3.js swarm simulation with thousands of AI agents. Used as basis for the live Multi-Agent Signal Consensus panel in the Hedge Fund case study.
Institutional finance digital platforms integrate with proprietary trading systems, regulated execution venues, and back-office reconciliation pipelines. Designers who understand technical constraints can prototype realistic solutions — not fantasy mockups that can't be implemented.
Competitive Advantage: Most product designers design in Figma and hand off to engineers. I design in Figma, prototype in code (validate feasibility), ship production code (WordPress, React Native), and hand off reference implementations — which means faster time-to-market and fewer implementation surprises.
Many CodePen prototypes contain proprietary patterns for ACY Securities I can't share publicly due to NDA. Happy to walk through code logic in interviews or create genericised versions for review.
Every problem we solve for clients has multiple valid approaches — different costs, different ROI, different risk profiles. These threads show how the approach on this page compares to others in the portfolio.
Designers who prototype in code close the gap between intent and implementation — reducing handoff ambiguity, validating feasibility early, and shipping reference code engineers can fork directly.
Studying open source repos — not to copy, but to understand engineering constraints and translate them into better design decisions. Knowing what the stack can do changes how you design with it.