TJ

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

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

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

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

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

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

What matters more than location is that the rules are explicit and enforced. Once you have strong parity and governance, “truth” becomes portable.

On the “source of truth” question: I don’t think there’s a universal answer. It depends on team shape and where real decisions are being made.

Some teams anchor in code.
Some anchor in Figma.
Some anchor in a token repo or design contract.

Short answer: yes, you can absolutely start from code and reconstruct a system-aligned Figma file with components, variables, and tokens. It works best when the codebase is already structured and opinionated about tokens and semantics.

Everyone's talking about Claude Code to Figma right now. So I recorded a short demo showing a different version of that workflow that we've been using with Figma Console MCP. Important conte... Everyone's talking about Claude Code to Figma right now. So I recorded a short demo showing a different version of that workflow that we've been using with Figma Console MCP. Important context: this...

Posted a quick demo on Claude Code → Figma vs. Figma Console MCP in system-driven workflows.

Shows mapping live components back into Figma with real tokens and components.

Sharing in case it’s useful:
www.linkedin.com/posts/tpitre...

I woke up to a lot of messages about Figma’s new Claude Code → Figma announcement. So here are my thoughts in one place. First: I think it’s fine. It’s a solid feature for what it’s designed to do.…... I woke up to a lot of messages about Figma’s new Claude Code → Figma announcement. So here are my thoughts in one place. First: I think it’s fine. It’s a solid feature for what it’s designed to do. ...

Here are my thoughts on @figma.com's new Claude Code → Figma feature vs Figma Console MCP in one place.

www.linkedin.com/posts/tpitre...

When design drifts from code... This is part II from yesterday, where I shared a demo showing how developed components can quietly drift away from what's in Figma, and how you can catch that befo... When design drifts from code... This is part II from yesterday, where I shared a demo showing how developed components can quietly drift away from what's in Figma, and how you can catch that before i...

Design ↔ code drift is usually slow, subtle, and expensive.

I just published Part 1 & 2 of a demo showing how Figma Console MCP handles it both ways:

• Design → Code
• Code → Design

Detect drift. Decide what’s canonical. Re-align intentionally.

www.linkedin.com/posts/tpitre...

Design ↔ code drift is one of those problems everyone agrees is bad... But almost no one has a clean way to deal with it once it starts happening. Design changes. Code evolves. Teams are split… | T... Design ↔ code drift is one of those problems everyone agrees is bad... But almost no one has a clean way to deal with it once it starts happening. Design changes. Code evolves. Teams are split acro...

Every team says, “we’ll keep design and code in sync.”

Six sprints later:
…we didn’t.

Here’s how we’re handling drift with Figma Console MCP.

www.linkedin.com/posts/tpitre...

Did you all see our AI & Design Systems Super Bowl infomercial?

Our very own @tpitre.bsky.social shares some of the exciting ways to use AI & design systems together to help your team make better work.

Preorder the course & join our growing crew of AI & Design Systems nerds! aianddesign.systems

Just shipped a pretty big update to FigmaLint. This started as a side project to help designers sanity-check components before handoff. Over time, it's turned into something closer to a "pre... Just shipped a pretty big update to FigmaLint. This started as a side project to help designers sanity-check components before handoff. Over time, it's turned into something closer to a "pre-flight c...

Just shipped a major update to FigmaLint with multi-provider AI support, auto-fixes, accessibility scoring, and better handoff exports.

If you care about clean tokens, clear states, and ready-to-ship components, check this out 👇

🔗 www.linkedin.com/posts/tpitre...

Design systems are visual. Most MCP tooling hasn't been... until now! I just published a short demo showing MCP Apps running inside the Figma Console MCP. MCP Apps are now an official MCP… | TJ ... Design systems are visual. Most MCP tooling hasn't been... until now! I just published a short demo showing MCP Apps running inside the Figma Console MCP. MCP Apps are now an official MCP extension,...

Design systems are visual. Most MCP tooling hasn’t been... until now.

I demoed MCP Apps inside the Figma Console MCP with live token tables, health checks, scores + examples, and batch tools.

Check out the walkthrough:
www.linkedin.com/posts/tpitre...

I’ve heard a few folks mention that setting up the Figma Console MCP feels intimidating or cumbersome. So I recorded a full install walkthrough and timed it. From clone to live connection in Figma:…... I’ve heard a few folks mention that setting up the Figma Console MCP feels intimidating or cumbersome. So I recorded a full install walkthrough and timed it. From clone to live connection in Figma: ...

I’ve heard a few folks say the Figma Console MCP setup feels cumbersome.

I recorded the full install, start to finish.

Clone to live in Figma in under 3 minutes.

Full walkthrough 👇
www.linkedin.com/posts/tpitre...

“This is cute, but it’s not for enterprise design systems.” I got this feedback on a couple of Figma Console MCP demos. Challenge accepted. Because enterprise design systems are exactly what this…... “This is cute, but it’s not for enterprise design systems.” I got this feedback on a couple of Figma Console MCP demos. Challenge accepted. Because enterprise design systems are exactly what this ...

“This is cute, but it’s not for enterprise design systems.”

That line stuck with me. So I unpacked why the exact work that looks small in a demo is what actually saves hours, prevents drift, and scales design systems in the real world.

Full breakdown here 👇

www.linkedin.com/posts/tpitre...

One idea I keep coming back to: Design systems don't have to start in design or in code anymore. They can start with a well-architected token system. In this new demo, I show what that actually…... One idea I keep coming back to: Design systems don't have to start in design or in code anymore. They can start with a well-architected token system. In this new demo, I show what that actually look...

Hot take that keeps proving itself:

Design systems don’t start in Figma or Storybook.
They start with tokens that know what they’re doing.

I shared a demo showing how that plays out when your system can actually carry context across design and code.

👉 www.linkedin.com/posts/tpitre...

"Code-only props" by Nathan Curtis Nathan shared a thoughtful pattern for design systems: embedding non-visual metadata directly into Figma components. Things like accessibility labels, se... "Code-only props" by Nathan Curtis Nathan shared a thoughtful pattern for design systems: embedding non-visual metadata directly into Figma components. Things like accessibility labels, semantic rol...

Inspired by a great idea from Nathan Curtis on “code-only props” in Figma.

I recorded a short demo exploring how non-visual component metadata (accessibility, semantics, behavior) can live inside components and be consumed programmatically using Figma Console MCP.

www.linkedin.com/posts/tpitre...

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.

HOLY SHIT WE ARE COOKING ON OUR AI & DESIGN SYSTEMS COURSE!

@ian-frost.bsky.social @tpitre.bsky.social and I had a fantastic live session with our preorder community yesterday, and we just got off an epic (and meta!) working session.

Your design system just became an API. Check out this new Figma Console MCP demo, and how it _fundamentally changes_ how I think about interacting with Figma, not as a design tool, but as an… | TJ Pi... Your design system just became an API. Check out this new Figma Console MCP demo, and how it _fundamentally changes_ how I think about interacting with Figma, not as a design tool, but as an operatio...

If you manage Figma as a designer, DS lead, or engineer
this is the glue.

This isn’t “AI reads from Figma.”
It’s read and write control across projects, tokens, components, and docs.

If you watch one design systems + AI video today, make it this one.

👉 www.linkedin.com/posts/tpitre...

#cats | TJ Pitre We built an MCP that lets us create WordPress pages entirely through conversation. • No logging into WordPress. • No clicking around the admin. • Just talking through what we want and watching it h...

Built a WordPress page without opening WordPress.

Created a full services page for a fake cat grooming business — content, images, blocks, everything — just by talking to Claude through our MCP.

Demo video + the live page: www.linkedin.com/posts/tpitre...

#cats #wordpress

What the heck is A2UI anyway? If you’ve been reading posts about agent-driven UI lately, you've probably seen the term floating around and thought, "Okay, I think that seems cool... but what... What the heck is A2UI anyway? If you’ve been reading posts about agent-driven UI lately, you've probably seen the term floating around and thought, "Okay, I think that seems cool... but what does tha...

What the heck is A2UI anyway?

It’s not AI generating UI code. It’s AI describing intent for an interface, and your app rendering real components from your design system at runtime.

Post + demo here:
www.linkedin.com/posts/tpitre...

#ai #a2ui #designsystems

This is getting a little meta. Part 1: I dictated my thoughts about "less UI" into Claude. It created and published a blog post to our WordPress site via the Southleft MCP. Part 2 (this vi... This is getting a little meta. Part 1: I dictated my thoughts about "less UI" into Claude. It created and published a blog post to our WordPress site via the Southleft MCP. Part 2 (this video): I as...

Part II is up. This one gets a little recursive...

I used the AI workflow to write the LinkedIn post about the AI workflow.

But the real thread running through this: natural language is collapsing the space between intention and execution 🤯

www.linkedin.com/posts/tpitre...

I've been chasing this idea for years: one dashboard for everything. Juggling platforms is exhausting. Different logins. Unfamiliar UIs. Context switching between products. It drains you ov... I've been chasing this idea for years: one dashboard for everything. Juggling platforms is exhausting. Different logins. Unfamiliar UIs. Context switching between products. It drains you over t...

WordPress without wp-admin.

We built an MCP that handles posts, tags, images, publishing, everything, through natural language. No block editor. No dashboard juggling.

This is what less UI actually looks like.

www.linkedin.com/posts/tpitre...

We built an MCP for Harvest. And you can have it for FREE! Not because it was fun to build another connector, but because there are questions agencies keep asking that Harvest’s UI simply does not… |... We built an MCP for Harvest. And you can have it for FREE! Not because it was fun to build another connector, but because there are questions agencies keep asking that Harvest’s UI simply does not an...

We built an open-source MCP for Harvest because some of the most important agency questions are still oddly hard to answer.

Profitability, utilization, margin by project or client, year-end summaries.

Now you can just ask and get deterministic answers back.

www.linkedin.com/posts/tpitre...

I'm not ready to do a full Story UI v4 demo yet... But I did want to show something that feels like a real inflection point. Cursor's new visual editor is... kind of a big deal. It lets you:... I'm not ready to do a full Story UI v4 demo yet... But I did want to show something that feels like a real inflection point. Cursor's new visual editor is... kind of a big deal. It lets you: → Rearr...

Cursor’s new visual editor + Story UI is a strong combo.

Prompt a layout.
Visually refine it with real tokens and props.
Save the story. Done.

www.linkedin.com/posts/tpitre...

You Can Vibe Almost Anything Now. That’s the Good Part and the Risk. | TJ Pitre There’s a strange moment happening right now. AI has made it shockingly easy to build useful software. Internal tools. One-off workflows. Small apps that do one thing well and then get out of the wa...

You can vibe almost anything now.

That’s the good part.

It’s also where things get a little weird.

I wrote about vibe coding, ownership, and when it’s worth slowing down instead of subscribing.

www.linkedin.com/posts/tpitre...

London for the @zeroheight.com Design Systems Awards.

We didn’t take home the Innovation award, and that’s genuinely okay.

Being shortlisted mattered.
Meeting the design systems community in real life mattered more.

Great conversations, great food, great memories.

10/10 trip. Would do again.

When AI and Figma MCP work together seamlessly 🤝

#figma #mcp #ai #designsystems

Our Black Friday Course Sale Starts Now Our Black Friday sale starts now! It will run now through Friday, December 5th. Level up your design systems game and save with our biggest sale of the year: MEGA BUNDLE: save 45% & get all courses…

Last day of our Black Friday design systems course sale! bradfrost.com/blog/post/ou...

Introducing our new course: AI and Design Systems We’re thrilled to announce our new online course: AI & Design Systems! You can preorder the course now for $500. Generative AI is here, it’s increasingly powerful, and…it can make a huge mess. ...

📣 Introducing our new course, AI and Design Systems! bradfrost.com/blog/post/in...

AI can make a huge mess. The constraints of your design system can help keep AI on the rails. Our course will teach you core concepts and show you how to use AI & design systems together to make great things.