React components for AI coding 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.
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
Quick start
shadcn CLI
npx shadcn@latest add https://design.yaps.ai/r/chart-portfolio.json
MCP server (Claude Code, Claude, ChatGPT, Cursor, VS Code, Codex)
The site is a remote MCP server; nothing to install. Your agent signs in through the browser, so there's no key to copy:
claude mcp add --transport http design-for-ai https://design.yaps.ai/mcp/pro
# then run /mcp in Claude Code and choose Authenticate
The agents guide has one-click installs for Cursor and VS Code and steps for the Claude app, ChatGPT and Codex. Free components also work at https://design.yaps.ai/mcp with no sign-in.
Then ask: "Find a Design for AI chart component and add it to the dashboard." Prefer a local process? npx -y https://design.yaps.ai/mcp.tgz.
CLI
npx https://design.yaps.ai/cli.tgz search sign in
npx https://design.yaps.ai/cli.tgz add auth-sign-in # writes the file, installs its dependencies
npx https://design.yaps.ai/cli.tgz prompt auth-sign-in # the design brief, for your agent
Claude skill
Copy skills/design-for-ai into .claude/skills/ (one project) or ~/.claude/skills/ (every project). It teaches your agent when to reach for a component, how to adapt one without flattening it, and the checklist to run before it says it's done.
Paste the brief
Open any component page, hit Copy for agent, and paste it into your chat. You get the install command, the design brief and the source in one message.
For language models
Repository layout
app/ Next.js site (App Router): gallery, docs, blog, API, SEO routes
components/site/ Site chrome, never shipped to users
registry/free/<slug>/ Free components: <slug>.tsx, meta.json, prompt.md, prompt.json (MIT)
registry/pro/ Pro components, cloned from a private repo at build time (gitignored)
registry/pro-manifest.json Public metadata for Pro components
content/ Public documentation (Markdown)
registry/pro/_site/ Private blog source and localization dictionaries
scripts/ Registry build, screenshots, Pro sync
packages/mcp/ design-for-ai-mcp, the local (stdio) MCP server
packages/cli/ design-for-ai, the CLI
lib/mcp.ts, app/mcp/ the remote MCP server at /mcp and /mcp/pro (OAuth: lib/commerce/oauth.ts)
skills/design-for-ai/ Claude skill: find, adapt and review against the principles
docs/COMPONENT_SPEC.md The bar every component is held to
Develop
npm install
npm run dev # http://localhost:3000
node scripts/build-registry.mjs # validate every component
node scripts/shot.mjs <slug> --base=http://localhost:3000 # screenshots at 1440/768/390
Production runs on Cloudflare Workers (design-yaps, on design.yaps.ai) via OpenNext; see docs/DEPLOY.md. npm run preview runs the built Worker locally.
The site builds without the Pro source: Pro components render as locked cards using registry/pro-manifest.json. With access to the private repo, npm run pro:sync (needs PRO_REPO_TOKEN) clones it into registry/pro/.
Site pages and live demos support the same 30 languages as Yaps. English keeps its root URLs; other editions use /{locale}. Saved dictionaries live in content/site-i18n/, with reviewed terminology in content/site-i18n-overrides.json. After changing visible copy, run npm run site:translate (resumable), npm run site:audit, then rebuild the registry. In a proxy-based environment, run the translation command with NODE_USE_ENV_PROXY=1. The audit reports missing copy and invalid placeholders, names or URLs. Missing copy falls back to English while provider limits are resolved; it does not block other verified deployments.
Preview localisation is applied by the build loader; the downloadable source stays standalone. State values, prop names, code and commands remain exact. Add pure display inputs to DISPLAY_INPUTS in scripts/lib/localize-jsx.cjs when a component splits text into letters or paints copy into a canvas. Each preview loads its own content-addressed language file from public/locale-previews/ (generated and ignored), keeping the whole translation corpus out of the Worker. The site uses explicit locale parameters and React context rather than a mutable active language.
Contributing
New free components are welcome, and the bar is high on purpose. Read docs/COMPONENT_SPEC.md, build your component in registry/free/<slug>/, run the screenshot loop until it holds up at every width, and open a PR.
Licence
Free components, the site and the tooling are MIT. Pro components are licensed separately; see design.yaps.ai/docs/license.
Design for AI is a Yaps project.
