← All workCASE STUDY · PLACEHOLDER
03 — AI workflow

Design to code with Claude Code and Figma MCP

Role
UX / Product Designer (placeholder)
Team
Placeholder team
Time
Placeholder timeline
Tools
Figma, Claude Code

Placeholder: what got faster and by how much.

Context

Placeholder content: An AI-assisted design-to-code workflow explored how a designer could move from a Figma concept to a working prototype with Claude Code and Figma MCP. Add approved scope and project context.

Problem

Placeholder content: Translating design intent into code can introduce repetitive handoffs and visual drift. Replace this framing with the actual challenge and validated evidence.

My role

Placeholder content: UX / Product Designer. Confirm collaborators, timeline, and responsibilities before publishing.

Process

Placeholder content: I tested a small workflow, compared generated UI with the source design, and refined the prompts and review steps. Add rejected approaches and verified time savings only when available.

Workflow mapPlaceholder: a workflow sketch that identifies where designer review remains essential.
review

A hand-drawn sequence connecting a design canvas, AI-assisted implementation, and review.
Design-to-code checksPlaceholder: a review sketch emphasizing layout, accessibility, and content checks.
compare

A hand-drawn checklist beside a rough screen frame, with a highlighted visual comparison step.

Solution

Placeholder content: Describe the tested workflow, its boundaries, and the human review steps that keep the result useful and trustworthy.

Impact

Placeholder content: Add measured quality or time outcomes after validating the method and permission to share them.

Learnings

Placeholder content: Add reflections on where AI accelerated the work, where it needed guidance, and what you would test next.