getdesign

Was ist getdesign?

getdesign extrahiert ein Design-System aus einer öffentlichen Website. Es öffnet die Seite in einem echten Browser, liest das CSS der Seite und erfasst die gerenderte Seite, dann schreibt es ihre Farben, Typografie, Abstände und Komponenten in eine design.md-Datei, die auf dem tatsächlichen CSS der Seite basiert. Die Ausgabe kann als Styleguide gelesen oder einem Coding-Agent als Kontext beim Erstellen einer Oberfläche übergeben werden.

Das Tool ist in fünf Oberflächen verfügbar, die einen gemeinsamen Agent-Kern teilen, plus einen Skill, der innerhalb eines Coding-Agents läuft. Es befindet sich derzeit in der Beta-Phase, und gehostete Ausführungen stützen sich auf eigene Provider-Schlüssel statt auf einen getdesign-API-Schlüssel.

Wie verwendet man getdesign?

Web-Dashboard

Melde dich beim Dashboard an, speichere deine Daytona- und OpenAI-Schlüssel unter Account, dann füge eine öffentliche Website-URL in Agent ein, um eine design.md zu generieren. Du kannst auch zwischengespeicherte Beispiele erkunden, ohne Provider auszuführen.

API

GET /v1/design unter api.getdesign.app gibt Markdown oder JSON zurück. WorkOS-Bearer-Authentifizierung und Provider-Schlüssel sind erforderlich.

CLI

Führe bunx @getdesign/cli auf Bun mit deinen Daytona- und OpenAI-Schlüsseln aus. Es schreibt design.md in eine lokale Datei.

SDK

Installiere @getdesign/sdk mit bun add @getdesign/sdk, um den Agent in-process auf Bun auszuführen, mit typisierten Ergebnissen und Fortschrittsereignissen, unter Verwendung deiner Provider-Schlüssel.

Skill

Füge die portable SKILL.md mit skills add MohtashamMurshid/getdesign hinzu. Sie läuft innerhalb von Claude Code, Codex oder Cursor und verwendet die eigenen Tools des Agents.

Kernfunktionen von getdesign

Extraktion des Design-Systems

getdesign liest die CSS-Tokens einer öffentlichen Seite, erfasst die Seite in einem Browser und erstellt ein Designdokument, das Farben, Typografie, Abstände und Komponenten abdeckt.

design.md-Ausgabe

Ergebnisse werden als Markdown-Dokument geliefert, das das Design-System der Website beschreibt. Visuelle Ausführungen enthalten auch erfasste Screenshots.

Mehrere Zugriffsoberflächen

Web, API, CLI und TypeScript-SDK greifen auf denselben Agent-Kern zu; der Skill läuft innerhalb deines eigenen Coding-Agents. CLI und SDK laufen lokal auf Bun, während die HTTP-API gehostete Ausführungen unterstützt.

Private Ausführungen mit optionaler Veröffentlichung

Dashboard-Ausführungen bleiben privat, bis du sie veröffentlichst. Die Veröffentlichung erstellt einen Link, den jeder verwenden kann, um das Designdokument und die Screenshots anzuzeigen und herunterzuladen; du kannst eine Ausführung wieder privat machen, um zukünftigen Zugriff zu schließen, obwohl bereits heruntergeladene Kopien bei ihren Empfängern verbleiben.

Anwendungsfälle von getdesign

Erstellen eines Styleguides von einer Live-Seite

Generiere ein lesbares Designdokument aus einer öffentlichen Website, das ihre Farben, Typografie, Abstände und Komponenten beschreibt.

Design-Kontext an einen Coding-Agent geben

Übergib die generierte design.md und ihre Screenshots an einen Coding-Agent, oder installiere den Skill, damit der Agent Design-Kontext mit seinen eigenen Tools extrahiert.

Ausführung der Extraktion in einem lokalen oder gehosteten Workflow

Verwende die CLI oder das TypeScript-SDK für lokale Ausführungen auf Bun, oder die HTTP-API für gehostete Ausführungen, die Markdown oder JSON zurückgeben.

Teilen eines Designdokuments

Veröffentliche eine Dashboard-Ausführung, um einen Link zu erstellen, den andere verwenden können, um das Designdokument und die Screenshots anzuzeigen und herunterzuladen.

Häufig gestellte Fragen zu getdesign

Was ist eine design.md-Datei?

Eine design.md ist ein Markdown-Dokument, das das Design-System einer Website beschreibt. Du kannst es als Styleguide lesen oder einem Coding-Agent als Kontext beim Erstellen einer Oberfläche geben. Visuelle Ausführungen enthalten auch erfasste Screenshots.

Wie extrahiere ich die Farben und Schriftarten einer Website?

Speichere deine Daytona- und OpenAI-Schlüssel unter Account, dann füge eine öffentliche Website-URL in Agent ein. getdesign liest CSS-Tokens, erfasst die Seite in einem Browser und generiert ein Designdokument, das du herunterladen kannst. Du kannst auch zwischengespeicherte Beispiele erkunden, ohne Provider auszuführen.

Kann ich getdesign mit einem Coding-Agent verwenden?

Ja. Gib deinem Coding-Agent die generierte design.md und ihre Screenshots, oder installiere den getdesign Skill, um Design-Kontext mit den eigenen Tools des Agents zu extrahieren. Die CLI und das TypeScript-SDK laufen auch lokal auf Bun, und die HTTP-API unterstützt gehostete Ausführungen.

Gibt es Authentifizierung oder eine kostenpflichtige Stufe?

Das Dashboard verwendet WorkOS-Anmeldung. Gehostete Ausführungen erfordern deine eigenen Daytona- und OpenAI-Schlüssel; es gibt keinen getdesign-API-Schlüssel in V1. V1 hat keine getdesign-Ausführungsabrechnung. Du zahlst Daytona für die Browser-Erfassung und OpenAI für die Modellnutzung.

Sind meine Design-Ausführungen öffentlich?

Deine Dashboard-Ausführungen sind privat, bis du sie veröffentlichst. Die Veröffentlichung erstellt einen Link, den jeder verwenden kann, um das Designdokument und die Screenshots anzuzeigen und herunterzuladen. Du kannst eine Ausführung wieder privat machen, um zukünftigen Zugriff zu schließen; bereits heruntergeladene Kopien verbleiben bei ihren Empfängern.