Design System Builder

Make a design system everyone can follow, including your AI tools.

Design System Builder walks you through color, type, spacing, layout and components, with a live preview. Then it exports design.md for AI coding tools, plus design tokens, CSS and Tailwind for your code.

Start building, freeWhat is design.md?

No account. Your work saves in your browser.

Invoice #2041

$1,280.00

Paid

Northwind Studio · Due 30 Nov

Send receiptDownloadRefund
Harbor, an example system made with the builder. Every color and corner above comes from its tokens.

How it works

  1. 1

    Make your choices

    Go through short steps, from brand and color to type, spacing, layout and components. Each starts with good defaults, so skip any you’re happy with.

  2. 2

    See it come together

    A live preview shows your system on app screens and a website, in light and dark, at phone and desktop sizes.

  3. 3

    Export it

    Download design.md for AI coding tools, and tokens, CSS or Tailwind for code. Every file comes from the same choices, so they always match.

What you get

One set of choices, saved as the files your team and tools need.

  • design.md

    Your rules, tokens and component specs, written so AI coding tools follow them.

  • tokens.json

    Your design tokens (named values like color.accent) in the W3C format design tools read.

  • CSS

    Every color, font and size as a CSS variable, with light and dark themes.

  • Tailwind

    A Tailwind CSS v4 theme with only your colors and sizes in it.

Built for building with AI

AI coding tools like Cursor, Claude Code and GitHub Copilot are quick, but they guess at your design. design.md tells them your exact colors, spacing and components, and rules like “one main button per screen”, so every screen they build matches. For chat assistants, copy a link for AI tools instead: it opens as your design.md.

Read the design.md guideSee Harbor’s design.md

Why use it

  • Free, with no account

    Open it and start. There’s nothing to sign up for.

  • Your work stays with you

    Systems save in your browser, so nothing is uploaded. Share a link or a file when you want to.

  • Readable by default

    Text and background colors are checked for contrast in light and dark, and design.md only lists the pairs that pass.

Try it with an example

Open Harbor in the builder to see a finished system, change anything you like, and export it. It's added next to your own systems, so nothing of yours is replaced.

Open Harbor in the builder

Common questions

Do I need to know how to code?
No. You make every choice visually and see it in the preview. The builder writes the files.
Who is it for?
Designers and small teams who want a consistent product without a big design system team, and developers who want tokens without setting them up by hand.
Can my team work on the same system?
Send a share link from the builder, or export config.json and open it on another computer. There are no shared accounts.
How do AI tools use design.md?
You put it in your project and point your AI tool to it. The design.md guide shows how, tool by tool.

Start your design system

It takes a few minutes, and the defaults are a good place to start.

Open the builder