Bridging the gap between Figma variables and live code by orchestrating Claude and Cursor
Challenge
Beyond Static Visuals
As the principal designer of the original Public Debt Portal in 2024, my goal was always to democratize complex data. However, traditional handoff often leaves a gap between the "perfect pixel" in Figma and the functional reality.
The Goal
To leverage AI-orchestrated workflows to rebuild the Debt Portal’s UI, transforming it from a static design into a functional, data-ready React prototype.
Orchestration
Instead of just "drawing" screens, I acted as a technical architect using:
Figma + JSON
Exporting design tokens to maintain a single source of truth.
Claude 3.5 Sonnet
My "Senior Frontend Partner" for logic structuring and code generation.
Cursor
The IDE where I managed the codebase and integrated AI-generated components.
Gemini
My technical mentor for navigating the learning curve of new tools and frameworks.
Process
My workflow wasn't a simple "generate" command. It was a loop
Context-Rich Prompting
Setting clear personas for the AI to ensure code followed Pixel Perfect standards and Shadcn patterns.
Manual QA & Code Intervention
When the AI failed to respect layout responsiveness or typography scales, I used Chrome DevTools to inspect elements and manually adjusted the CSS/Tailwind logic directly in Cursor.
Framework Troubleshooting
I successfully identified and resolved environment issues, such as Tailwind v3 vs v4 incompatibilities, ensuring the Localhost reflected the design intent.
Component Anatomy
I transitioned from thinking in "layers" to thinking in "props and states.
AI Curatorship
I learned that the designer's value in 2026 is the ability to audit and refine AI output, not just trigger it.
Technical Autonomy
Understanding the underlying code allowed me to solve some design constraints that a static tool couldn't reveal.
30-40%
Accelerated Roadmap
Reduction in frontend development time by delivering functional React components.
Technical Synergy
Established a shared language with engineering through code-ready assets (Tailwind/React) and structured JSON tokens.
Zero-Loss Fidelity
Eliminated handoff friction by debugging layout logic and responsiveness directly in a live localhost environment.
What’s Next?
The prototype is currently a high-fidelity functional shell. The next phase is connecting this UI to live Open Data APIs using AI to structure the fetching logic, making the transparency portal truly dynamic and real-time.