Erste Schritte
Klicken Sie in der Symbolleiste auf das Stylebot-Symbol und dann auf Diese Seite stylen. Oder drücken Sie auf einem beliebigen Tab alt+shift+M, oder klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Stylebot → Element gestalten.
Klicken Sie auf die Elementauswahl, zeigen Sie auf die Seite und klicken Sie auf ein Element. Drücken Sie vor dem Klicken ↑, um stattdessen das übergeordnete Element auszuwählen. Ändern Sie es dann unter Einfach, oder schreiben Sie CSS unter Code. Änderungen werden sofort gespeichert und bei jedem Besuch der Website geladen.
- Schriftarten
- Durchsuchen Sie 400 Google Fonts, und Stylebot lädt die gewählte Schrift. Oder geben Sie eine beliebige auf Ihrem Computer installierte Schriftart ein.
- Position des Editors
- In Chrome und Edge öffnet sich der Editor im Seitenbereich. Über Position in seinem Menü ⋯ öffnen Sie ihn in einem separaten Fenster oder docken ihn in der Seite an. Firefox hat keinen Seitenbereich.
- Einen Stil ausschalten
- Verwenden Sie den Schalter im Popup oder alt+shift+S. Der Stil bleibt erhalten, wird aber nicht angewendet.
Profile
Ein Profil ist ein eigenes Stylesheet für dieselbe Website. So können Sie mehrere Looks behalten und zwischen ihnen wechseln. Es ist immer nur eines aktiv, und jede Website beginnt mit „Standard“.
Klicken Sie im Kopfbereich des Editors auf den Profilnamen neben der Website, um Profile zu erstellen, umzubenennen, zu duplizieren oder zu löschen. Wechseln Sie dort oder im Popup zwischen ihnen; im Popup schaltet Kein Stil das Styling für die Website aus. Neue Profile sind anfangs leer.
Befehlszeile
Mit dem Befehl stylebot kann ein Coding-Agent wie Claude Code, Codex oder Cursor Websites direkt in Ihrem Browser umgestalten – mit Ihrem eigenen Abo statt einem API-Schlüssel. So lassen Sie eine Website am besten von einem Agenten gestalten, und Sie können die Befehle auch selbst ausführen.
- Einrichtung
- Installieren Sie die CLI, verbinden Sie sie mit Ihren Browsern und aktivieren Sie dann in den Optionen Apps auf diesem Computer Stylebot steuern lassen. Die Seite zur Befehlszeile führt durch jeden Schritt. Vorerst nur für Chrome und Edge.
- Claude Code
- Fügen Sie das Stylebot-Plugin hinzu und bitten Sie mit
/stylebotum eine Änderung, etwa ein dunkles Design für eine Website. - Datenschutz
- Der Befehlszeilenzugriff ist ausgeschaltet, bis Sie ihn aktivieren. Stylebot und die CLI kommunizieren nur miteinander, auf diesem Computer; ein Agent sendet, was er liest, an seinen eigenen Anbieter.
Chat
Der Chat eignet sich ideal für schnelle Korrekturen. Beschreiben Sie im Chat-Tab die gewünschte Änderung, und Stylebot schreibt das CSS. Sie können ein Element auswählen, um auf etwas zu zeigen, oder einen Screenshot anhängen, um zu zeigen, was Sie meinen. Für größere Änderungen, etwa ein ganz neues Design, nutzen Sie die Befehlszeile.
- Eigener Schlüssel
- Verbinden Sie einen API-Schlüssel für Claude, OpenAI oder Gemini. Schlüssel werden nur auf diesem Computer gespeichert und nie synchronisiert. Nachrichten gehen direkt von Ihrem Browser an den Anbieter.
- Wohin Änderungen gehen
- Jede Änderung wird sofort angewendet und dem Stylesheet des aktuellen Profils hinzugefügt. Klicken Sie auf N Zeilen hinzugefügt, um sie unter „Code“ zu sehen, oder machen Sie sie im Chat rückgängig.
- Kosten
- Die Token-Anzahl unter dem Eingabefeld zeigt, wie viel die Unterhaltung verbraucht hat, samt geschätzten Kosten.
Lesbarkeit und Graustufen
Beide finden Sie im Tab „Voreinstellungen“, und sie lassen sich mit Ihren eigenen Änderungen kombinieren. Lesbarkeit verwandelt die Artikel einer Website in eine aufgeräumte Leseansicht, mit Design, Schriftart, Größe und Breite Ihrer Wahl; Seiten, die keine Artikel sind, bleiben unverändert. Graustufen entfernt die Farbe von der Website, in beliebiger Stärke.
Synchronisierung, Backup und Verlauf
- Google Drive-Synchronisierung
- Verbinden Sie Google Drive in den Optionen. Ihre Stile, einschließlich Profile, werden alle 30 Minuten und direkt nach jeder Änderung synchronisiert. Stylebot sieht nur die Dateien, die es selbst in Ihrem Drive erstellt, und es gibt keinen Stylebot-Server.
- Konflikte
- Wurde ein Stil auf zwei Computern geändert, bleibt Ihre neuere Änderung erhalten, und die andere Version wird in einem Kommentar gespeichert. So geht nichts verloren.
- Backup
- Exportieren und importieren Sie alle Ihre Stile als JSON in den Optionen.
- Versionsverlauf
- Jede Änderung auf diesem Computer bleibt in den Optionen erhalten, auch solche, die per Synchronisierung eintreffen. Stellen Sie jede frühere Version wieder her, für einzelne Websites oder alle.
URL-Regeln
Standardmäßig ordnet Stylebot Stile den Websites anhand des Domainnamens zu. Bearbeiten Sie die URL eines Stils in den Optionen und verwenden Sie diese Muster für genauere Regeln.
**Passt auf eine beliebige Zeichenfolge.*Passt auf eine beliebige Zeichenfolge bis zum nächsten /.,Trennt eine Liste von Mustern. Eine URL passt, wenn eines der Muster passt.^Macht die URL am Anfang zu einem regulären Ausdruck.Beispiele
docs.google.com- Die Domain docs.google.com oder eine ihrer Subdomains.
docs**- Jede URL, die mit docs beginnt.
docs*.google.com- docs.google.com, docs1.google.com, docs2.google.com usw.
*.ycombinator.com- news.ycombinator.com und apps.ycombinator.com.
docs.google.com, spreadsheets.google.com- Eine der beiden Domains oder eine ihrer Subdomains.
^http://www.reddit.com/$- Nur die Reddit-Startseite.
*- Jede Website. Nützlich für Stile, die überall gelten sollen.
Tastenkombinationen
Globale Tastenkombinationen funktionieren auf jeder Seite, die Stylebot gestalten kann. Ändern lassen sie sich in den Tastenkombinations-Einstellungen Ihres Browsers, verlinkt in den Optionen. Die Tastenkombinationen des Editors sehen Sie, wenn Sie dort ? drücken.
Hilfe und Support
Einen Fehler gefunden oder eine Idee? Erstellen Sie ein Issue auf GitHub. Stylebot ist kostenlos und Open Source und wird seit 2011 gepflegt. Wenn es Ihnen nützt, können Sie es unterstützen, indem Sie mir einen Kaffee spendieren.