GEHIRN.md

Spots taken

21/50

29 left

We cap each batch at 50 users on purpose. Every account is reviewed by a human. We speak to early users to improve the product — that is how we keep GEHIRN.md from becoming yet another AI slop machine.

Login

Free

Design System

Drop in a homepage URL and get a structured design system file — colors, typography, components, and usage rules.

https://

What it is

A reverse-engineered design system in plain markdown

DESIGN.md is extracted directly from the rendered website — not from source code or design files. It captures the exact colors the browser paints, the actual font stack applied, and the component styles visible in the UI. The output is a structured reference that works as context for AI design tools, brand audits, and integration work.

Output

What the file contains

Color palette
Full set of applied colors with hex values and their semantic roles.
Typography
Font families, weight scales, size scales, and line-height conventions.
Spacing & layout
Inferred grid, container widths, padding, and gap patterns.
Component styles
Button shapes, input borders, card structures, and shadow conventions.
Border & radius
Border widths, colors, and corner radius values in use.
Design principles
Inferred rules: minimal vs. dense, flat vs. elevated, restrained vs. expressive.

How it works

Computed styles, not assumptions

  1. 01

    Headless render

    The analyzer loads the website in a sandboxed browser session. JavaScript executes, fonts load, and the browser paints the page exactly as a user would see it.

  2. 02

    Style extraction

    Computed CSS values are read for key elements — backgrounds, text, borders, shadows, and interactive components. Colors are normalized to hex. Font stacks are resolved to their loaded families.

  3. 03

    Pattern inference

    An LLM interprets the extracted values into named design system dimensions: color roles, type scale, spacing rhythm, and component patterns. Inferred principles are labeled as such.

FAQ

Common questions

What is a DESIGN.md file?
DESIGN.md is a structured markdown document that captures the visual design system of a website: the color palette with hex values, typography stack, spacing scale, component style patterns, and design principles inferred from visual decisions. It is produced without access to source code or design files — only the rendered public website.
How does the design system analyzer work without source code access?
The analyzer loads the website in a headless browser session and reads computed CSS values — applied colors, font stacks, computed sizes, and rendered component styles. It does not need Figma, design tokens, or a codebase. The output reflects what the browser actually renders.
What does DESIGN.md contain?
A typical DESIGN.md file includes: the full color palette with hex values and usage roles (background, surface, text, accent), the typography stack (font families, sizes, weights), spacing and layout patterns, button and input component styles, border and shadow conventions, and inferred design principles.
How accurate is the output?
Color and typography values are extracted directly from computed styles — they are exact. Component patterns and spacing scales are inferred from rendered output, which is accurate for sites with consistent design systems and approximate for sites with irregular styling.
Who uses DESIGN.md?
DESIGN.md is used by marketing teams needing brand-consistent asset production, developers building integrations that must match a client's visual identity, AI agents generating branded content, and competitive intelligence workflows comparing design posture across companies.
Is DESIGN.md generation free?
Yes. The design system analyzer is free with no account required. Results are cached per domain.