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.

Where to manage design systems

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.

Choose a themeUse a TypeUI theme as your starting point.Upload markdown ZIPCreate a system from markdown files.Beta previewImport from FigmaGenerate markdown from a Figma file.

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.

What belongs in a design system

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

  • The main skill file explains the overall visual direction and how the system should be used.
  • Foundation files describe colors, type, spacing, radius, shadows, borders, and layout rules.
  • Component files describe anatomy, variants, states, sizing, accessibility, and usage rules.
  • Product notes can explain interaction tone, density, and patterns that matter for your app.

MCP usage

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 ServerWorkspaces