Claude Code
Built High-fi Screens in Figma using its MCP Server
How I created High-Fi Wireframes with Design System; making my workflow 70% Faster
Claude Code. Figma MCP. A custom markdown file. Here's the exact flow.
AI is not a tool for designers. AI is a workflow. And there's a real difference.
A real AI workflow means AI is embedded into every phase of UX process, each step feeding the next, with you making the decisions and AI doing the heavy lifting in between.
This is how I redesigned the Ooredoo Business Homepage in under three days. Same project would normally take me a week and a half.
6 mins
My Role
Senior Product Designer
Platform
Figma
Figma Designs Built by
MCP Figma using Claude
A Snapshot of old Homepage to be Redesigned
Step 1: Data Before Design
I didn't open Figma on day one. I opened Google Analytics 4.
Six months of behavioral data, then a tighter three-month slice. I was looking for where business visitors dropped off, which sections had low scroll depth, what wasn't being engaged with.
The finding was clear. The homepage was built around products, not problems. Business decision-makers don't land on a page looking for a feature list. They arrive with a challenge and need to know immediately if you understand it.
Competitor benchmarking confirmed the gap. Stronger B2B homepages in the region led with outcomes. Ooredoo's page led with internal telecom jargon that meant very little to an SMB owner.
That became the strategic foundation: content-first, outcome-led, jargon-reduced.
Google Analytics 4 Data Driven Approach
I synthesized my Data Findings
Step 2: Lo-Fi Wireframes with UX Pilot
I used UX Pilot AI to generate two lo-fi wireframe variations from my brief. Not to design for me, but to give me two structural arguments to react to.
I walked those wireframes through with a colleague, explained the content-first strategy, got real critique. Then consolidated everything in Gemini Canvas and wrote a final layout prompt covering every section, its purpose, and what DS components it would need.
Variation 1 out of 2 of Low-Fi Wireframes
Step 3: The Design System Problem
Ooredoo's design system lives across four separate Figma files: typography, colors, assets, and components.
My first attempt, using Figma MCP on Cursor, failed on component decisions. Wrong header, wrong footer, wrong FAQ pattern. Claude picked components visually but it doesn't actually see components the way you do. It reads metadata: names, descriptions, variant labels. If those aren't precise, it guesses.
So I built a single source of truth.
Terminal referencing my design-system.md file creation
Step 4: High-fi Build, But Confirm First
With the markdown file ready and Figma libraries published, I started the high-fidelity build in Claude Code.
The most important thing I did: asked Claude to list every component it planned to use before building anything.
This single step saved me the most time. Instead of discovering a wrong component on section six after the whole page was built, I caught decisions at the planning stage. One line to correct versus rebuilding entire frames.
Claude listed its plan for all eight sections. I reviewed, corrected two decisions, confirmed the rest, and said go.
Confirming all the components to be used for high-fi build before building to optimise token usage
High-fi Figma Design using MCP from Claude Code Terminal
Step 5: Arabic in Under a Minute
Once the English design was done, I used the Arabase plugin in Figma to flip the entire layout to RTL.
Under one minute. Every section mirrored correctly, text alignment switched, directional logic held. Applied Arabic typography tokens from the DS on top and it was done.
RTL adaptation for a page this size normally takes a full day minimum. Arabase compressed that to minutes.
The next step I'm building toward: connecting Arabase with an AI agent that automatically applies Arabic DS tokens after the flip, including the additional line-height adjustments Arabic scripts need. Full Arabic version, generated in parallel with the English build.
Arabic Version with Arabase Plugin
What Made the Difference
Three decisions drove the result:
Confirming components before building kept the work accurate and caught errors early
Building design-system.md first gave Claude a structured reference instead of letting it guess
Starting with a real strategic brief meant every AI decision was anchored to an actual user need
The GA4 audit, benchmarking, and content-first strategy all happened before a single frame existed. AI moves fast. It needs to be pointed at the right problem first.
The Real Learning
When I enabled the Figma libraries and asked Claude to place real component instances, the result was visually weaker than the hand-crafted version. Stiffer layouts, spacing that felt off, components that didn't sit right.
Claude doesn't see your components the way you do. It reads metadata: the component name, the variant label, the description field. That's it. If your design system has three header variants named Header v1, Header v2, and Header Marketing, Claude picks based on whichever label feels closest to your prompt. It has no way of knowing which is current, which is deprecated, or which belongs on a public-facing page.
The fix is to build a design system that an AI agent can actually navigate:
Component names that describe use, not appearance. "Header - Marketing - Desktop - LTR - Current" is more helpful to AI agent. "Header v2" tells it almost nothing in metadata.
Variant labels that carry decision logic. Instead of "Filled" or "Outlined", write "Use for primary CTA" and "Use for secondary actions on light backgrounds." Claude reads that and makes the right call.
Design systems have always needed good documentation for developers. Now they need a different kind of documentation for AI agents. Most design systems aren't built for it yet. Mine wasn't either, and now I know exactly what would I fix first.
Traditional
AI Design Workflow
High-fi completion
1.5 Weeks +
Under 3 Days
RTL Arabic adaptation
2 Days
Half Day
Component verification
Manual
Confirmed before Build
Read the Next Blog
© 2026 Design Portfolio All rights reserved. Designed by Bisma Munawar