richawo/design-components-for-ai-agents

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

Explore by category

Quick start

shadcn CLI

npx shadcn@latest add https://design.yaps.ai/r/chart-portfolio.json

MCP server (Claude Code, Cursor, Windsurf, VS Code)

The site is a remote MCP server; nothing to install:

claude mcp add --transport http design-for-ai https://design.yaps.ai/mcp

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

• Every page has a Markdown twin: add .md to any URL (/index.md, /pricing.md)
• /llms.txt: a map of the library
• /llms-full.txt: every free component’s prompt and JSON prompt
• /api/registry: a JSON index of everything

Repository layout

app/                    Next.js site (App Router): gallery, docs, blog, API, SEO routes
components/site/        Site chrome, never shipped to users
registry/free//   Free components: .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
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  --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/.

Contributing

New free components are welcome, and the bar is high on purpose. Read docs/COMPONENT_SPEC.md, build your component in registry/free//, 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.