Siteprint
Siteprint · Coding · Prompts
Siteprint misst Farben, Schriften, Abstände und Layout jeder Website in einem echten Browser und macht daraus einen Prompt, ein DESIGN.md und Theme-Dateien, mit denen Coding-Agenten arbeiten können.
Über Siteprint
About
Was ist Siteprint
Siteprint ist ein Design-Extraktor für Websites. Sie fügen eine Adresse ein, die Seite öffnet sich in einem echten Browser auf der Seite des Dienstes, und nach etwa 20 Sekunden stehen Palette, Schriftstack, Typo-Skala, Abstandsstufen, Eckenradien, Schatten, Easing-Kurven, Breakpoints, Logo und Framework da. Gemessen wird auf der gerenderten Seite, die Werte zeigen also, was Besucher sehen, nicht was das Stylesheet verspricht.
Gelöst wird der Auftrag, den jeder KI-Builder irgendwann bekommt: mach es wie diese Seite. Ein Screenshot trägt das Aussehen, aber nicht die Werte. Der Agent rät bei Hex-Codes, Zeilenhöhen und Button-Innenabständen, und Sie schieben anschließend eine Stunde Pixel. Der Schritt von Website zu Prompt ist der Kern des Produkts: Siteprint liefert die exakten Werte in einem Prompt für Lovable, Claude Code oder Cursor, dazu eine DESIGN.md, die das Design als Richtung beschreibt und nicht als feste Seite.
Zwei Grenzen zählen vor dem Start. Siteprint misst ein Design, es baut keines, Sie brauchen also weiterhin einen Agenten oder einen Menschen für den Code. Und die Web-Version liest die Seite von ihrem Server, weshalb Seiten, die automatisierte Besucher blockieren, Logins oder eine einzelne Karte nur mit der Safari-Erweiterung auf einem Mac funktionieren.
Erste Schritte
- Öffnen Sie siteprint.app und fügen Sie eine Webadresse ein. Für diesen Schritt brauchen Sie kein Konto.
- Warten Sie den Scan ab. Siteprint öffnet die Seite in einem echten Browser, das dauert etwa 20 Sekunden, und füllt dann die Ansicht mit Messwerten.
- Lesen Sie die Bereiche, die Sie brauchen: Farben und ihre Rollen, Schriften und Textstile, Abstände und Formen, Schatten und Bewegung, Breakpoints, Assets und Technik. Ein Klick auf einen Wert kopiert ihn.
- Für Rebuild-Prompt und DESIGN.md melden Sie sich an und wechseln zu Pro. Öffnen Sie Build with this design und kopieren Sie den Prompt nach Lovable, Claude Code oder Cursor.
- Wenn Sie in Safari auf dem Mac arbeiten, installieren Sie die Erweiterung, um Seiten hinter einem Login, einzelne Abschnitte oder Seiten zu scannen, die automatisierte Besucher abweisen, und lassen Sie Ihren Agenten die gespeicherten Scans per MCP lesen.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Siteprint.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler und unabhängige Builder
- Designer, die eine Referenzseite untersuchen
- Gründer und Marketingteams, die ein Aussehen beschreiben können, aber kein CSS
- Teams, die mehrere Produkte optisch konsistent halten
Aufgaben
- Eine Landingpage in einem KI-Builder nachbauen
- Design-Tokens aus einer Seite ableiten, die Ihnen gefällt
- Ein bestehendes Projekt an eine Referenz angleichen
Szenarien
- Ein internes Dashboard auf den Look umstellen, den das Team schon abgesegnet hat
- Eine neue visuelle Richtung aus zwei Websites zusammensetzen
- Typo-Skala und Abstandsrhythmus eines Wettbewerbers vor einem Redesign prüfen
Wichtigste Funktionen
Palette mit Rollen
Siteprint listet jede Farbe der Seite, getrennt in neutrale Töne und Buntfarben, mit HEX, RGB und HSL. Jeder Scan wirkt als Designsystem der Seite: Neben den Farben vergibt er Rollen wie Fläche, Oberfläche, Text und gedämpft, damit der Agent weiß, welcher Ton wohin gehört. Dark-Mode-Varianten und Verläufe werden separat erfasst, wenn die Seite sie nutzt.
Typografie und Typo-Skala
Das Typografie-Panel nennt jede Schriftfamilie, ihre Gewichte, die geladenen Dateien und deren Herkunft. Textstile kommen mit Größe, Zeilenhöhe, Laufweite und dem Element, auf das sie wirken. Genau das liefert ein Screenshot nicht, und meistens beginnt hier das Abdriften beim Nachbau.
Abstände, Formen und Bewegung
Abstandsstufen, Eckenradien und Inhaltsbreiten werden aus dem gerenderten Layout gelesen, nicht geschätzt. Schatten, Easing-Kurven und Dauern erscheinen mit einer Vorschau, die beim Überfahren abspielt, was hilft, wenn sich ein Button auf der Referenzseite richtig anfühlt und in Ihrem Build falsch.
Rebuild-Prompt und DESIGN.md
Pro macht aus einem Scan einen einzigen Prompt, der Layout, Bewegung und Maße beschreibt, formatiert für den KI-Builder, den Sie nennen. Die DESIGN.md beschreibt dasselbe Design als Richtung statt als feste Seite, sodass der Agent es auf Bildschirme anwenden kann, die es auf der Referenzseite noch nicht gibt.
Exporte und Design-Tokens
Neben dem Prompt exportiert Siteprint eine Tailwind-v4-Konfiguration, shadcn/ui-Themes, CSS-Variablen und eine Token-Datei. Jede Farbe und jeder Textstil wird benannt und verortet, was den manuellen Umbenennungsdurchgang spart, der sonst einen Nachmittag frisst.
Agent-Zugriff über MCP
Die Safari-Erweiterung startet einen lokalen MCP-Designserver mit drei Werkzeugen: list_designs, get_design und get_reference_image. Claude Code, Cursor, Codex oder jeder andere MCP-Client lesen einen gespeicherten Scan als Prompt, Design, Layout, Tailwind-Konfiguration, shadcn-Theme, CSS oder JSON. In der Web-Version verbinden Sie den Agenten über die Library, und mit der Erweiterung verlassen die Dateien Ihren Rechner nicht.
Match your build
Fügen Sie die Adresse Ihrer eigenen Version ein, und Siteprint vergleicht sie mit der Referenzseite. Das Ergebnis ist eine Liste von Korrekturen plus ein Prompt, der Ihre Seite zum Original schiebt, was mehr bringt als ein Diff von Hex-Codes, wenn das Layout ein paar Pixel danebenliegt.
Vor- und Nachteile
Vorteile
- Kostenlose Prüfung beliebig vieler Websites, mit Kopieren per Klick und ohne Anmeldung.
- Die Werte stammen aus einem echten Render und enthalten damit berechnete Styles, die statisches HTML nicht zeigt.
- Der Rebuild-Prompt nennt Lovable, Claude Code, Cursor und andere Agenten beim Namen, was die Handarbeit am Prompt reduziert.
- Die Safari-Erweiterung liest Seiten lokal, dadurch sind Logins und Bot-Sperren erreichbar, und die Scans bleiben auf dem Mac.
- Compose und die Library machen aus einzelnen Nachschlagen einen wiederverwendbaren Referenzsatz.
Nachteile
- Rebuild-Prompt, DESIGN.md und Exporte liegen hinter Pro, der kostenlose Tarif beantwortet also Fragen, liefert aber nichts zum Bauen.
- Ein Web-Scan dauert etwa 20 Sekunden und scheitert auf Seiten, die automatisierte Besucher blockieren, was Mac-Nutzer zur bezahlten Erweiterung drängt.
- Die Erweiterung verlangt Safari unter macOS 14 oder neuer, Windows- und Chrome-Nutzer bleiben also beim langsameren Serverweg.
- Es misst und baut nicht, die Ausgabe bleibt ein Auftrag, den Ihr Agent richtig deuten muss.
Häufige Fragen
Eine Website zu prüfen ist kostenlos und braucht kein Konto, inklusive Farben, Schriften, Abständen, Assets und Technik. Pro kostet 9 $ im Monat oder 69 $ im Jahr und ergänzt Rebuild-Prompt, DESIGN.md, Exporte, animierten Hintergrund und Match your build. Die Safari-Erweiterung kostet einmalig 19,99 $.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Siteprint.
Alternativen zu Siteprint
Base Code
Base44 (Wix) · Coding · ProduktivitätBase Code ist eine geteilte Cloud-Entwicklungsumgebung von Base44. Das Team beschreibt Änderungen an einem bestehenden GitHub-Repository im Chat, prüft sie in der Vorschau und reicht sie als Pull Request ein.
Google EmbeddingGemma 2
Google DeepMind · Schreiben · Bilder · CodingGoogle EmbeddingGemma 2 ist ein offenes Modell mit 740 Millionen Parametern, das Text, Code, Bilder, Audio und Videobilder in Vektoren eines gemeinsamen 768-dimensionalen Raums umwandelt und auf Handys und Notebooks läuft.
GitGlow
GitGlow · Coding · ProduktivitätGitGlow ist ein Git-Client für den Desktop, der Ihren Code und die Änderungen Ihrer KI-Agenten in einer Review bündelt, damit Sie vor dem Ausliefern sehen, was die Maschine verlässt.