Sokosumi
Log In Talk to Sales Sign Up

Tool · Free

DESIGN.md Generator

Paste any website and get a DESIGN.md back: its colours, type, spacing and components written up as context you can hand to an AI coding agent.

LiveSpec

Try
Output will appear here. Paste a URL to extract colors, typography, spacing and components. Edit, copy or download the DESIGN.md.

How it works

One file your AI agents read in every coding session.

  1. 01

    Paste a URL

    A remote browser opens the page and reads its computed styles.

  2. 02

    Get the spec

    Colors, type, spacing, components and the reasoning behind them, in the open DESIGN.md format.

  3. 03

    Edit and download

    Drop the file in your repo. Claude Code, Cursor, Codex and Copilot follow it.

Questions

What is a DESIGN.md file?+

DESIGN.md is a plain-text design-system file for AI coding agents. It combines machine-readable tokens with human-readable guidance for colors, typography, spacing, shapes, components, and the visual decisions behind them.

How does the DESIGN.md generator work?+

Enter a public website URL. The generator opens the page in a remote browser, reads its visual signals, and produces a structured DESIGN.md that you can review, edit, copy, or download.

Which AI coding agents can use DESIGN.md?+

DESIGN.md is designed as durable repository context for coding agents and tools. Add the file to your project and tell your agent—such as Claude Code, Cursor, Codex, Copilot, or Gemini CLI—to follow it when implementing interface work.