Tessera

@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?

107 Posts78 Follower 117 Folgt

TJ @tpitre.bsky.social · 6d ago

I love slots. I don't think people use them enough. If your design system feels rigid, this is probably why. Slots make it flexible without you having to predict every future need. More here: www.linkedin.com/posts/tpitre...

Fun with slots! I love slots. Genuinely, unreasonably enthusiastic about them. I named my blog "Slot Machine" because of them. I've used them constantly on the development side of desi...

Fun with slots! I love slots. Genuinely, unreasonably enthusiastic about them. I named my blog "Slot Machine" because of them. I've used them constantly on the development side of design systems wor...

linkedin.com

TJ @tpitre.bsky.social · 3w ago

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

TJ @tpitre.bsky.social · 3w ago

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

TJ @tpitre.bsky.social · last mo.

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

TJ @tpitre.bsky.social · 2mo ago

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

TJ @tpitre.bsky.social · 2mo ago

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

TJ @tpitre.bsky.social · 2mo ago

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

TJ @tpitre.bsky.social · 3mo ago

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

Brad Frost @bradfrost.com · 3mo ago

(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

Brad Frost @bradfrost.com · 3mo ago

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

TJ @tpitre.bsky.social · 3mo ago

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

TJ @tpitre.bsky.social · 3mo ago

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

TJ @tpitre.bsky.social · 3mo ago

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… |...

linkedin.com

Brad Frost @bradfrost.com · 3mo ago

🎉 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

TJ @tpitre.bsky.social · 3mo ago

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

TJ @tpitre.bsky.social · 3mo ago

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

TJ @tpitre.bsky.social · 3mo ago

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

TJ @tpitre.bsky.social · 3mo ago

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

TJ @tpitre.bsky.social · 4mo ago

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

TJ @tpitre.bsky.social · 4mo ago

"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

TJ @tpitre.bsky.social · 4mo ago

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

TJ @tpitre.bsky.social · 5mo ago

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

TJ @tpitre.bsky.social · 5mo ago

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

TJ @tpitre.bsky.social · 5mo ago

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

TJ @tpitre.bsky.social · 5mo ago

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

TJ @tpitre.bsky.social · 5mo ago

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… |...

linkedin.com

TJ @tpitre.bsky.social · 5mo ago

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...

TJ @tpitre.bsky.social · 5mo ago

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

TJ @tpitre.bsky.social · 5mo ago

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… |...

linkedin.com

TJ @tpitre.bsky.social · 6mo ago

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...

linkedin.com