Learning
Where MCP helped
Structured frame data reduced layout guesswork. Claude got closer on spacing and hierarchy than screenshot-only prompts.
Translating a design concept into code in five hours
Concept to landing page with Claude + Figma MCP
Overview
I tested whether Claude connected to Figma via MCP could turn a concept frame into a working landing page fast enough to be useful in early exploration — not perfect, but shippable as a starting point.
The problem
Early concepts die in translation
Moving from a Figma concept to something clickable often takes longer than the ideation itself. I wanted to compress that gap for early validation — before investing in full implementation.
Approach
Figma as live context for Claude
Using Figma MCP, Claude could read frame structure, spacing, and component hierarchy directly instead of inferring from screenshots. I directed it section by section: hero, feature grid, CTA — with explicit constraints on typography and color tokens.
Hiccup
Where it still needed me
Micro-alignment, responsive behavior, and interaction states still required human review. MCP accelerates the first 70%, not the last 30%.
Outcome
A usable starting point, not a finish line
In roughly five hours I had a working landing page close enough to explore with stakeholders. The experiment validated MCP for concept-to-code speed — and clarified that design direction stays human-owned.