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

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. |

For local development:

npm install
npm run build
node dist/cli.js --help

License

The CLI is open-source under the MIT License.

Pro version

Get access to curated design system files by getting the pro version and supporting our work.

Sponsors

If you'd like to become a sponsor of the project, please contact us on our company website.