Make Design MD

Build a visual DESIGN.md for your web app

Configure a web app design system in a live preview and download DESIGN.md guidance for coding agents.

Start designing

DESIGN.md Maker

Clarity Workspace

Static workspace · live preview

Loading local project data…

How it works

From visual choices to agent guidance

  1. Step 1

    Configure your visual system

    Set colors, type, spacing, layout, components, motion, and accessibility choices in one local workspace.

  2. Step 2

    Review the live preview and export

    Check common web app UI in the isolated preview, then download DESIGN.md in this project's adopted Google alpha format.

  3. Step 3

    Keep an editable backup

    Export a JSON project backup when you need to return to the same configuration later. DESIGN.md remains the generated delivery file.

Questions

Before you start

What does the preview represent?

It is an isolated sample web application that applies the same resolved design tokens used to generate DESIGN.md.

Can I edit a downloaded DESIGN.md later?

Use the JSON backup to restore an editable project. A downloaded DESIGN.md is guidance for agents, not a project-import format.

Does this tool need an account or a server?

No. The workspace runs in the browser and stores an editable project locally when browser storage is available.