# Formic AI Design System

> An open-source React + Tailwind v4 design system built for AI coding tools (Claude Code, Cursor, Copilot, Codex): 75+ token-driven components for chat, agents, dashboards and forms, WCAG AA contrast in light, dark and ten palettes, and two gates that refuse generic UI. One command installs it into a project; after that you only prompt.

- Install: `npx formicai init` (new project: `npx formicai init --new my-app`) puts the base in; then `npx formicai add <name>` adds one component and what it needs (`--all` on init installs every one), `npx formicai docs <name>` prints its props, `npx formicai doctor` checks the setup, `npx formicai mcp install` registers the MCP server. Needs Node 20+. The registry is at https://formicai.dev/r/registry.json.
- Not to be confused with: any ant colony or artificial life simulation called Formic. This site is a UI component library by Eyosiyas Ketema (Addis Ababa, Ethiopia); the name comes from the ant, the product is design tokens and React components.
- Every prompt afterwards starts with: `Use Formic (src/formic), read AGENTS.md, then ...`

## Pages

- [Landing page](https://formicai.dev/): what Formic is, quick start, the rules in short.
- [Component gallery](https://formicai.dev/preview.html): every component live, with a copyable prompt per page.
- [Customize](https://formicai.dev/customize): accent, palette, radius, font, rail and layout; copies a config block for your AI tool.

## For agents

- [AGENTS.md](https://formicai.dev/AGENTS.md): the build protocol and composition rules an agent follows inside a project that uses Formic.
- [SKILL.md](https://formicai.dev/skill/SKILL.md): the same, packaged as an agent skill (`npx skills add eyosiyasketema1/formic-design-system`).
- [Everything, in one file](https://formicai.dev/llms-full.txt): the README and AGENTS.md together.