webflow/webflow-skills

Asset-Audit

Analysiert Assets auf einer Webflow-Seite zur SEO-Optimierung.

Wichtiger Hinweis

Verwenden Sie IMMER die Webflow MCP-Tools für alle Vorgänge:

• Verwenden Sie das Webflow MCP data_assets_tool zum Abrufen und Aktualisieren von Assets
• Verwenden Sie das Webflow MCP get_asset_preview (mit der asset_id des Assets) zur Analyse des Bildinhalts
• Verwenden Sie das Webflow MCP data_sites_tool mit der Aktion list_sites, um verfügbare Sites aufzulisten
• Verwenden Sie das Webflow MCP webflow_guide_tool, um vor dem Start Best Practices zu erhalten
• Verwenden Sie KEINE anderen Tools oder Methoden für Webflow-Operationen
• Alle Tool-Aufrufe müssen den erforderlichen context-Parameter enthalten (15–25 Wörter, dritte Person)

Anleitung

Phase 1: Site-Auswahl & Asset-Erkennung

1. Site abrufen: Identifizieren Sie die Zielseite. Wenn der Benutzer keine Site-ID angibt, fragen Sie danach.
2. Alle Assets abrufen: Verwenden Sie das Webflow MCP data_assets_tool, um alle Assets von der Site abzurufen (jeder Asset-Datensatz enthält die asset_id, die für Vorschaubilder benötigt wird).
   • Bei Sites mit 50+ Assets verarbeiten Sie diese in Batches von 20.
   • Zeigen Sie den Fortschritt an: „Assets 1-20 von 150 werden verarbeitet...“
3. Muster erkennen: Analysieren Sie die Asset-Namensgebung auf häufige Muster:
   • Kamera-Uploads (IMG_, DSC_, usw.)
   • Screenshots (screenshot, Screen Shot, usw.)
   • Generische Namen (untitled, image-1, usw.)
   • Datumsbasierte Namen (2024-01-10, usw.)

Phase 2: Problem- & Musteranalyse

4. Probleme identifizieren: Listen Sie alle Assets auf, bei denen:
   • Kein Alt-Text festgelegt ist (null oder leerer String)
   • Vorhandener Alt-Text von schlechter Qualität ist (zu kurz, redundante Phrasen, usw.)
   • Keine SEO-freundlichen Asset-Namen vorliegen
   • Duplikate oder sehr ähnliche Assets existieren
5. Mustererkennungsbericht: Zeigen Sie die erkannten Muster an:

   🔍 Erkannte Muster:
   - 15 Assets beginnen mit „IMG_" (Kamera-Uploads)
   - 8 Assets enthalten „screenshot"
   - Vorschlag: Diese Muster stapelweise umbenennen
   

6. Benutzereinstellung erfragen: Fragen Sie, ob generiert werden soll:
   • Nur Alt-Text
   • Nur SEO-freundliche Namen
   • Beides
   • Ein Namensmuster/eine Vorlage anwenden

Phase 3: Analyse & Vorschlagsgenerierung

7. Assets analysieren: Verwenden Sie das Webflow MCP get_asset_preview-Tool und übergeben Sie die asset_id jedes Assets (aus Phase 1), um die Assets zu analysieren, die aktualisiert werden müssen.
   • Fehlerbehandlung: Wenn get_asset_preview des Webflow MCP fehlschlägt, verwenden Sie den Fallback:
     • Beschreibung aus vorhandenem Dateinamen extrahieren
     • Generischen Platzhalter mit Warnung verwenden
     • Mit anderen Assets fortfahren
   • Zur Vermeidung von Zeitüberschreitungen in Batches verarbeiten
8. Vorschläge mit Validierung generieren:
   • Alt-Text-Validierung:
     • Max. 125 Zeichen (Warnung bei Längerem)
     • Keine redundanten Phrasen („image of", „picture of", „photo of")
     • Muss mit Satzzeichen enden
     • Generische Beschreibungen markieren (Vertrauen < 50%)
   • SEO-Namensvalidierung:
     • Nur Kleinbuchstaben a-z, Ziffern 0-9, Bindestriche
     • Keine doppelten Erweiterungen (.webp.webp) – vorhandene Erweiterung zuerst entfernen
     • Max. 100 Zeichen
     • Leerzeichen/Unterstriche durch Bindestriche ersetzen
     • Keine Sonderzeichen
9. Ordnerorganisationsvorschläge: Wenn Muster erkannt wurden, schlagen Sie eine Ordnerstruktur vor:

   💡 Organisationsvorschläge:
   - Ordner „team-photos" für 8 Team-Bilder erstellen
   - Ordner „product-images" für 15 Produktaufnahmen erstellen
   

Phase 4: Detaillierte Freigabe & Anwendung

10. Vorschläge mit detaillierter Freigabe präsentieren:
    • Nummerierte Liste mit Kontrollkästchen anzeigen
    • Individuelles Umschalten ermöglichen: „Zahlen eingeben, um zu überspringen (z.B. '2,4')"
    • Optionen: „all", „none" oder bestimmte Zahlen
    • Validierungswarnungen für jeden Vorschlag anzeigen
11. Namensvorlage anbieten (bei vielen ähnlichen Assets):

    🎨 Namensmuster anwenden?
    1. [Kategorie]-[Beschreibung] (z.B. team-john-headshot)
    2. [Beschreibung]-[Ort] (z.B. office-workspace-desk)
    3. Benutzerdefiniertes Muster...
    4. Muster überspringen, einzelne Namen verwenden
    

12. Rollback-Daten speichern: Vor dem Anwenden von Änderungen speichern:
    • Ursprüngliche Asset-Namen
    • Ursprünglicher Alt-Text
    • Zeitstempel
    • Geänderte Assets
13. Updates anwenden: Verwenden Sie das Webflow MCP data_assets_tool, um nur genehmigte Assets zu aktualisieren.
    • Fortschritt bei Batch-Updates anzeigen
    • Teilfehler elegant behandeln
    • Erfolge und Fehler getrennt melden
14. Rollback-Option anbieten: Nachdem Änderungen angewendet wurden:

    📋 Rollback verfügbar:
    Letzte Aktualisierung: 4 Assets vor 2 Minuten geändert
    Geben Sie „undo" ein, um diese Änderungen rückgängig zu machen
    

Beispiele

Benutzeraufforderung:

Führe ein Asset-Audit auf meiner Site durch.

Schritt 1: Erster Audit-Bericht

📊 SEO Asset-Audit: MCP Demo #2

Insgesamt: 4 Assets

🔍 Erkannte Muster:
- 4 Assets haben generische numerische Namen (1.webp, 2.webp, 3.webp, 4.webp)
- Alle Assets sind im WebP-Format ✓

⚠️ Fehlender Alt-Text (4 Assets):
├── 1.webp (leerer Alt-Text)
├── 2.webp (leerer Alt-Text)
├── 3.webp (leerer Alt-Text)
└── 4.webp (leerer Alt-Text)

⚠️ Nicht SEO-freundliche Namen (4 Assets):
├── 1.webp (generischer numerischer Name)
├── 2.webp (generischer numerischer Name)
├── 3.webp (generischer numerischer Name)
└── 4.webp (generischer numerischer Name)

---

Was möchten Sie generieren?
1. Nur Alt-Text
2. Nur SEO-freundliche Namen
3. Sowohl Alt-Text als auch SEO-freundliche Namen

Bitte wählen Sie eine Option (1, 2 oder 3).

Beispiel mit Validierungswarnungen:

📋 Vorgeschlagene Verbesserungen:

[1] ✓ IMG_1234.jpg
    Alt-Text: „Professional team member headshot with blue background."
    Neuer Name: professional-team-member-headshot.jpg
    ✅ Validierung bestanden

[2] ✓ screenshot-2024.png
    Alt-Text: „Dashboard analytics overview showing user engagement metrics."
    Neuer Name: dashboard-analytics-overview.png
    ✅ Validierung bestanden

[3] ⚠️ untitled-image.webp
    Alt-Text: „Photo"
    ⚠️ Warnung: Alt-Text zu kurz (< 10 Zeichen) – benötigt mehr Details
    Neuer Name: untitled-image.webp
    ⚠️ Warnung: Konnte keinen besseren Namen generieren (Bildvorschau fehlgeschlagen)

[4] ⚠️ TeamPhoto2024!!!.jpg
    Alt-Text: „Image of a person working on laptop in modern office with plants and natural lighting through large windows in the background."
    ⚠️ Warnung: Alt-Text zu lang (137 Zeichen) – erwägen Sie eine Kürzung für Screenreader
    Neuer Name: team-photo-2024.jpg
    ✅ Validierung bestanden (Sonderzeichen entfernt)

Welche Assets möchten Sie aktualisieren?

Schritt 2: Nachdem der Benutzer Option 3 ausgewählt hat und Bilder analysiert wurden

📋 Vorgeschlagene Verbesserungen:

[1] ✓ 1.webp
    Alt-Text: „Podcast host with headphones and microphone recording Webflow podcast episode in studio."
    Neuer Name: webflow-podcast-host-recording-studio.webp
    ✅ Validierung bestanden

[2] ✓ 2.webp
    Alt-Text: „Professional developer wearing glasses working on laptop with Webflow logo in modern office."
    Neuer Name: developer-working-laptop-webflow-office.webp
    ✅ Validierung bestanden

[3] ✓ 3.webp
    Alt-Text: „Webflow homepage hero section with tagline and email signup form."
    Neuer Name: webflow-homepage-hero-section.webp
    ✅ Validierung bestanden

[4] ✓ 4.webp
    Alt-Text: „Speaker presenting on stage at Webflow Conf with audience watching."
    Neuer Name: webflow-conf-speaker-presentation-stage.webp
    ✅ Validierung bestanden

---

Welche Assets möchten Sie aktualisieren?
- Zahlen eingeben, um zu überspringen (z.B. „2,4" zum Überspringen von Element 2 und 4)
- „all" eingeben, um mit allen fortzufahren
- „none" eingeben, um abzubrechen

Schritt 3: Nachdem der Benutzer mit „all" bestätigt hat

🔄 Updates werden angewendet...

Fortschritt: ████████████████████ 100% (4/4 Assets)

✅ Updates erfolgreich angewendet!

SEO Asset-Audit abgeschlossen: MCP Demo #2

Zusammenfassung:
- ✅ 4 Assets erfolgreich aktualisiert
- ❌ 0 Assets fehlgeschlagen
- ⏭️ 0 Assets übersprungen

Angewandte Änderungen:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ Alt-Text hinzugefügt                                      │
│     ✓ Dateiname aktualisiert                                    │
├─────────────────────────────────────────────────────────────────┤
│ [2] developer-working-laptop-webflow-office.webp                │
│     ✓ Alt-Text hinzugefügt                                      │
│     ✓ Dateiname aktualisiert                                    │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ Alt-Text hinzugefügt                                      │
│     ✓ Dateiname aktualisiert                                    │
├─────────────────────────────────────────────────────────────────┤
│ [4] webflow-conf-speaker-presentation-stage.webp                │
│     ✓ Alt-Text hinzugefügt                                      │
│     ✓ Dateiname aktualisiert                                    │
└─────────────────────────────────────────────────────────────────┘

📋 Rollback verfügbar:
Letzte Aktualisierung: 4 Assets gerade eben geändert
Geben Sie „undo" ein, um diese Änderungen rückgängig zu machen

---

🎉 Die Assets Ihrer Site sind jetzt vollständig für SEO und Barrierefreiheit optimiert!

Alternativer Schritt 3: Benutzer wählt bestimmte Assets aus (z.B. „1,3")

🔄 Updates werden auf Assets 1 und 3 angewendet...

Fortschritt: ████████████████████ 100% (2/2 Assets)

✅ Teilweise Aktualisierung abgeschlossen!

Zusammenfassung:
- ✅ 2 Assets erfolgreich aktualisiert
- ❌ 0 Assets fehlgeschlagen
- ⏭️ 2 Assets übersprungen (wie gewünscht)

Angewandte Änderungen:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ Alt-Text hinzugefügt                                      │
│     ✓ Dateiname aktualisiert                                    │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ Alt-Text hinzugefügt                                      │
│     ✓ Dateiname aktualisiert                                    │
└─────────────────────────────────────────────────────────────────┘

Übersprungene Assets (Audit kann später erneut ausgeführt werden):
- [2] 2.webp
- [4] 4.webp

📋 Rollback verfügbar:
Geben Sie „undo" ein, um diese 2 Änderungen rückgängig zu machen

Richtlinien

Phase 1: Kritische Validierungen (Müssen befolgt werden)

Dateierweiterungsbehandlung:

• IMMER vorhandene Erweiterung entfernen, bevor eine neue hinzugefügt wird
• Schlecht: image.webp → new-name.webp.webp
• Gut: image.webp → new-name.webp
• Implementierung: Dateiname ohne Erweiterung + neue Erweiterung

Alt-Text-Qualitätsregeln:

• Maximale Länge: 125 Zeichen (Best Practice für Barrierefreiheit)
• Muss mit Satzzeichen enden (Punkt, Ausrufezeichen, Fragezeichen)
• Redundante Phrasen entfernen:
  • ❌ „Image of a person" → ✅ „Person working at desk"
  • ❌ „Picture of logo" → ✅ „Company logo on blue background"
  • ❌ „Photo showing" → ✅ Direkte Beschreibung
• Markieren, wenn zu kurz (< 10 Zeichen): ⚠️ „Zu generisch – benötigt mehr Details"
• Markieren, wenn zu lang (> 125 Zeichen): ⚠️ „Kürzung für Screenreader erwägen"

SEO-Dateinamen-Regeln:

• Nur erlaubt: Kleinbuchstaben a-z, Ziffern 0-9, Bindestriche
• Maximale Länge: 100 Zeichen (vor Erweiterung)
• Leerzeichen in Bindestriche umwandeln: team photo → team-photo
• Unterstriche in Bindestriche umwandeln: team_photo → team-photo
• Sonderzeichen entfernen: photo!@#$ → photo
• In Kleinbuchstaben umwandeln: TeamPhoto → team-photo
• Aufeinanderfolgende Bindestriche entfernen: team--photo → team-photo
• Führende/nachgestellte Bindestriche entfernen: -photo- → photo

Phase 2: Batch-Verarbeitung & Leistung

Große Sites verarbeiten:

• Sites mit 50+ Assets: In Batches von 20 verarbeiten
• Fortschritt anzeigen: „Batch 1 von 5 wird verarbeitet (Assets 1-20)..."
• Benutzer erlauben, bestimmte Batches zu verarbeiten
• Timeout-Schutz: Wenn get_asset_preview des Webflow MCP > 30s dauert, zum nächsten Batch springen

Mustererkennung: Erkennen und melden Sie diese Muster:

• Kamera-Uploads: IMG_, DSC_, DCIM_, P_
• Screenshots: screenshot, Screen Shot, Capture
• Generische Namen: untitled, image-1, photo, asset
• Datumsformate: 2024-01-10, 20240110, 01-10-2024
• Stapelumbenennung vorschlagen, wenn 3+ Assets einem Muster entsprechen

Fehlerbehandlung:

• Wenn get_asset_preview des Webflow MCP fehlschlägt:
  1. Fehler protokollieren (Benutzer nicht anzeigen)
  2. Fallback verwenden: Beschreibung aus Dateinamen extrahieren
  3. Mit ⚠️ Warnung markieren: „Aus Dateinamen generiert (Bildvorschau fehlgeschlagen)"
  4. Mit anderen Assets fortfahren
• Teilweise Erfolgsbehandlung:
  • Erfolge getrennt von Fehlern melden
  • Anzeigen: „✅ 15 aktualisiert, ❌ 2 fehlgeschlagen, ⏭️ 3 übersprungen"
  • Erneuten Versuch für fehlgeschlagene Assets anbieten

Phase 3: Erweiterte Funktionen

Detailliertes Freigabesystem:

• Jeden Vorschlag nummerieren: [1], [2], [3], usw.
• Status mit Häkchen anzeigen: ✓ oder ✗
• Mehrere Formate akzeptieren:
  • „all" – alle genehmigen
  • „none" – Vorgang abbrechen
  • „1,3,5" – Elemente 1, 3 und 5 überspringen
  • „2-5" – Elemente 2 bis 5 überspringen
• Validierungsstatus pro Element immer anzeigen

Namensvorlagen: Vorlagen anbieten, wenn 5+ ähnliche Assets erkannt wurden:

1. [Kategorie]-[Beschreibung]-[Modifikator]
   • Beispiel: product-laptop-front-view.jpg
2. [Beschreibung]-[Ort]-[Jahr]
   • Beispiel: team-photo-office-2024.jpg
3. [Typ]-[Name]-[Variante]
   • Beispiel: icon-arrow-blue.svg

Ordnerorganisation: Ordner vorschlagen beim Erkennen von:

• 5+ Bilder mit „team", „staff", „employee" → Ordner team-photos
• 5+ Bilder mit „product", „item" → Ordner product-images
• 5+ Bilder mit „logo", „brand" → Ordner branding
• 5+ Bilder mit „screenshot", „capture" → Ordner screenshots

Rollback-System: Vor jedem Update im Speicher ablegen:

{
  "timestamp": "2026-01-10T00:45:00Z",
  "assets": [
    {
      "id": "asset-id",
      "originalName": "1.webp",
      "originalAltText": "",
      "newName": "podcast-host.webp",
      "newAltText": "Podcast host recording..."
    }
  ]
}

• Rückgängig für 5 Minuten nach Änderungen anbieten
• Rollback-Daten nach dem nächsten Audit-Start löschen
• Rollback-Option in der endgültigen Zusammenfassung anzeigen

Duplikaterkennung:

• Asset-Größen vergleichen (exakte Übereinstimmung = wahrscheinlich Duplikat)
• Dateinamen vergleichen (ähnliche Namen = potenzielles Duplikat)
• Melden: „⚠️ Potenzielle Duplikate: asset1.jpg (2.4MB) und asset1-copy.jpg (2.4MB)"
• Nicht automatisch löschen – Benutzer entscheiden lassen

Allgemeine Best Practices

• Verwenden Sie immer das Webflow MCP get_asset_preview (mit asset_id, nicht einer URL), um den Bildinhalt zu verstehen.
• Überprüfen Sie vor der Generierung die Alt-Text-Qualität.
• Respektieren Sie die Batch-Grenzen von 20 Assets zur Leistungsoptimierung.
• Fragen Sie den Benutzer immer, bevor Sie Änderungen anwenden.
• Behalten Sie eine klare, konsistente Formatierung in allen Berichten bei.

Hinweise

• Löschen Sie Assets ohne Aufforderung des Benutzers
• Überspringen Sie die Alt-Text-Qualitätsvalidierung
• Ändern Sie die Asset-Erweiterung (behalten Sie das Original bei)
• Wenden Sie Änderungen an, ohne vorher die Zustimmung des Benutzers einzuholen
• Überspringen Sie die Mustererkennung bei großen Sites (führen Sie sie immer durch)
• Speichern Sie keine Rollback-Daten (notwendig für die Rückgängig-Funktion)
• Verwenden Sie nicht genehmigte Tools für Webflow-Operationen