This ai design system from Meta is the first built for AI agents, and it powers the exact ai design workflow, ai design tools, and ai design process we use to turn a generic ai design agent into one that ships real, non-generic sites.

Community with All Resources: http://ailabspro.io
The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/


Meta just open-sourced Astryx, the internal design system its own engineers have built and refined over 8 years and still run across its apps. It's the first design system actually made for AI agents to read and build with, not just for humans, which is what makes it such a big unlock for ai web design and ai website design done through an agent instead of by hand. Think of it as claude ai design with a real system underneath, so the agent stops guessing and builds from documented components.

In this video we install Astryx, wire it up for agents, and build a real site with it using Claude Code, so treat this as both a Claude Code tutorial and a Claude design tutorial. It's built on React and StyleX with over 150 Meta-style components you can tweak to your brand, and its whole principle is guidance over enforcement, which is why claude ai website design and claude website design come out cleaner than usual.

But out of the box, Astryx still builds simple, generic sites. The color theme it reached for looked like AI slop, cards weren't aligned, and nothing felt designed. So we go further. We run our AI slop detector skill to catch every pattern that makes a site look AI-built, the small decisions that separate a real product from a demo, from spacing and depth to hierarchy and claude design ui polish. Then we build a second skill, Astryx Max, that grounds the model in Astryx's full manifest and uses a headless browser to screenshot, review and fix the site as it builds. Together these claude design skills push the library to its limit in a single run. Consider this the claude design 2.0 approach, the same realness layer we apply to layout, states and claude design animation details so the final build doesn't scream AI.

This is how we use artificial intelligence and vibe code real sites every day, an ai design generator workflow that treats AI as an ai tool you direct, not one you trust blindly. If you've been looking for an ai design setup that holds up beyond a demo, this is it.

The Astryx Max skill and the full AI Labs Design System are inside AI Labs Pro, our community, where you get all the resources, starter packs, and a place to build alongside our team.

Hashtags:
#ai #claudeDesign #claudeCodeTutorial #claudeDesignTutorial #artificialIntelligence #aiTool #vibeCode #aiDesign

AI LABS

Meta has open-sourced Asterisk, their internal design system built and refined over 8 years, now available as a React/StyleX component library with 150+ components. What sets it apart is being the first design system explicitly designed for AI agents to read and build with — it ships with a CLI, MCP support, and auto-configures agent instruction files (claude.md, agent.md) so tools like Claude Code can work from documented facts rather than guessing. The post walks through installation with npm, a Next.js app router gotcha with template placement, and how the CLI avoids filling up context windows. The author also demonstrates building a custom 'Asterisk Max' skill that runs the manifest command to expose all CLI flags, uses headless Chrome screenshots for visual QA, and integrates an 'AI slop detector' skill to catch and fix generic AI-generated design patterns — producing significantly better results than using Asterisk alone.

Facebook Just Gave Claude Code A New Design System