bergside__typeui

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

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.

Shared options for generate and update:

-p, --providers <providers> (comma-separated provider keys)
--dry-run (preview changes without writing files)

Shared options for pull:

-p, --providers <providers> (comma-separated provider keys)
--dry-run (preview changes without writing files)

Shared options for list:

-p, --providers <providers> (comma-separated providers passed through to auto-pull)
--dry-run (preview pull file changes without writing)

Design Skill File Structure

Generated files include YAML frontmatter plus a managed content block between:

Within the managed block, sections are structured like this:

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.

README.md