TJ Pitre
@tpitre
Followers
825
Following
2K
Media
471
Statuses
9K
NOLA made. Emphatic lover of all things web and food. Web designer and developer. Likes design systems.
NOLA
Joined March 2007
Excited (and a little nervous) to be speaking on Aug 20 for @zeroheight’s DS Live. I’ll be talking about Context-Based Design Systems, why they matter now, and how AI is changing the game. Would love to see you there!. 🔗 #ai #designsystems.
webinars.zeroheight.com
DS Live is a new webinar series from zeroheight where we invite the best speakers from around the world to deliver talks on design systems, and everything ...
0
1
1
AI is cool. Design systems are cool. AI that actually understands your design system? Way cooler. Here’s what happens when you combine Claude + Figma MCP + a domain-specific design systems MCP. 📽️ Demo + post:. #ai #mcp #designsystems
0
0
1
I built a CLI audit tool for design system codebases. Think Lighthouse, but for your components, tokens, docs & infra. It’s powered by Claude and backed by years of DS best practices via the DS MCP. Demo & details here:.🔗
0
0
0
We just gave a live walkthrough of the next-gen product workflow. AI-assisted. Open source. Real tools, real demo. Watch how FigmaLint, MCP, and Story UI power a smarter, faster product pipeline. No pitch, just a lot of good (and helpful!) stuff. 🔗
linkedin.com
For a while, it felt like design systems had settled. We basically defined the global component set for all design systems, we've all settled on semantic token naming structures, we've pipelined and...
0
0
0
What if every step in your product lifecycle carried real context - intent, structure, validation - into the next?. That’s the idea behind Context-Based Design Systems. New article:. #designsystems #productdev #AI.
southleft.com
What happens when every step in the product lifecycle inherits context from the one before it? You get a smarter, faster, more accurate way to build and the start of a new design systems era.
0
0
0
🚨 Just launched: FigmaLint. A lightweight plugin to help designers build cleaner, more dev-friendly, AI-ready components, right inside your Figma project. It even comes with a context-aware AI chat assistant!. More here →
0
0
0
FigmaLint has been submitted to the plugin directory 🙌. It’s grown from a quick audit tool into something smarter:. ✅ Hard-coded token detection.💬 Context-aware AI chat.🔍 MCP readiness scoring. Quick preview + update here:. #ai #designsystems #figma
0
0
0
🚨 Just launched a public MCP server for design systems. ✅ 1,762 AI-readable content chunks.✅ 110+ vetted sources.✅ Fully open source. Built it because I needed one. Sharing it because others might too. Read the full story: #designsystems #ai #MCP
3
0
2
Posted a demo here → Would love your feedback. Would your team use something like this?. #figma #designsystems #aidesign #frontend.
linkedin.com
Most designers aren't trained to think like developers, and they shouldn't have to be. But if your team is using tools like the official Figma MCP, then developer intent does need to be represented...
0
0
1
It’s built for designers who are new to design systems or just starting to think about engineering handoff. It’s like Lighthouse, but for your Figma components.
1
0
0
It checks for things like:. • Are tokens used properly?.• Are there hard-coded values?.• Are key props and states missing?.• Could this confuse a downstream dev agent?.
1
0
0
So I made a tool to help. It’s called FigmaLint (working name). It doesn’t edit your file. It doesn’t generate code. It just audits your component and asks:. Is this MCP-ready?.
1
0
0
Properties, tokens, structure…. If a component isn’t built correctly in Figma, it won’t translate cleanly to code. But most designers aren’t taught what “developer-ready” even looks like.
1
0
0
At Southleft, we’ve been using the official Figma MCP extensively to streamline design-to-code workflows. It’s powerful, but it also puts more responsibility on the design side.
1
0
0
Not every designer thinks like a developer. And they shouldn’t have to. But when you’re using tools like Figma’s MCP, that missing context starts to matter.🧵.
1
0
0
Just released a new tool called Story UI, a prompt-based layout generator for Storybook. Built on AI + MCP, it turns natural language into real component stories. Quick demo + overview here:.🔗 #DesignSystems #AI #Storybook
0
0
0
This isn’t just faster dev. It’s faster everything. Figma’s MCP, structured design systems, and a natural-language UI generator are reshaping the design-to-product workflow. Two major accelerations:.→ Design to dev.→ Dev to product. Check it out:.
southleft.com
By combining Figma’s MCP server, a structured design system, and natural language UI generation, we’re not just speeding up design-to-dev, we’re rethinking the entire path from idea to product.
0
0
2
We always talk about closing the gap between design and dev. But this?. It closes the gap between dev and product too.
0
0
1
Used Figma’s official MCP server to generate a web component. Wrapped it in React. Dropped it into Storybook. Plugged in our UI Generator. PMs can now adjust layouts without pinging devs. Feels like a new frontier for design systems.
1
0
1
Part 2 of “TJ Plays with AI + Design Systems” is live. This time, I’m showing the full pipeline:.Figma MCP → Web Component → React Wrapper → Storybook UI Generator. Design to dev to customizable product UI—no code required by PMs.
linkedin.com
Part 2: More from “TJ Plays with AI + Design Systems.” This time: Figma MCP → Web Components → React Storybook → Custom UI Generator. I took the same banner component from yesterday’s demo (https:/...
1
0
2