We built TypeUI because we kept running into the same problem — AI coding agents produce inconsistent designs unless you give them a structured reference to follow. So we created an open source CLI tool and a public registry of handcrafted design skill files that solve this in a single command.
This post walks you through how to use the CLI: pulling skill files from the registry, generating your own from scratch, and a few things we learned along the way.
What is TypeUI?
At its core, TypeUI is two things:
- An open source CLI tool that runs in your terminal and helps you work with design skill files — pulling them from our registry or generating new ones.
- A public registry of curated design skill files, each one handcrafted and tested across AI coding agents like Claude Code, Cursor, Codex CLI, and Gemini CLI.
A design skill file is a structured markdown document that encodes an entire design system — typography, colors, spacing, component anatomy, accessibility rules, and explicit do/don't guardrails — in a format that AI agents can read and follow. Instead of describing your design preferences in every prompt, you drop a skill file into your project once and the agent applies it everywhere.
We currently have 48 design skills in the registry, ranging from clean and minimal to bold and experimental. You can browse all of them on our design skills page.
Pulling a design skill from the registry
The fastest way to get started is pulling an existing skill file. Say you want the "doodle" design — one command and you are done:
npx typeui.sh pull doodle
That command will install the Doodle skill for your AI agentic tools so anything you prompt it will build in this hand written style.
The general syntax is:
npx typeui.sh pull [slug]
Using pnpm
If pnpm is your package manager, use dlx instead of npx:
pnpm dlx typeui.sh pull [slug]
Same result, same command structure — just the runner changes.
Generating your own design skill file
Pulling from the registry is great when one of our existing styles fits your project. But sometimes you need something custom — your own brand, your own spacing rules, your own component conventions.
That is what the generate command is for:
npx typeui.sh generate
This walks you through creating a new design skill file from scratch. The CLI asks you a series of questions about your design preferences and then produces a structured skill file that follows the same format as everything in our registry.
The generated file is not a rough draft you need to heavily edit afterward. It comes out structured, complete, and ready to use. You get the same sections our handcrafted skills have — visual style, typography scale, color tokens, spacing rhythm, component families, accessibility requirements, and do/don't rules.
Once generated, you can tweak it however you want. Add rules specific to your project, remove sections that do not apply, or adjust the tone to match your team's conventions. It is your file.
How we built the CLI
When we designed the CLI, we did not start from scratch conceptually. We had already spent a lot of time thinking about what makes a good skill file — and we wrote that thinking down in our guide to building skills for Claude.
That guide covers everything from scoping your skill properly, to writing specific and testable rules, to structuring do/don't lists that actually prevent common agent mistakes. We took all of those principles and baked them into the CLI itself.
Getting started
Here is the short version if you just want to get moving:
Pull an existing design skill:
npx typeui.sh pull modern
Generate a custom one:
npx typeui.sh generate
Conclusion
The CLI is open source, the registry is public, and the skill files work with every major AI coding agent. Give it a try and see how much more consistent your AI-generated interfaces become when the agent has a proper design system to follow.