richawo/Design-components-for-AI-agents

**Bring taste to what your agent ships.**
Animated React, Tailwind CSS and React Native components for Claude Code, Cursor, Codex and other AI coding agents. Every component comes with source code, a design brief and a JSON prompt.
Explore components · Documentation · Connect your agent · Design principles · Pricing
Why Design for AI?
- **A designed starting point.** Give your agent a specific component instead of asking it to invent a design system from a blank prompt.
- **Three ways to build.** Install the React or React Native source, paste the design brief, or pass the JSON prompt to your agent. Each describes the same interface.
- **Motion with a purpose.** Chart ranges morph, replies stream, navigation moves on springs, and loading resolves into a result. Preview the behaviour before using it.
- **Your code, your stack.** Free components are MIT. Components live in your project, with typed props and explicit dependencies. Pro source is licensed separately.
See the components in motion
These are recordings of the actual components. Open any preview to try its controls, see the code or copy its brief. Readers with reduced motion enabled see still images.
AI agent hero A live terminal session, ordered reveals and a copyable install command. Try the component · Free
WebGL globe A rotating point globe with flight arcs and a quiet, precise readout. Try the component · Pro
Portfolio chart A hand-drawn SVG chart with range morphs, volume and a crosshair. Try the component · Free
Live analytics bento Drawing charts, counting figures and six tiles that tell one story. Try the component · Pro
React Native navigation Glass, morphing icons and a spring-driven lens, with an arc menu. Try the component · Free
Particle sphere A living point cloud with depth, rhythm and a restrained silver palette. Try the component · Pro
Browse the full component library →
What you get with every component
| Format | What it contains | When to use it |
| --- | --- | --- |
| **Source code** | A self-contained .tsx file with typed props. React + Tailwind CSS, or React Native with declared dependencies. | Install it in your project and adapt it. |
| **Design brief** | Type, spacing, colour, motion, responsive behaviour, accessibility and the choices to avoid. | Ask your agent to rebuild it in your brand or stack. |
| **JSON prompt** | The same brief as structured data with a consistent schema. | Automate generation or change one design decision at a time. |
Explore by category
| Build | Start here |
| --- | --- |
| AI chat, streaming answers and agent workflows | AI interfaces · Agent components |
| Landing pages and product marketing | Heroes · Features · Pricing |
| Dashboards and analytics | Charts · App UI |
| Generative visuals and WebGL | 3D components · Pixel components |
| Mobile apps | React Native components |
| Product UI and forms | Inputs · Authentication · Feedback |
Quick start
shadcn CLI
MCP server (Claude Code, Cursor, Windsurf, VS Code)