This episode was originally going to be about something else, but a conversation over the weekend reminded me of a workflow I use quite often when developing and designing applications.

So instead, I decided to share one Human × Intelligent workflow I keep coming back to:

Figma → Claude → Figma

Rather than treating AI as a chatbot outside the workflow, this setup connects Claude directly to the design environment using Model Context Protocol (MCP). That means the model can analyze interfaces, reason about product systems and help accelerate design thinking.

In this episode, I talk about:

• What changes when AI connects directly to design tools
• Why context makes AI much more useful for product design
• Real workflows I use: UX audits, design systems extraction, dashboard analysis and component generation
• The difference between Official Figma MCP and Figma Console MCP
• What worked well, what didn’t work so well and what I’m still experimenting with
• Why I think the real shift is AI becoming part of the workspace

This is not about replacing designers, but actually, it’s about building better collaboration between human judgment and intelligent systems.

If you’re exploring AI workflows for product design, design systems or complex SaaS products, this episode should give you a practical mental model for where things are heading.

Example workflows mentioned in the episode

UX audit of a flow: Analyze selected screens for hierarchy, cognitive load, accessibility, spacing consistency, CTA clarity and user flow friction.

Design system extraction: Analyze selected UI and identify typography scale, color tokens, spacing tokens, component patterns and layout grid.

Reusable component generation: Convert layouts into base components, variants and nested structures optimized for scale.

Dashboard refactoring:  Audit dashboards for information hierarchy, data density, scanning patterns, visual grouping and progressive disclosure.

Retention system mapping: Map a product UI to triggers, actions, rewards, feedback loops and habit formation patterns.

Setup steps

1. Sign up for a Figma Pro seat and Claude Pro or Max
2. Install Node
3. Install Claude Code
4. Create a Figma token
5. Enable Figma Dev MCP mode
6. Configure the Figma MCP server
7. Install Figma Console MCP locally
8. Install the design systems MCP assistant
9. Install the Desktop Bridge plugin
10. Install the Figma MCP server in Claude Desktop
11. Restart Claude Desktop
12. Run 'check Figma status'

--

Links:
Episode page: 
Madalena on LinkedIn: /madalenafigueirasdacosta
Subscribe: https://substack.com/@humanxintelligent


—

🎙️ Human × Intelligent explores how humans and intelligent systems evolve together, across product, behavior and culture.

---
#AIAdoption #EnterpriseAI #HumanInTheLoop #ResponsibleAI #AIGovernance #AIWorkflows #AITrust #AILeadership

Support the show

🎙️ Human × Intelligent - a podcast about trust, transparency and human agency in AI systems, for product designers, PMs and founders building with AI. 

🔔 Subscribe so you don't miss the next episode 

🌐 humanxintelligent.com 

Hosted by Madalena Costa · Senior product designer and AI systems strategist