Doku

So funktioniert Design Extractor

URL einfügen, strukturierte Design-Spezifikation erhalten. Farben, Typografie, Abstände und Komponenten in einer DESIGN.md, die du direkt in ein Repo legen kannst.

Was ist eine DESIGN.md?

Eine DESIGN.md ist ein Designsystem-Dokument im Klartext, das Menschen und KI-Agenten gleichermaßen lesen können. Sie ist das Design-Gegenstück zu AGENTS.md. Während AGENTS.md Agenten sagt, wie das Projekt gebaut wird, sagt DESIGN.md ihnen, wie es aussehen und sich anfühlen soll.

Technisch hat jede DESIGN.md zwei Ebenen: YAML-Frontmatter mit maschinenlesbaren Design-Tokens und einen Markdown-Teil, der die Designentscheidungen begründet. Tokens geben Agenten exakte Werte. Der Text erklärt ihnen, warum es diese Werte gibt.

Die vollständige DESIGN.md-Spezifikation lesen ->

Kanonische Abschnitte

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

So funktioniert es

  1. Eingabe

    Füge eine öffentliche URL ein (z. B. design-extractor.com).

  2. Extraktion

    Das System ruft die Seite ab und analysiert ihre visuellen Eigenschaften: Farben, Typografie, Abstände, Komponentenmuster und die gesamte Designsprache.

  3. Ergebnis

    Eine DESIGN.md mit:

    • Überblick und Hinweise zum Markenstil
    • Farbpaletten mit benannten Tokens
    • Typografie-Stufen und Schrifteigenschaften
    • Layout-, Abstands- und Form-Tokens
    • Hinweisen zu Komponenten und Token-Referenzen
    • Do's and Don'ts als Leitplanken für das Design

Ergebnis

Jede Extraktion erzeugt eine DESIGN.md.

Markdown

  • DESIGN.md. Das kanonische DESIGN.md-Format wurde mit Google Stitch eingeführt. Leg die Datei in ein beliebiges Repo, damit KI-Agenten sie nutzen.

Chrome-Erweiterung

Extrahiere die Seite im aktuellen Tab, ohne hierher zurückzukommen. Die Erweiterung nutzt deine Sitzung auf der Website und verbraucht dieselben Credits. So funktioniert die Erweiterung ->

Die zentrale Erkenntnis

KI-Agenten liefern bessere Designs, wenn sie sowohl exakte Tokens als auch eine für Menschen lesbare Begründung bekommen. Das YAML-Frontmatter liefert die exakten Werte. Der Markdown-Teil erklärt, wie diese Werte in der Praxis eingesetzt werden.

Bereit zum Ausprobieren?

Hol dir eine DESIGN.md von jeder öffentlichen URL. Eine Extraktion dauert mindestens eine Minute.

Website extrahieren