Facebook's Release Just Gave Claude Code A New Design System
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Now Meta just did something huge. They released their own design system. And this isn't just any
00:00:04design system because it has two things you won't find in anything else. The first is that this is
00:00:09Meta's own system, the exact one their engineers have built and refined over eight years and still
00:00:14run across their apps. So it comes already proven at scale instead of being some fresh experiment.
00:00:19The second is the bigger one. It's the first design system actually built for AI agents to
00:00:23read and build with, not just for humans. Everything about it is set up so an agent can
00:00:28understand the whole system and use it directly instead of guessing its way through like it
00:00:32usually does. Now if you don't know us, we're a software company and this is our channel AI Labs
00:00:37where we show you how to optimize processes with AI just like how we've optimized our own. And in this
00:00:42video, we're going to go over Meta's new release in detail, how it actually is agents first and the
00:00:47skill we built to get far more out of it than it gives you on its own. Before we get into how this
00:00:51system looks, let's quickly cover what Asterix actually is. So Asterix is basically Meta's own
00:00:57internal system for building sites and they've just open sourced it. Meta's style is professional and
00:01:02minimal. It's the same design approach that shows up across Meta's own products. So minimalism mixed
00:01:08with brand level design and systems thinking. That way, every part of a site follows the same rules
00:01:13and fits together. It's fully customizable, so anyone using it can tweak it to their own brand colors and
00:01:19make Meta's system their own. It's built on React and Stylex, which are basically two of the most popular
00:01:24tools people use to build the front end of a site. And it's a component library kind of like ShadCN,
00:01:30where ShadCN gives us pre-built components we can drop straight into our app. Asterix gives us over
00:01:35150 Meta-style components we can tweak to what we need. It's also designed so agents can use it easily.
00:01:41It ships with ready-to-use templates for the pages that come up the most, like the login, settings,
00:01:47and chat pages, and the agent can pull those in directly as a starting point. You can even use the
00:01:51playground to see how your changes look. It shows the code on one side in an editable pane, and any
00:01:57change you make there shows up right away in the pane on the right. The playground's also where you can
00:02:01explore Asterix's themes. Each one has its own style, colors, and fonts that suit a different kind
00:02:07of website, and you can preview them right there to see which one you want without actually applying it
00:02:11to your project. Since it's still in beta, the engineers at Meta are actively updating and improving
00:02:17it. They built it off their 8 years of experience designing systems at the company, and it's already
00:02:22powering a huge number of the apps they've shipped. The main principle behind the library is guidance
00:02:27over enforcement, so instead of adding guardrails that stop agents from doing certain things, it just
00:02:32gives them components they can use directly. The guidance doesn't live in prompts, it lives in the docs and
00:02:37examples, because every convention needed to build with Asterix is documented, down to each rule and
00:02:42detail. So Asterix is built so both humans and AI agents can work with it without getting stuck. And
00:02:47because meta engineers build and maintain it, everything in the design system is tested and
00:02:52proven in practice, instead of based on assumptions about how things should work. Now that we know what
00:02:57Asterix is, the next step is getting it into a project. The install's pretty straightforward. You'll find
00:03:02the steps on GitHub, where you copy the install command for the package manager you're using.
00:03:07A package manager is basically the tool that installs and manages your project's code libraries.
00:03:12We were building our project with npm, so we copied that command, opened our project folder and pasted
00:03:17it in. Once that command ran, it installed both the core and the theme of Asterix. You can swap this
00:03:23theme for any of the ones we saw earlier, and since we liked the neutral theme for what we were building,
00:03:27that's the one we installed. Aside from the theme, the command also installs the CLI and adds
00:03:32Asterix as a project dependency, so the library's components can be used in the app. The CLI acts
00:03:38as a bridge between the agent and Asterix, and it lets the agent access and download the components
00:03:43it needs to build the site. Asterix also has an MCP, but the CLI is the better option because it only
00:03:49loads what it needs bit by bit and doesn't fill up the context window. There's one more thing you need
00:03:54to run if you're building with agents the way we always do with clod code, and that's the Asterix
00:03:58init command. What this init command does is get the project ready for AI coding agents to use. When you
00:04:04run it, it'll ask you a few questions, and it'll also ask whether you want a template. But if you're
00:04:09building on Next.js like us, there's one thing to watch out for. The template it installs lives in
00:04:13the pages folder, while Next.js uses an app folder. All the new Next.js projects use the app folder for
00:04:19creating pages, which is called the app router. The pages folder on the other hand means the older
00:04:24page router is being used. And the app folder and the pages folder can't both exist in the same
00:04:29project, having both will throw an error. So you need to move that template into the app folder,
00:04:34or change the page name to app during installation, so this doesn't cause conflicts in future runs.
00:04:40The init command changes the clod.md and agent.md files, which are basically the guiding files for
00:04:46whatever agent you're using to build. It adds all the instructions that help the agent know
00:04:50how to build with the Asterix CLI, which commands to run to get components and what process to follow.
00:04:56With those instructions, the agent builds the app properly using the CLI underneath,
00:05:01instead of guessing on its own or reaching for web search. And that matters because an agent working
00:05:05on its own doesn't quite get things right, as you might have experienced yourself. Asterix fixes this
00:05:11by keeping the agent grounded in documentation, so it works from documented facts instead of guesses.
00:05:16Through the clod.md file, the agents prompted to look for those docs using the CLI. The same prompt
00:05:22goes into the agent.md file too, so even if you use some other agent instead of clod, it still gets
00:05:28pointed to them. Even though we picked the blank template, its styles still fill up the globals.css
00:05:34file, which holds all the design and theme styles that apply across the whole website, so they can be used
00:05:39anywhere. The page itself renders empty for now, just a blank page, but from here we can use those styles
00:05:45to build out our site. And if you're enjoying the video so far, subscribe to the channel and hit the
00:05:50hype button. This small gesture of support goes a long way for us. With Asterix installed and the
00:05:55project ready for agents, we can start building an actual site. To use it, you just give the agent a
00:06:00prompt describing the website you want in detail. Once you send it, Claude starts by orienting itself with
00:06:06the project first, since we'd already installed the Next.js project. It then follows the Asterix workflow
00:06:11spelled out in the Claude.md file. Claude then calls the Asterix CLI tools and looks for the starter
00:06:17pack, the design prompts, and any other resources Asterix has that match the design direction we're
00:06:22going for. That way it doesn't rebuild things from scratch, it starts from what already exists.
00:06:27From there, Claude picks the template that fits best. It goes through multiple commands to pull all the
00:06:32components it needs. Then it starts writing the code for the app and runs it. The site it built was simple
00:06:37and did follow the minimalist style, though there were a few issues. One card was wrapping to a new line
00:06:43when it should have stayed aligned with the main line and the products weren't centered. The color theme
00:06:47it picked also looked like AI slop that usual blue and black theme AI models reach for while building
00:06:53almost any business website. And even though we were only building a simple site, it took a really long time,
00:06:58around 16 minutes, way longer than we expected. But before we move forward, let's have a word by our
00:07:03sponsor, Lychee Gen. I took this character artwork and a couple of minutes later, it was a fully 3D,
00:07:09ready to print model, no modeling skills needed. Here's how. With Lychee Gen, you go from an image,
00:07:14a sketch, or even a text prompt to a 3D model in minutes. I uploaded my artwork and it generated a clean,
00:07:21printable model right on screen. My figure looked great, but the sword felt too small. So in the edit
00:07:26studio I just said, make it bigger, without starting over. Then I opened it straight in Lychee Slicer,
00:07:31where it came in clean, watertight, and ready to print. And here's what actually matters. Lychee Gen
00:07:36is built by the team behind Lychee Slicer, the most popular resin printing software with over 800,000
00:07:42users. So these models aren't just pretty on screen, they're built to print, with clean topology and
00:07:48auto repair baked in. Every new account gets free credits, so your first model is completely free.
00:07:53Click the link in the pinned comment to get started with Lychee Gen.
00:07:57To fix that generated look, we first had to figure out exactly what was causing it. If you've watched
00:08:02our videos, you might remember the AI Labs design system we've talked about a lot before. For those
00:08:06who don't know, it's basically a collection of all the skills we use across the projects we build,
00:08:11whether internal or external. These skills have genuinely helped us. Inside those skills,
00:08:16there's an AI Slop Detector skill. Its main job is to run sites built by agents through a critical
00:08:21review session that finds all the patterns that count as AI Slop. That way, the design we build
00:08:27doesn't look generated, it looks designed. The skill produces a report, but it doesn't fix the issues on
00:08:32its own, so we can iterate and fix them ourselves. It's constantly evolving and already catches a lot
00:08:37of known patterns, and if you tell it something still looks like AI Slop, it adds that to its patterns,
00:08:42too. So we pulled that skill and ran it against the website. It started auditing the landing page,
00:08:47ran the scanner, and found all the issues. It reported that while the visual design was clean,
00:08:51it looked like a textbook-generated SaaS landing page. The scan came back with four findings that
00:08:56made it look like an AI Slop site, and the highest priority one was the overall look of the landing page.
00:09:02We then prompted it to run fixes for those issues. Once the skill ran the fixes, it changed the color
00:09:07palette from that typical AI Slop 1 to something more minimal. It fixed all the reported
00:09:12findings and cut the cliched wording so the site actually looked designed instead of generated.
00:09:17The result was way better than the first version. The next step was getting Asterix to build an
00:09:22impressive site on its own instead of a basic one we had to fix afterward. To get more out of the
00:09:27library and fix all the issues we were running into earlier, we made a skill called Asterix Max.
00:09:33The way this skill works is, instead of following the generic layout we saw the library use, where it
00:09:37leans on bare templates and builds simple sites, the skill pushes Asterix to its highest limits.
00:09:43The most important thing it does is ground the model. Basically keep it working from real facts
00:09:48instead of guesses. The way it does that is by running the Asterix manifest command, which creates
00:09:52a file that lists everything available. That makes the model aware of all the commands and flags it would
00:09:58otherwise miss, simply because it didn't know they existed. With that manifest, the model doesn't have to
00:10:03guess. It knows what exists in the CLI and can fix the issues it runs into. The skill then follows the
00:10:09instructions in the claw.md file and uses tools to actually see the design, checking things like clean
00:10:15grids and proper depth hierarchy, so those issues we hit don't happen again. It also has references across
00:10:20multiple areas and it includes evals, basically automatic checks to spot and run tests for issues. To test
00:10:27the skill we'd built, we also installed the AI Slop Detector skill here, so the two could work
00:10:32together to generate a better site. That meant we wouldn't have to fix it later. Everything could
00:10:36be done in a single run. We called the skill and told it the site we wanted to build. Like we instructed,
00:10:41it ran the manifest command first and gathered all the content it needed. It then followed a workflow
00:10:46similar to the one it used before to build the site. After that, the skill started using a headless
00:10:51chrome browser, basically a browser that runs without a window you can see, to check how the site looked.
00:10:56Working together with the AI Slop Detector skill, it repeatedly took screenshots,
00:11:00analyzed them and fixed the issues it found. By the end, all the changes were in place across
00:11:05the site. Even though this took longer, because it was reviewing and improving at the same time,
00:11:10the site that came out was significantly better. With this complementary skill, there were still a
00:11:14few issues, but we were able to fix them pretty effectively. The site was far better than Asterix
00:11:19working on its own. Now, the skill we just built, along with the AI Labs design system, can be found in
00:11:24AI Labs Pro, which is our community. That's where you'll get all the resources, the starter packs and
00:11:29more, along with a place to interact with a bunch of like-minded people, including our team. So if you've
00:11:34found value in what we do and want to support the channel, this is the best way to do it. The link's in
00:11:39the description. That brings us to the end of this video. If you'd like to support the channel and help
00:11:43us keep making videos like this, you can do so by using the super thanks button below. As always,
00:11:49thank you for watching, and I'll see you in the next one.