Components are the vocabulary of your product — the shared, reusable parts every screen is assembled from. When they all draw from the same tokens, consistency stops being a chore and becomes the default.
A real product needs dozens of recurring parts: buttons, inputs, badges, modals, tables, toasts. Rebuild them ad hoc and they drift — three button styles, four shades of "success." A component library defines each one once, wired to tokens, so every instance stays in sync.
These are live components rendered in your active theme:
Switch the theme in the playground and every one of these restyles at once — the same components, a new brand.
Each component in AIDesignSys ships with an AI-ready prompt — a precise description an assistant can build from. The twist: the prompt is filled with the active theme's real values. Copy the button prompt under one theme and it says "fill #C74F2B"; switch themes and it updates to the new color automatically.
That means the prompt you hand to Claude Code or Cursor is never generic. It's a spec for your button, in your brand, ready to paste.
Reach for an existing component instead of redesigning one. The hard calls are already made.
Shared tokens mean a new screen matches the last one without anyone policing it.
Each component's spec exports into the AI Package, so assistants build the real thing.
One library serves many brands — re-theme rather than rebuild.
Explore every component live, in any theme, and copy its AI-ready prompt.
Open the component library →