TypeUI: The Design Layer for AI Coding Agents

Zoltán Szőgyényi -

AI coding agents like Claude Code, Cursor, Codex CLI, and Gemini CLI can build entire interfaces from a single prompt. But anyone who has used them knows the problem — the first component looks great, the second one drifts, and by the third prompt your buttons have different padding, your fonts have changed, and you are spending more time fixing design inconsistencies than actually shipping.

That is the problem TypeUI was built to solve.

What is TypeUI?

TypeUI is an open-source CLI tool and a public registry of handcrafted design skill files. Together, they give AI coding agents a persistent, structured design system to follow — so the interfaces they generate are consistent, accessible, and production-ready from the first prompt to the last.

At its core, TypeUI is two things:

  1. An open-source CLI that runs in your terminal and lets you pull design skills from a public registry or generate your own custom ones.
  2. A curated registry of 50+ design skill files, each handcrafted and tested across multiple AI coding agents.

The CLI is released under the MIT license, the registry is free to browse, and every skill works with the AI tools you already use — no vendor lock-in, no new workflow to learn.

What are design skill files?

A design skill file is a structured markdown document (typically named SKILL.md) that encodes an entire design system in a format that AI agents can read and follow. Think of it as a design brief that never gets lost between prompts.

Each skill file covers:

  • Visual style and brand tone — the overall aesthetic direction
  • Typography scale and font choices — sizes, weights, line heights, and font families
  • Color palette with semantic tokens — primary, secondary, success, warning, danger, and neutral scales
  • Spacing and density modes — consistent rhythm across all components
  • Component families — buttons, inputs, cards, tables, navigation, modals, and dozens more
  • Accessibility standards — WCAG 2.2 AA compliance baked in
  • Do and don't rules — explicit guardrails that prevent common agent mistakes

When an AI agent has a design skill loaded, every component it generates inherits the same visual language. Buttons look the same whether the agent creates them on Monday or Friday. Spacing stays consistent whether you are building a hero section or a settings page.

The files live in your project directory at .agents/skills/design-system/SKILL.md by default, and they work across Cursor, Claude Code, Codex CLI, Gemini CLI, OpenCode, and any agent that reads markdown instructions.

The TypeUI CLI

The CLI is the fastest way to work with design skills. You do not need to install it globally — just run it with npx.

Pull a design skill from the registry

Browse the design skills page to find a style you like, then pull it with a single command:

npx typeui.sh pull modern

That command downloads the "Modern" skill file and installs it into your project. From that point on, any AI agent working in your codebase will follow the design system automatically.

The general syntax is:

npx typeui.sh pull [slug]

Generate a custom design skill

When none of the existing styles fit your brand, the generate command walks you through creating a skill file from scratch:

npx typeui.sh generate

The CLI asks you a series of questions about your design preferences — product basics, visual style, typography, colors, spacing, components, accessibility rules, and writing tone — and then produces a structured skill file that follows the same format as everything in the registry. The output is not a rough draft. It comes out complete and ready to use.

Other useful commands

npx typeui.sh list       # Browse all available skills in the terminal
npx typeui.sh update     # Update an existing skill file with new preferences
npx typeui.sh help       # Show all available commands

How it works in practice

Here is a typical workflow:

  1. Browse the registry — visit typeui.sh/design-skills and find a style that matches your project
  2. Pull the skill — run npx typeui.sh pull [slug] in your project directory
  3. Start building — prompt your AI agent as usual. It reads the skill file and applies the design system to everything it generates
  4. Customize as needed — the skill file is just markdown. Add rules specific to your project, remove sections that do not apply, or tweak the tokens to match your brand

The key insight is that you describe your design once and the agent follows it everywhere. No more repeating spacing values in prompts. No more fixing drift between sessions.

Open source and free to use

The TypeUI CLI is open source under the MIT license. The public registry of 50+ design skill files is free to browse, copy, and pull into any project. The skill files themselves work with every major AI coding agent.

Get started

Pull your first design skill right now:

npx typeui.sh pull modern

Or generate a custom one for your brand:

npx typeui.sh generate

Browse all design skills at typeui.sh/design-skills, explore the CLI documentation at typeui.sh/docs, and star the project on GitHub.