# TypeUI - Design skills for agentic tools

<img width="1448" height="1151" alt="Screenshot 2026-04-28 at 14 24 05" src="https://github.com/user-attachments/assets/b2bb4b43-5e56-4af4-bb28-71e0eb91f75c" />

<br />

[TypeUI](https://www.typeui.sh) is an open-source command line interface (CLI) that generates, updates, and can download `SKILL.md` or `DESIGN.md` files with design system specifications to instruct agentic tools and LLM's to use a certain design when building interfaces.

## Getting started

You can start building with TypeUI by using the NPX command:

```bash
npx typeui.sh --help
```

## Design skills

Check out all [design skills](https://www.typeui.sh/design-skills) that can be pulled into your project. Available in both `DESIGN.md` and `SKILL.md` formats.

## Available commands

| Command | Description |
| --- | --- |
| `generate` | Run interactive prompts, choose `SKILL.md` or `DESIGN.md`, then generate output files. |
| `update` | Run interactive prompts, choose `SKILL.md` or `DESIGN.md`, then update existing output files. |
| `pull <slug>` | Pull a registry markdown file from `bergside/awesome-design-skills` (`SKILL.md` -> provider paths, `DESIGN.md` -> project root `DESIGN.md`). |
| `list` | Show available registry specs from `bergside/awesome-design-skills` (with typeui.sh preview links), then pull one automatically. |
| `randomize` | Generate a fully randomized local design system and write `SKILL.md` or `DESIGN.md` outputs. |

## Design Skill File Structure

Here's a breakdown of the design skill file that is being generated by the TypeUI CLI.

| Section | What it does |
| --- | --- |
| `Mission` | Defines the design-system objective and expected output quality for the agent. |
| `Brand` | Captures product context and brand direction to anchor decisions. |
| `Style Foundations` | Defines core visual tokens and constraints (visual style, typography, color palette, spacing). |
| `Accessibility` | States accessibility standards and non-negotiable requirements. |
| `Writing Tone` | Sets tone/style for generated guidance language. |
| `Rules: Do` | Lists required implementation practices to follow. |
| `Rules: Don't` | Lists anti-patterns and prohibited behaviors. |
| `Expected Behavior` | Sets expectations for decision-making and trade-off handling. |
| `Guideline Authoring Workflow` | Gives the ordered process the agent should follow when producing guidelines. |
| `Required Output Structure` | Enforces the final response format for consistency and completeness. |
| `Component Rule Expectations` | Defines required interaction/state details in component guidance. |
| `Quality Gates` | Adds validation criteria for clarity, testability, and consistency. |
| `Example Constraint Language` | Standardizes wording strength (`must` vs `should`) and constraint style. |

## Local development

If you want to use this locally these are the commands you need to run:

```bash
npm install
npm run build
```

Then use the commands in your terminal:

```
node dist/cli.js --help
node dist/cli.js generate
node dist/cli.js generate --format design
node dist/cli.js randomize
node dist/cli.js randomize --format design
node dist/cli.js list
node dist/cli.js pull [slug]
node dist/cli.js pull [slug] --format design
node dist/cli.js list --format design
```

## License

The CLI and public registry is open-source under the MIT License.

## Pro version

Get access to enhanched design skill files and a private Discord community by getting the [pro version](https://www.typeui.sh/#pricing) and thus supporting our open-source work.

## Sponsors

If you'd like to become a sponsor of the project, please check out the [sponsorship page](https://www.typeui.sh/sponsor) on our website.
