# Website-Designstil-Extraktor Erfasst eine öffentliche Webseite und exportiert beobachtete Farben, Typografie, Abstände und Komponenten samt Bildschirmfoto. > Kanonische Seite: https://elysiatools.com/de/tools/website-design-style-extractor - **Kategorie:** Design - **Schlagwörter:** Websitestil, Design-Tokens, CSS, Typografie, Farbpalette, Bildschirmfoto ## Überblick Rendert eine öffentliche Seite in Chromium ohne KI. Wählen Sie Desktop (1440 × 1000) oder Mobil (390 × 844), eine helle oder dunkle Präferenz und 0–3000 ms zusätzliche Wartezeit. ZIP enthält design.md, screenshot.png, tokens.json und tokens.css; Markdown bettet das PNG als eigenständiges Dokument ein. Das Bildschirmfoto zeigt den festen Ausschnitt. Bis zu 2000 DOM-Elemente werden geprüft und höchstens 1000 sichtbare gerenderte Elemente erfasst, auch unterhalb des ersten Bildschirms, ohne automatisches Scrollen. Farben, CSS-Schriftstapel, Abstände, Rahmen, Radien, Schatten, Komponenten und lesbare benutzerdefinierte Eigenschaften sind Beobachtungen, nicht das ursprüngliche Designsystem. Schriftstapel belegen nicht die tatsächlich verwendete Schrift. Häufigkeiten zählen erfasste CSS-Deklarationen, nicht bemalte Fläche, Markenrollen oder Barrierefreiheitskonformität. Nur öffentliche HTTP-Adressen auf Port 80 und HTTPS-Adressen auf Port 443 ohne Zugangsdaten sind erlaubt. Grenzen pro Erfassung: 40 Sekunden, 30 MiB Netzwerkverkehr und 200 Anfragen sowie 8 MiB pro HTML-Dokument; blockierte Ressourcen und Stichprobengrenzen können die Abdeckung verringern. Die Erfassungs-Sandbox deaktiviert Pop-ups, Formularübermittlungen, Downloads, WebSocket-Verbindungen und Hintergrund-Worker; davon abhängige Inhalte können von der Darstellung in einem normalen Browser abweichen. Keine Anmeldung, Cookie-Zustimmung, CAPTCHA-Lösung, Klicks oder Prüfung fremder Frames. Die integrierte Demo nutzt die echte Chromium-Extraktion offline mit vollständig gesperrtem Netzwerk. ## Eingaben - **Quelle** (select) - **Website-URL** (text) - **Ansichtsfenster** (select) - **Farbschema** (select) - **Ausgabeformat** (select) - **Zusätzliche Wartezeit (ms)** (number) ## Wann verwenden - Wenn Sie Farbschemata, Abstände und Schriftstapel einer bestehenden Website für ein Designsystem dokumentieren wollen. - Wenn Sie den visuellen Zustand einer responsiven Seite im Desktop- oder Mobil-Viewport ohne Browser-Erweiterungen festhalten möchten. - Wenn Sie Tokens als JSON oder CSS-Variablen aus einer gerenderten Seite für Frontend-Prototypen übernehmen möchten. ## Funktionsweise - Geben Sie eine öffentliche HTTP- oder HTTPS-URL ein oder wählen Sie die Offline-Demo. - Legen Sie das Ansichtsfenster (Desktop 1440 × 1000 oder Mobil 390 × 844), das Farbschema (hell oder dunkel) und eine optionale Wartezeit bis 3000 ms fest. - Die Sandbox rendert die Seite in Chromium, analysiert bis zu 2000 DOM-Elemente und extrahiert Stile von bis zu 1000 sichtbaren Elementen. - Laden Sie das Ergebnis als ZIP-Archiv mit design.md, screenshot.png, tokens.json und tokens.css oder als eigenständige Markdown-Datei herunter. ## Anwendungsfälle - Frontend-Audit: Schnelle Bestandsaufnahme deklarierter Farben und CSS-Eigenschaften zur Bereinigung uneinheitlicher Stylesheets. - Design-Handover: Bereitstellung von Tokens im JSON- und CSS-Format für Entwickler basierend auf produktiven Seiten. - Visuelle Dokumentation: Festhalten von Hell- und Dunkelmodi einer Website zusammen mit einem hochauflösenden Screenshot. ## Häufig gestellte Fragen ### Welche Adressen und Ports werden unterstützt? Unterstützt werden ausschließlich öffentliche HTTP-Adressen auf Port 80 und HTTPS-Adressen auf Port 443 ohne Zugangsdaten. ### Kann das Werkzeug Cookie-Banner oder Anmeldedialoge überspringen? Nein, die Sandbox führt keine Klicks, Cookie-Zustimmungen, Logins oder CAPTCHA-Lösungen durch. ### Zeigt das Bildschirmfoto die vollständige Seitenhöhe? Nein, das Bildschirmfoto erfasst nur den festen Ausschnitt des gewählten Ansichtsfensters ohne automatisches Scrollen. ### Welche Dateien enthält das exportierte ZIP-Paket? Das ZIP-Archiv enthält die Dateien design.md, screenshot.png, tokens.json und tokens.css. ### Garantieren die erfassten CSS-Schriftstapel die tatsächlich gerenderte Schriftart? Nein, es werden lediglich die deklarierten CSS-Schriftstapel beobachtet, nicht die vom Betriebssystem tatsächlich geladenen Schriftdateien. ## Ähnliche Tools - [CMYK-Farbkonverter](https://elysiatools.com/de/tools/cmyk-converter): Konvertiert Farben zwischen HEX, RGB, HSL und CMYK. - [Farbraumkonverter](https://elysiatools.com/de/tools/color-space-converter): Konvertiert Farben zwischen HEX, RGB, HSL, CIELAB und Display-P3 mit CSS-Ausgabe und Gamut-Pruefung. - [CSS-Easing- und Animations-Visualisierer](https://elysiatools.com/de/tools/css-easing-visualizer): Visualisiert eine CSS-cubic-bezier-Easing-Kurve, zeigt Vorschau auf Position/Deckkraft/Skalierung, wählt Presets und exportiert CSS - [OKLCH-Farbkonverter](https://elysiatools.com/de/tools/oklch-color-converter): Bidirektionale Umrechnung zwischen HEX, RGB, HSL, OKLCH und Display-P3 nach CSS Color 4, mit Helligkeit-/Chroma-/Farbton-Werten, sRGB- und Display-P3-Gamut-Prüfung und Vorschlag zum Beschneiden außerhalb des Gamuts - [Barrierefreier Farbkontrast-Pruefer](https://elysiatools.com/de/tools/accessible-color-palette-contrast-checker): Prueft Farbpaare nach WCAG 2.1 AA und AAA und macht Anpassungsvorschlaege - [Adobe RGB zu HEX Konverter](https://elysiatools.com/de/tools/adobe-rgb-to-hex-converter): Adobe RGB-Farbwerte in HEX-Format für Webdesign umwandeln - [Analoge Farben](https://elysiatools.com/de/tools/color-analogous): Harmonische analoge Farbschemata mit benachbarten Farben auf dem Farbkreis generieren, die einheitliche und friedliche Kombinationen schaffen - [Farbkomplement](https://elysiatools.com/de/tools/color-complement): Komplementärfarben finden und harmonische Farbschemata mit triadischen, tetradischen und analogen Farbverhältnissen erstellen ## Beispiele - [Ant Design Beispiele](https://elysiatools.com/de/samples/ant-design): Ant Design Komponenten-Beispiele - Unternehmens-UI-Design-Sprache und React UI-Bibliothek mit reicher Sammlung hochwertiger Komponenten - [Änderungsprotokoll-Extraktor-Beispiele](https://elysiatools.com/de/samples/changelog-extractor): Verschiedene Änderungsprotokollformate zum Testen von Pars- und Extraktionswerkzeugen - [Markdown-Link-Extraktor-Beispiele](https://elysiatools.com/de/samples/markdown-with-links): Markdown-Beispieldokumente mit verschiedenen Linktypen zum Testen des Markdown-Link-Extraktor-Tools - [Telefonnummern-Extraktor Beispiele](https://elysiatools.com/de/samples/phone-number-extractor): Sammlung von gemischtem Text mit Telefonnummern aus verschiedenen Ländern für Extraktionstests