← Selected work04 / AI SYSTEMS + DESIGN OPS
FIGMA × CLAUDE × MCP

Design context in.
Useful code out.

A custom integration system built to move selected Figma context into Claude, control how tools are used, reduce wasted tokens and turn repeated design work into a faster, trainable workflow.

MCPFIGMACLAUDECONTEXT ROUTINGDESIGN → CODE
Figma and Claude integration thumbnail
CONNECTED WORKFLOWSELECT → ROUTE → BUILD → VERIFY
01 / THE PROBLEM

Claude is powerful.
Context is expensive.

Generic prompting was not enough. The workflow needed a way to understand the right Figma selection, load only useful project context, call controlled tools and keep output consistent without repeatedly spending tokens explaining the same system.

LESS repeated contextFASTER implementation loopsMORE predictable output
02 / THE SYSTEM

One signal.
Multiple controlled steps.

The workflow behaves more like a production pipeline than a chatbot. Each stage has a job, and information moves only where it is needed.

FigmaDesign source
SelectionScoped context
MCPTool bridge
ClaudeReasoning layer
RulesProject memory
CodeControlled output
LESS CONTEXTCONTROLLED TOOLSREPEATABLE OUTPUT
03 / HOW IT RUNS

From selected frame
to structured implementation.

The system reads a scoped Figma selection, extracts the useful design information, routes it through MCP, combines it with project rules, then generates and verifies code instead of dumping uncontrolled output.

figma-mcp.pipeline.ts
01read_selection(figma.node)
02extract(layout, type, tokens)
03route(context → mcp)
04apply(project.rules)
05generate(component)
06verify(diff, constraints)
context reduced · tools ready · output verified
04 / TRAINING THE WORKFLOW

Teach the system once.
Reuse the thinking.

Instead of re-explaining preferences every session, the workflow carries project rules, component conventions, naming patterns and implementation boundaries forward.

01

Design rules

Spacing, hierarchy, responsive behavior and visual constraints.

02

Code rules

Framework conventions, component structure and reusable patterns.

03

Tool rules

What Claude may read, call, generate and verify through MCP.

04

Context rules

Only the relevant files, selections and instructions enter each task.

05 / TOKEN EFFICIENCY

Spend tokens on the task.
Not on repeating the setup.

The goal was never “free AI.” Every useful AI workflow has a cost. The improvement is controlling that cost — smaller context windows, reusable rules, scoped reads and fewer unnecessary retries.

Generic workflowLarge repeated context
Custom routed workflowScoped reusable context
Conceptual comparison — illustrates the workflow strategy, not a fixed token benchmark.
06 / REAL WORKFLOW

Design speaks.
Code answers.

FIGMA SELECTIONHero / Pricing / Cardnode: 42:118
MCP ROUTERcontext.ready()rules + tools + scope
CLAUDE OUTPUTcomponent.tsxverified against constraints
THE OUTCOME

Less explaining.
More building.

A custom Figma + Claude integration that turns design context into a controlled development workflow — faster to call, easier to repeat, and better aligned with the way I actually build.