README.md

TypeUI - Design skills for agentic tools

TypeUI 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:

npx typeui.sh --help

Design skills

Check out all 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:

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 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 on our website.