TypeUI logoTypeUI

Design systems

A TypeUI design system is a set of markdown source files that tells your AI coding tool how your product UI should look, behave, and stay consistent.

Each design system can include colors, typography, spacing, radius, shadows, component rules, usage guidance, and a main instruction file. When you publish it, TypeUI MCP can use it as the design source for your AI-generated UI.

Manage

Open Dashboard design systems to create, import, edit, publish, and delete design systems.

You can start from a TypeUI theme, upload markdown files, or import a Figma file.

How the workflow works

Create a draft

Start from a theme, markdown ZIP, or Figma import to create an editable draft.

Review the markdown

Open View markdown source files and review them before publishing.

Files to review

The main entry file. It tells AI tools how to use this design system and where to look next.Logo and brand asset guidance. Colors, typography, and spacing stay in their own files.Color tokens and usage guidance for brand, surfaces, text, borders, and states.Font families, sizes, weights, line heights, headings, labels, and body text rules.Spacing, grids, containers, responsive behavior, and layout structure rules.Button sizes, variants, states, icon spacing, focus behavior, and accessibility rules.+14 more

Edit the source files

Adjust the markdown when you need clearer rules, stronger component guidance, or product-specific language. After publishing, TypeUI MCP uses your saved edits when it helps your AI tool build UI.

Publish for MCP

Publish when ready so your MCP-connected AI tool can use it. Each publish creates a new numbered version and asks for release notes.

Contents

A design system should describe the values and rules your AI tool should follow. Keep the files direct and specific:

Main skill file

Sets the overall visual direction and explains how the system should be used.

Foundations

Describes colors, type, spacing, radius, shadows, borders, and layout rules.

Components

Captures anatomy, variants, states, sizing, accessibility, and usage rules.

Product notes

Explains interaction tone, density, and product patterns that matter for your app.

Version history

Each publish creates a new version. Draft changes stay unpublished until you publish them.

Version 1

Published

First release

The first published design-system package is saved for MCP.

Version 2

Published

Current package

Saved project edits update the package MCP uses for AI tools.

Current

Latest saved

Saved edits

Brand kit, design skill, and markdown changes are used by the current package.

Project packages always use the latest saved project state.

Use from your AI tool

When TypeUI MCP is connected to your AI coding tool, you can ask for the design systems in your workspace. TypeUI returns the available options, you choose one, and TypeUI installs it for the current project before you continue building.

Show my workspace design systems.

I found 3 design systems in your workspace.

  • Bento Design System
  • Flowbite Design System
  • Acme Product UI

Tell me which one you want to use for this project.

TypeUI logo
Select Bento Design System.
Installed Bento Design System for this project. I will use its markdown source files for the next UI request.
TypeUI logo
Okay, build me a landing page now.

After a design system is selected, you can ask for normal UI work in plain language. TypeUI supplies the underlying design guidance from the installed markdown source files.

MCP installs the latest saved project package. When you update a brand kit, design skill, or markdown file in TypeUI, use the project from your MCP-connected tool again to pull the latest package.

MCP ServerVariations