fetaUI. An animated design system fetaUI. An animated design system
that agents can read. that agents can read.

Agents now write most new UI, and they build it from parts that were never made for them

Ask a coding agent for a settings page and it reaches for whatever it remembers: a static icon set, a component library it half knows, and props it guesses. The result works, but it is still and generic, and the agent cannot check what it wrote against real docs, because the docs are pictures and prose made for people.

Motion makes it worse. Product teams want interfaces that move, but the options do not hold together.

• Static sets are big but lifeless

  Thousands of icons, none of them moving, so every team hand animates the same bell and the same check.

• Animated sets are tiny

  Animated packs ship 100 to 300 icons, so teams mix sets and lose a single visual language.

• Motion is locked in players

  Lottie and JSON players are heavy, hard to recolor and hard to theme, and an agent cannot edit them.

• Agents read screenshots

  Docs are built for eyes. An agent gets no source, no props table and no tier, so it guesses.

One system, drawn once, generated everywhere, and readable by people and agents alike

I set three rules. Every icon exists in every style under the same name, so nobody mixes sets. Every icon and component moves, from plain SVG and Motion rather than a player, so it stays light and themeable. And every fact on the docs site is also served as text an agent can read, with the source to go with it.

The Free tier is open source under MIT: 744 Interface Essential icons in all 10 styles and 194 components, on npm and in a public shadcn registry. A one time Pro plan unlocks the rest of the icons and the Charts, AI, Blocks and Templates components, and pays for the work.

Figma is the contract, generators do the volume, and agents work inside review gates

Hand drawing 59,870 icons is not a plan, and hand editing generated code is how a system drifts. So the work split in two: what a person must decide, and what a machine must repeat exactly.

• 1. Specify

  I wrote the brief, the design spec and the motion spec first: the 24 px grid, naming, the 10 style constructions, tokens and the motion presets. Every later step reads from them.

• 2. Design in Figma

  The icon file holds every style as components with color modes. The UI file has a Handoff and a Motion frame per component, and those two frames are the build contract.

• 3. Generate

  Deterministic pipelines take an MIT licensed source set plus my own drawings, run 9 style transforms seeded by icon name, and emit SVGs, React components, the registry and the tokens. Generated code is never edited by hand.

• 4. Build with agents

  I set up 7 Claude Code agents with narrow jobs: component builder, code reviewer, UX copywriter, React Native writer, legal writer, security scan and performance review. None of them commits.

• 5. Review every commit

  Before each commit the security and performance agents report on the change. I accept or reject each finding, send the approved ones back to the same agent to apply, then rerun the checks.

• 6. Ship

  Pull requests into staging, a Vercel preview per branch, then a release to main. The Free package publishes to npm with trusted publishing, and CI rebuilds the Pro output so it never sits in git.

An agent should never have to guess a prop

fetaUI runs an MCP server at fetaui.dev/mcp. Once added to Claude Code, Cursor or VS Code, the agent can search every component and icon by name or purpose, read a component's usage, props, keyboard and motion, and pull the real source with every file it imports, so the result builds on its own.

For assistants without MCP, the same facts come as llms.txt and llms-full.txt, built from the docs on every deploy, and every component page has a Markdown version and a short Note for AI. Pro items keep to their public facts there: names, tiers and docs are open, source needs a key sent in a header.

• search

  Find components and icons by name or purpose, with tier and docs link.

• get_component

  Docs plus source, with the files it imports inline when asked.

• get_icon

  The SVG of an icon in any of the 10 styles, or its import.

• get_started

  Install, tokens and dark mode, set up in the agent's own project.

Every component moves, and the motion carries meaning

Each motion was designed in Figma first and built to its timing, on shared springs and durations generated from the Figma tokens. Every component respects reduced motion. The five Free ones below are live: use them. The two Pro ones are recordings, because their source stays behind the Pro key.

• Pull Chain Light

  Drag the cord down past the catch and let go, or press Space. The cord springs back, and the glow and drifting dust only run while the lamp is on.

• OTP Lock · Pro

  A padlock over a code grid. The shackle lifts while the code is checked, the lock shakes and turns red on a wrong code, and it opens green on the right one.

• Activity Rings

  Rings sweep in over 800 ms with an 80 ms stagger and lap past 100% when a goal is beaten. Hover isolates one ring and its legend.

• Call Summary · Pro

  A recorded call, after the meeting: talk time, key moments with a playable clip, the summary and next steps that check off.

• Boarding Pass

  A status change stamps a new Badge, and the field that changed, like the gate or the time, moves into a chip while the old value crossfades out.

• Avatar Upload

  Drop a photo or pick a sample face. Progress, replace and a size error that says what to do next all animate in place.

• Rich Text Editor

  Select text to format it, or type / on an empty line for blocks. It exports clean Markdown and HTML, and only known tags and safe links survive a paste.

• Ten styles from one drawing

  Outlined, Filled, Sharp, Two tone, Hand drawn, Riso, Pixel, Glass and Neon are transforms of Rounded, seeded by icon name so the output never changes between runs.

• No player, small icons

  Each icon is SVG plus a small Motion component. CI holds every style to a gzipped budget of 2 to 4.5 KB per icon, and Glass and Neon share their gradients and filters once per style.

• One loop at a time

  A shared loop coordinator lets only one looping icon play at once, so a page full of icons stays calm, and it stays a single instance across the Free and Pro packages.

• Tokens from Figma

  A generator turns the Figma token snapshot into CSS variables for light, dark and mobile, plus the springs and durations every component animates with.

• Pro never served in bulk

  Pro icons appear as raster thumbnails rendered at build time, with one live preview at a time. Pro source only leaves through the key checked registry and MCP server, never cached.

• More than React

  Every component page also carries a SwiftUI snippet, and a React Native port has started, written by an agent of its own.

The bottleneck moved from making to deciding

With generators and agents doing the volume, the hard part was never output. It was writing specs precise enough that a transform or an agent could follow them, and saying no to findings that were wrong or out of scope. The review gate mattered more than any single agent.

Building for agents also made the product better for people. Docs that an agent can read without guessing are docs a person can trust, and a props table generated from the source cannot drift from it.