Meta Design Systems

A theme editor that lives within the “Craft” app, allowing users to live-edit and preview tokens — in this case, motion. Vibe-coded and shipped.

In 2025, I joined the cross design systems team to design the templates and motion libraries (both from scratch), which I shipped to 13k products / 96% of internal. This was in the midst of a big shift at the company to move towards vibing everything.

Making a system agents can build with starts with the basics, and we adhered to them: specs, skills, and rubrics that state the rules plainly. At our scale, that did not look like big single documents, but rather targeted ones for each individual component.

We went a step further and updated core components to match the vocabulary models actually use (for example, “Modal” became “Dialog”), and those decisions weren’t made by intuition.

I had agents build templates from prompts and then run their own checks, including visual tests, to see which names and structures produced the best results.

Components overview in the docsite
Component gallery in the docsite.

The templating work naturally led to building out the docsite, which was itself composed of new templates. The component details page was where it got especially fun, with features like live prop editing built right in.

This validated that the work done around templating and vibe-ability could help designers actually ship rather than rely on Figma designs. It unblocked so many experiences for the team.

Component details page with live prop editing
Component props scroll
(First) the component details page and (second) the component props page scrolled down. The preview remains visible on scroll.

The docsite included a template gallery from which people could browse vibe-coded templates, such as the “Newsroom” template below.

Because these were working templates, users could fork them and make their own modifications. We even had a “Craft” site that a few designers on the team built, which made this pretty easy for non-engineers.

Templates gallery with the Newsroom template
An example of a vibe-coded template from the template gallery.

In 2026, the design team all but stopped using Figma; our work was almost exclusively with agents and a browser.

Because we partnered closely with the Metamate (internal agent) team, I had the chance to collaborate with their designers on editing concepts in the browser. The concepts focused on the composer, with the ability to click elements on the page for context.

Metamate composer collaboration
A concept showing an accessibility “design insert” in the Metamate composer.

Via the composer, a user could call what I referred to as design inserts using slash commands, make changes, and publish them as diffs. The idea was very well received, but placed on the roadmap for later.

Components props scroll
A number of other “design insert” concepts.

While the Metamate route was temporarily blocked, I kept running into the same pain point with agents: some changes simply take too long. Exploring ideas is tedious compared to Figma.

So I partnered with an extension team, Livemate, and built a prop editor: click an element on the page, change its options, and preview the result. The idea came from the prop editor I had built for the docsite.

Livemate prop editor
A prop editor that was built to make designing in the browser faster.

No agent, no LLM, no waiting on anything to generate. It’s all deterministic and instant. In an agentic world, I do think experiences like this will be woven in where it makes sense.

Prop editor showing changes
An example of the page changing as different props are selected via the prop editor.

Coming from a long stint in product, I learned so much about modern design systems at scale at Meta, and got hands-on exposure to how design systems are changing for the agentic era.