typeui.sh

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

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.