design

astryx: Customizable Design System with Agent‑Ready Components

With 14k+ GitHub stars, astryx gives founders a fully customizable TypeScript design system ready for AI agents, speeding UI consistency across products.
13,591 stars+54★ this week1,171 forksTypeScriptGuide quality 9/10 · reviewed Oct 5Updated 10/11/2026100% free · open source
What it does

Astryx is an open-source design system that provides a fully customizable and agent-ready framework for building user interfaces

When to use it
  • •You need a design system that can be easily customized to fit your brand
  • •You want to build a user interface that can be controlled by external agents or services
  • •You are looking for an open-source solution that can be integrated with existing TypeScript projects
Ready-to-paste prompt
Run `yarn storybook` to start the Storybook server and explore the pre-built UI components
Heads up: Make sure you have Node.js (14 or higher) and Yarn installed on your system before attempting to install and run Astryx
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/astryx && curl -fsSL https://workflowstacks.com/api/skills/astryx/claude-skill -o ~/.claude/skills/astryx/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How astryx: Customizable Design System with Agent‑Ready Components works
Codeflow
Free to inspect

Astryx: Customizable Design System with Agent‑Ready Components is a very large TypeScript project (~724k lines across 4305 code files, plus 130 test files). It is a full software project: use it through its install path rather than reading it end to end. Last commit this month, MIT license, has a test suite.

Size
Very large codebase
~724k lines · 4305 code files · days to read — use, don't read
Setup
Developer setup
A real software project. Use it via its install path; don't expect to read it all.
Runs on
Node.js
No API keys detected
TypeScript 74%JavaScript 26%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    AGENTS.md
    The instructions the AI actually follows
  3. 3
    package.json
    Dependencies and the commands it exposes
  4. 4
    internal/README.md
    Inside internal/ — the main logic begins here
What's in each folder
internal/Core code — the actual logic372 files
packages/Sub-packages / plugins3650 files
apps/Sub-packages / plugins906 files
docs/Documentation74 files
scripts/Helper scripts56 files
.github/CI / automation (GitHub Actions)135 files
.claude/Editor / agent settings5 files
.changeset/Tool / agent settings3 files
READMEHas testsDocumentedCI checksMIT licenseUpdated this month
Quick Actions
Details
Creator
facebook
Language
TypeScript
Category
design
Published
1/9/2026

Are you the creator of this tool? and earn 85% of every sale.

Show it off in your README:

Featured on WorkflowStacks
[![Featured on WorkflowStacks](https://workflowstacks.com/api/badge/astryx.svg)](https://workflowstacks.com/skills/astryx?utm_source=github&utm_medium=badge)
🔥 Hot this week, in your inbox
Skills like this, every Monday.

The five fastest-growing open-source AI skills, ranked by GitHub star growth. One email a week, unsubscribe anytime.