TJ
@tpitre.bsky.social
Makin' my way in the world today takes everything I got. Takin' a break from all your worries sure would help a lot. Wouldn't you like to get away?
If your design system check is another language model, you don't have a check. You have a second opinion. Authority belongs to whatever layer can refuse deterministically, not whatever instructs loudest. New piece: open.substack.com/pub/southlef...
Use AI to Need Less AI
Component specs, token specs, and contracts are converging on the same idea. Let the model do the heavy lift once, then hand the work to machinery that can't improvise.
open.substack.com
Go to southleft.com, hit the palette icon, and type a phrase. Any phrase. The entire site re-derives around it in about a second. The demo is fun. The reason it's possible is the actual piece. southleft.substack.com/p/ai-propose...
Southleft — AI-Powered Design Systems
Design systems consulting, engineering, and AI integration — from the team behind Figma Console MCP and Story UI.
southleft.com
Figma Motion puts keyframes on the canvas, tied to components and variables. Motion is now a design system material. I demoed driving it with an MCP: prompt → animation → motion values saved as variables → DTCG tokens. southleft.substack.com/p/figma-moti...
Figma Motion Is the Feature I Didn't Know I Was Waiting For
Notes from my first Config as a Figmate, plus a demo of controlling Motion's keyframes and timeline through the Figma Console MCP.
southleft.substack.com
The most useful prompt I use for AI design work: "What are you least confident in right now?" AI is your biggest hype man. That question makes it second-guess itself and surfaces what you'd catch in review 3 days too late. Full piece 👇 open.substack.com/pub/southlef...
Life After the Prototype
Your prototype looks great. Now what? The sequence from a throwaway demo to something engineering can actually ship.
open.substack.com
Some news: I'm joining Figma to work on AI and design systems. The work I've been doing on the outside is now the inside work. Still a little surreal, mostly just excited to get to work! www.linkedin.com/posts/tpitre...
Some news: I'm joining Figma. For 14 years I ran Southleft, LLC, helping teams build and scale design systems. Somewhere in there the work pulled me deep into the space between design and code, a...
Some news: I'm joining Figma. For 14 years I ran Southleft, LLC, helping teams build and scale design systems. Somewhere in there the work pulled me deep into the space between design and code, and t...
linkedin.com
A dozen grounded reads on design systems + AI from the past couple of weeks. Specs, research, honest reckonings, a few tools worth using. AI doesn't replace your design system. It raises the cost of not having a good one. southleft.substack.com/p/some-good-...
Some Good Reads: Design Systems & AI, Right Now
A dozen resources from the past couple of weeks. Things to keep an eye on, plus a few I just found entertaining and informative.
southleft.substack.com
Native Figma MCP stays open. Console MCP goes deep. I turned the 22 most useful Console MCP tools into skills the native MCP can run. Take what's useful. They're all yours: www.linkedin.com/posts/tpitre...
Here's what I love about the native Figma MCP. It refuses to tell you how to work. In the latest update, it hands you the canvas and says use it however you want, then leans on skills to extend f...
Here's what I love about the native Figma MCP. It refuses to tell you how to work. In the latest update, it hands you the canvas and says use it however you want, then leans on skills to extend from ...
linkedin.com
(Psssst, last day to get our AI & Design Systems course at its lowest price) aianddesign.systems Operators, @tpitre.bsky.social, and @ian-frost.bsky.social are standing by.
AI and Design Systems Course with Brad Frost, TJ Pitre, and Ian Frost
An in-depth course on AI and design systems: core concepts, technologies and tools, environments and setup, implementation, and maintenance.
aianddesign.systems
The price increase represents ALLLLLLL the progress that @tpitre.bsky.social , @ian-frost.bsky.social, and I have made. The course now includes: ◉ Over 18 hours of video, including lessons, demos, and community jam sessions ◉ An amazing Slack community helping ◉ And sharing links/resources/tips
Your design system docs look great. Can an agent actually read them? A designed frame gets read as a node tree the agent has to reconstruct. A description field gets read as markdown. No guessing. One is gorgeous. The other is queryable. open.substack.com/pub/southlef...
Designed vs. Declared: How to Document a Design System for AI
A tested take on why description fields and annotations beat designed doc frames when the consumer is an AI agent, not a human.
open.substack.com
Most AI design system demos cheat. They start with an existing codebase doing half the work. So I tried it from an empty folder. Just a directory and a Figma file, building a token-connected design system from scratch. Wrote up how it went: www.linkedin.com/posts/tpitre...
Most AI design system demos cheat a little. They start with an existing codebase. Framework already chosen, styling method settled, tokens in place. Of course the AI produces something good. It's...
Most AI design system demos cheat a little. They start with an existing codebase. Framework already chosen, styling method settled, tokens in place. Of course the AI produces something good. It's got...
linkedin.com
Big day!! We're moving along on the AI & DS course!! 🎉 TL;DR: Chapters 1 and 2 are live, 16+ hours of video, and the $500 preorder price ends EOD Tuesday May 26th. Full post: www.linkedin.com/posts/tpitre...
The AI and Design Systems course just crossed a real milestone. Chapters 1 and 2 are live. 16+ hours of video so far, counting lessons, community jam sessions, and demos. Chapter 1: Core Concepts… |...
The AI and Design Systems course just crossed a real milestone. Chapters 1 and 2 are live. 16+ hours of video so far, counting lessons, community jam sessions, and demos. Chapter 1: Core Concepts. T...
linkedin.com
🎉 Big update on our AI & Design Systems Course! bradfrost.com/blog/post/bi... @tpitre.bsky.social , @ian-frost.bsky.social , and I have been busting our asses. Our course now has over 16 hours of videos, including lessons, community jam sessions, and other demonstrations. 👉 aianddesign.systems
Big AI & Design Systems Course updates!
https://youtu.be/iiFXSckYRM0 Chapters 1 & 2 of our AI & Design Systems Course are live! 🎉 Our course now has over 16 hours of videos, which includes course lessons, community jam sessions, and ...
bradfrost.com
Bad upstream decisions in a design system don't stay bad in one place. They become bad everywhere the system touches. That's the cascade, and it works exactly the same way when AI agents are doing the cascading. Wrote a piece on how to think about it. www.linkedin.com/posts/tpitre...
How Context Cascades | TJ Pitre
Bad upstream decisions don't stay bad in one place. They become bad everywhere the system touches. Every design systems practitioner has felt this. A component named carelessly five months ago. A t...
linkedin.com
Revisited Context-Based Design Systems a year after writing the original. The framework held up. The vocabulary needed sharpening. Tools change fast. Context compounds. southleft.substack.com/p/context-ba...
Context-Based Design Systems, Revisited
A year into the AI-driven design systems era, the framework holds up. Here's what's changed, what's clearer, and why context still beats autonomy.
southleft.substack.com
The future of design systems — part 1: The product your design system is actually building zeroheight.com/blog/the-fut...
The future of design systems — part 1: The product your design system is actually building - zeroheight
In the first of a three-part series, TJ Pitre explores why design systems need structural communication to support AI-ready products and what comes next.
zeroheight.com
Most enterprise design system teams don't have AI tools yet. The gates exist for good reasons. So we ran a workshop on getting Figma files AI-ready for tools the team doesn't have yet. Turns out none of the practices were actually AI-specific. 👉 southleft.substack.com/p/anatomy-of...
Anatomy of an AI-Ready Design System
The practices that make a design system AI-ready are the same ones that make it readable, period.
southleft.substack.com
Designers aren't cooked. Figma isn't dead. Claude Design isn't a Figma killer. A practitioner's read on what it is, what it isn't, and where Figma actually sits in this picture. southleft.substack.com/p/claude-des...
Claude Design Is Not a Design Systems Tool. That's Okay.
A design systems practitioner's honest read on what it is, what it isn't, and where Figma actually sits in this picture.
southleft.substack.com
"We're just naming files at this point" CLAUDE.md, .cursorrules, AGENTS.md, DESIGN.md, every AI tool has its own version of "put your instructions in a file" Tested whether DESIGN.md actually changes the output. It does. But not for the reasons people think. southleft.substack.com/p/designmd-f...
design.md
We just shipped accessibility tooling in Figma Console MCP that covers both the design and code side. It catches the stuff that slips through: contrast issues, missing focus states, undersized targets, bad aria attributes. And it fixes what it finds. In real time. www.linkedin.com/posts/tpitre...
Accessibility issues are the things that slip through the cracks. Not because teams don't care. Because there's a lot to track, and some of it just isn't visible until someone flags it. ...
Accessibility issues are the things that slip through the cracks. Not because teams don't care. Because there's a lot to track, and some of it just isn't visible until someone flags it. We just ship...
linkedin.com
Three prompts and about 20 minutes. That's all it took to generate a full Figma Slides presentation template from Brad Frost's design tokens using Figma Console MCP. Full writeup coming soon. For now, here's the video walkthrough: www.linkedin.com/posts/tpitre...
Three prompts. That's how many it took to generate a full Figma Slides presentation template from scratch using Figma Console MCP. No design agents. No UI frameworks. Just Claude running through...
Three prompts. That's how many it took to generate a full Figma Slides presentation template from scratch using Figma Console MCP. No design agents. No UI frameworks. Just Claude running through the...
linkedin.com
Designers have always had a seat at the table. For a long time, it felt like the kids' table. That's changing. New article on why there's never been a better time for designers to own their work all the way to shippable code. southleft.com/insights/des...
Designers, You're Not at the Kids' Table Anymore
There's never been a better time for designers to ship real code, and you don't need to "learn to code" to do it.
southleft.com
Everyone's hyped about writing back to Figma. I feel it too, but we're getting a little lost in the sauce. I'm on a mission to empower designers to lean more into code contributions. This demo is what that looks like in practice. www.linkedin.com/posts/tpitre...
Everyone's excited about writing back to Figma (I am too!). I totally get it. It's cool as hell. The Figma Console MCP has supported it for a while, and the native Figma MCP adding it is grea...
Everyone's excited about writing back to Figma (I am too!). I totally get it. It's cool as hell. The Figma Console MCP has supported it for a while, and the native Figma MCP adding it is great for th...
linkedin.com
New from @figma.bsky.social: native MCP write capabilities (beta) I ran a quick demo where I used it to generate a Chip component from code into Figma, then layered in Figma Console MCP for a code parity check. They complement each other well! Full breakdown: www.linkedin.com/posts/tpitre...
Figma just shipped write capabilities for their native MCP server. I've been using the beta ahead of today's launch. Here's my take: It's not a clone of Figma Console MCP. Different ...
Figma just shipped write capabilities for their native MCP server. I've been using the beta ahead of today's launch. Here's my take: It's not a clone of Figma Console MCP. Different tool, different ...
linkedin.com
Three big Story UI updates: → Voice Canvas (generate Storybook stories by voice) → Multi-framework support (Vue, Angular, Svelte, Web Components) → Multi-provider LLM support (Claude, OpenAI, Gemini). Free, open source. Full details: www.linkedin.com/posts/tpitre...
Some big updates to Story UI today. Three of them, actually! For those unfamiliar, Story UI is an open source tool we built at Southleft that lets you generate real layouts from your design system… |...
Some big updates to Story UI today. Three of them, actually! For those unfamiliar, Story UI is an open source tool we built at Southleft that lets you generate real layouts from your design system co...
linkedin.com
Your design system is now an API any AI platform can use. From your phone. Cloud Mode for Figma Console MCP: connect Claude, Lovable, v0, or Replit to your Figma files. No Node.js. No terminal. Just a pairing code. Full article + demo 👇 www.linkedin.com/posts/tpitre...
I’ve been getting a lot of questions about running Figma Console MCP with Codex, so I recorded a full demo and wrote up the setup. Covers the full workflow: installing MCP, connecting Figma, and running design → code parity checks. southleft.substack.com/p/running-fi...
Running Figma Console MCP with Codex
A complete walkthrough of connecting Codex to the Figma Console MCP and using it to inspect design systems, tokens, and design-to-code parity.
southleft.substack.com
AI code generators build with their own defaults. Your actual design system lives in Figma. So we added a new remote endpoint tool to Figma Console MCP that lets tools like Lovable, v0, and Replit read your system directly from Figma. www.linkedin.com/posts/tpitre...
Vibe code with your design system. Every AI app/code generator builds with its own defaults. Shadcn. Tailwind presets. Whatever the model reaches for. Meanwhile your actual design system lives in… |...
Vibe code with your design system. Every AI app/code generator builds with its own defaults. Shadcn. Tailwind presets. Whatever the model reaches for. Meanwhile your actual design system lives in Fi...
linkedin.com
We get asked a lot: how do you handle design system documentation? Here’s the workflow: Figma Console MCP → generate component docs Company Docs MCP → publish to vector DB Claude/Slack → query it live Docs as infrastructure. Full breakdown 👇 www.linkedin.com/posts/tpitre...
We get asked a lot: “How do you handle design system documentation?” So I recorded a full walkthrough of our actual workflow. Here’s the short version: 1. We use Figma Console MCP to generate… | TJ...
We get asked a lot: “How do you handle design system documentation?” So I recorded a full walkthrough of our actual workflow. Here’s the short version: 1. We use Figma Console MCP to generate compo...
linkedin.com
New demo: blank Figma canvas → full mobile screen with real components, then a Brutalist theme from scratch. All with our Figma Console MCP. Walkthrough: www.linkedin.com/posts/tpitre...
Most of the AI-meets-design conversation right now is about converting. Designs to code. Code to designs. Back and forth. It's great. But what about creating? I started with 4 things: → A blank...
Most of the AI-meets-design conversation right now is about converting. Designs to code. Code to designs. Back and forth. It's great. But what about creating? I started with 4 things: → A blank Fig...
linkedin.com