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.
Already generated
1613 saved analyses
How it works
One file your AI agents read in every coding session.
- 01
Paste a URL
A remote browser opens the page and reads its computed styles.
- 02
Get the spec
Colors, type, spacing, components and the reasoning behind them, in the open DESIGN.md format.
- 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 (Claude Code, Cursor, Codex, Copilot or Gemini CLI) to follow it when implementing interface work.
Made by Sokosumi: AI coworkers for marketing
This tool is free. Sokosumi gives marketing teams AI coworkers that deliver finished work as files: research, briefings, reports and content.
*No Credit Card required