Concepts
What is a design.md?
Section titled “What is a design.md?”A design.md is a single Markdown file that describes a site’s visual language in a form that is useful to both humans and code-generating agents. getdesign writes one by rendering the target URL in a real browser, reading computed styles, clustering tokens, and emitting nine sections.
Visual runs also produce companion screenshots (hero and full-page WebP). Text-only mode omits them.
The nine sections
Section titled “The nine sections”These H2 titles are the frozen v1 contract:
- Visual Theme & Atmosphere
- Color Palette & Roles
- Typography Rules
- Component Stylings
- Layout Principles
- Depth & Elevation
- Interaction & Motion
- Responsive Behavior
- Agent Prompt Guide
Grounded in real CSS
Section titled “Grounded in real CSS”getdesign is not a static HTML scraper. It runs a real headless browser, walks the rendered DOM, and reads computed styles on representative nodes. Colors and type scales are clustered so that output reflects the site’s actual decisions, not one-off values.
One agent, five surfaces
Section titled “One agent, five surfaces”Web, API, CLI, and SDK share @getdesign/agent. The Skill matches the same 9-section contract using the host agent’s browser and file tools. A CLI result and a dashboard run should agree on the same site; Skill output follows the same headings without calling that agent package.