Designing for Developers—and the AI Agents Working Beside Them
Design and development teams have long aimed for alignment. But in recent years, we’ve entered a new phase of product building, one that introduces not just tighter collaboration between humans, but agents, automation, and AI-led workflows.
This shift demands more from our systems. It’s no longer enough to hand off pretty designs and expect clean code. If our components are to be used by both developers and agents, they must be robust, structured, and self-describing.
That’s why I created FigmaLint.
It’s a plugin built to help designers structure their components with the same level of care and scrutiny that developers apply to code, so we can meet AI and engineering needs halfway. It helps surface gaps in component metadata, structure, tokens, and accessibility. And it offers recommendations based on your selected component’s type, so even designers unfamiliar with developer concerns can learn as they go.
From Inspiration to Action
This tool wasn’t built overnight. It’s the culmination of a journey, one marked by pain points in handoffs, experimentation with the Figma MCP, and a desire to make design systems more accessible and reliable.
- Early demo post on LinkedIn
- Announcing our custom Design Systems MCP
- Breaking down Figma’s MCP and Generative UI
These articles tell the story of how our process evolved. If you’ve been following along, FigmaLint is the natural next step.
Meeting in the Middle: Designers + Developers + Agents
At Southleft, we’ve seen firsthand how easily alignment can break down, especially when a component looks finished but doesn’t behave like it’s meant for production.
Designers believe they’re handing off a polished system. Developers assume it’s production-ready. The friction lives in the space between those assumptions.
This isn’t about pointing fingers. It’s about visibility.
Without a shared way to check structure, props, tokens, and naming conventions early in the process, both sides end up patching things too late, after code has already been written or rewritten.
FigmaLint is a conversation starter.
It helps designers spot gaps that usually only get caught in development.
And it gives developers more confidence that what they’re inheriting is built with implementation in mind.
It doesn’t judge. It supports.
It helps both sides meet in the middle, before things fall apart downstream.
It audits token usage, checks for missing or unclear properties, and offers thoughtful recommendations—often surfacing things only a dev would flag.
- It helps designers think like developers.
- It helps developers breathe a little easier.
- And it helps agents interpret the component cleanly so the downstream code generation process runs smoothly.
Building for AI, Not Just for Humans
A shift is happening in design tooling. It’s no longer just about collaborating better—it’s about designing for a new kind of audience: AI agents.
With systems like the Figma MCP, we’re designing for intelligent interpreters that turn design into structured, reusable code. They don’t assume. They don’t guess.
If your component is incomplete, an agent will:
- Rebuild what’s missing
- Flatten structure
- Default to explicit values instead of tokens
- Miss the nuance of your design intent entirely
This is where FigmaLint becomes more than a QA tool.
It’s a translator, making sure the language of your design is legible to the systems that now carry it forward.
Designing for AI doesn’t replace human craft.
It amplifies it, if the inputs are right.
Your Own AI-Aware Design Systems MCP
To ensure FigmaLint’s recommendations are solid, we built our own internal Design Systems MCP, a curated, centralized knowledge base of token standards, component behaviors, and naming conventions based on the real-world design systems we’ve worked on.
This MCP helps power:
- Accurate suggestions for property naming
- Contextual guidance based on component type
- Validated best practices around structure and token use
It’s what helps FigmaLint act less like a checklist, more like a partner.
From Design to Development to Delivery
Here’s what a modern, AI-powered product development cycle can look like:
- Designers create system-based components with variants, states, tokens, etc.
- FigmaLint audits those components, scores them, and offers recommendations
- Figma MCP bridges design and code, allowing tools like Claude, Cursor, or Windsurf to read and interpret components with high accuracy
- Developers validate the generated code, then finalize, test, and publish
- StoryUI – a generative layout tool built by Southleft, uses these components to iterate over full-page designs in seconds
These tools together enable teams to move faster without compromising quality. They reduce friction, eliminate guesswork, and support design and development in equal measure.
And it all starts with properly structured components.
Curious what this looks like in action? Watch the demo to see how FigmaLint analyzes components, flags issues, and recommends improvements in real time.
Who This Is For
FigmaLint was built for:
- Designers who want to level up their systems thinking
- Developers who want to stop fixing design gaps
- Systems teams who want a better feedback loop
Product teams who care about speed without compromising accuracy
It’s also for those building the next generation of digital products, where AI plays a central role in bridging human creativity with scalable implementation.
FigmaLint is currently in beta and available now in the Figma Community. I’m incredibly proud of what it can already do and even more excited about where it’s headed. If you’re using MCP or building design systems in Figma, I’d love for you to try it out and share feedback.
Want to Chat?
If you’re exploring ways to modernize your product development lifecycle, or if you’re just curious how AI and design systems can work better together, we’re here.
We’ve helped teams audit their systems, augment their workflows, and set up tools/services like FigmaLint to make real impact.
If you’re curious how this could work for your team, let’s talk!