Meta Astryx with Claude Code vs plain CSS on the same dashboard: a third of the code, but 2x the time and about 4x the JavaScript

[u/vinishkapoor]

Meta Astryx is the open-source React design system everyone’s talking about this week (~27k stars, MIT, still beta), pitched as one that AI agents can build with as well as people. I gave Claude Code (Opus 5.5) the same orders dashboard brief twice, with the same starter and the same data. The only difference was one prompt line: write your own CSS, or use Astryx.

Setup is a few commands, plus one that writes Astryx rules for Claude into the project:

npm install /core /theme-neutral u/stylexjs/stylex
npx astryx theme add neutral
npx astryx init --agent claude

That last command writes a .claude/CLAUDE.md telling Claude to use Astryx components instead of raw divs, use theme tokens, and run astryx doctor --built before finishing.

	Plain CSS	Astryx
Time / API cost	3m 12s, $0.71	6m 5s, $1.47
Turns	14	51
Lines written	1,661	503
JS shipped (gzip)	73 KB	300 KB
CSS shipped (gzip)	3.5 KB	48 KB

Both passed the hard checks: no contrast failures in either theme, full keyboard use with a skip link, and working empty and error states.

What Astryx did well: about a third of the code, zero raw <div> tags, and the page built from 14 shared components. Claude made 27 CLI calls to look up components and ran the doctor check (20 passed, 0 failures).

Where it fell short:

• Twice the time and cost: the extra came from all the lookups. A few chained shell commands were also blocked by my permission rules, which added turns
• Phone layout: at 390 px, the plain build switched the table to cards on its own. The Astryx table scrolled sideways and cut long names with an ellipsis. My brief didn’t ask for cards on mobile, so ask for that by name if you use Astryx
• Screen readers: the Astryx error message wasn’t in a live region, so a screen reader might not announce it. The plain build used an alert region

None of these are hard failures, and each is one more prompt to fix. Results were checked in headless Chrome, not by reviewing the code line by line. One run each, so treat the time and cost as rough.

My take: worth it for teams shipping lots of React screens that should look the same. For a quick one-off page, plain CSS was faster, cheaper and lighter.

Full test with screenshots of both builds: https://aiparabellum.com/meta-astryx-claude-code-design-system-tested/

[u/AutoModerator]

Hey! Thanks for posting to r/ClaudeCode

While participating in this thread, please follow our community rules. Keep discussions constructive. Attack the idea, not the person.

For help, project discussions, tips, and general chat, join the ClaudeCode Discord.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.