████████╗██╗   ██╗██████╗ ███████╗██╗   ██╗██╗   ███████╗██╗  ██╗
╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔════╝██║   ██║██║   ██╔════╝██║  ██║
   ██║    ╚████╔╝ ██████╔╝█████╗  ██║   ██║██║   ███████╗███████║
   ██║     ╚██╔╝  ██╔═══╝ ██╔══╝  ██║   ██║██║   ╚════██║██╔══██║
   ██║      ██║   ██║     ███████╗╚██████╔╝██║██╗███████║██║  ██║
   ╚═╝      ╚═╝   ╚═╝     ╚══════╝ ╚═════╝ ╚═╝╚═╝╚══════╝╚═╝  ╚═╝

Design system skill generator for agentic tools (ie. Claude Code, Open Code, Codex, Cursor, etc)

typeui.sh is an open-source command line interface (CLI) that generates, updates, and can download skill.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 systems

Check out all design systems that can be pulled into your project.

Available commands

Command	Description
generate	Run the interactive design system prompts and generate skill files.
update	Update existing managed skill content in generated files.
pull <slug>	Pull a registry skill from bergside/awesome-design-skills and write it to selected provider paths.
list	Show available registry specs from bergside/awesome-design-skills (with typeui.sh preview links), then pull one automatically.

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 list
node dist/cli.js pull [slug]

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.