Eigene Visuals für Anleitungsseiten erstellen

Anleitungsseiten werden daran gemessen, ob die Bilder dem entsprechen, was der Leser vor sich hat, und Stockfotos oder Marketingaufnahmen des Herstellers fallen bei diesem Test auf den ersten Blick durch. Teams machen zwar eigene Screenshots, halten aber nichts darüber fest, wie und wo sie entstanden sind - ändert sich also die Oberfläche, lässt sich die Seite nur reparieren, indem der gesamte Durchlauf neu gemacht wird. Das Aufnehmen ist der billige Teil; die Methode existiert, damit auch die zweite Aufnahme billig bleibt.

Die Skill-Datei

---
name: original-visuals-for-procedural-content
description: Nutzen Sie dies, wenn eine Anleitungsseite von Screenshots oder Diagrammen abhängt, die jetzt korrekt sein müssen und reparierbar bleiben sollen, wenn sich die Oberfläche ändert.
---

# Eigene Visuals für Anleitungsseiten erstellen

Anleitungsseiten werden daran gemessen, ob die Bilder dem entsprechen, was der Leser vor sich hat, und Stockfotos oder Marketingaufnahmen des Herstellers fallen bei diesem Test auf den ersten Blick durch. Teams machen zwar eigene Screenshots, halten aber nichts darüber fest, wie und wo sie entstanden sind - ändert sich also die Oberfläche, lässt sich die Seite nur reparieren, indem der gesamte Durchlauf neu gemacht wird. Das Aufnehmen ist der billige Teil; die Methode existiert, damit auch die zweite Aufnahme billig bleibt.

## Was Sie vorher brauchen

- Zugang zum tatsächlichen Produkt oder Prozess in der Version, die die Seite beschreibt
- ein festes Aufnahme-Setup: eine Viewport-Breite, eine Zoomstufe, ein Theme, ein Demokonto
- die abgestimmte Schrittliste, der die Visuals entsprechen müssen, festgelegt vor Beginn der Aufnahmen
- einen Ort für bearbeitbare Quelldateien, nicht nur für die exportierten Bilder

## Methode

1. Legen Sie die Aufnahmeumgebung fest, bevor Sie irgendetwas aufnehmen: eine Breite, ein Zoom, ein Theme, ein Konto. Bei gemischten Breiten aufgenommene Bilder lassen sich nicht konsistent wiederholen und wirken aus verschiedenen Produkten zusammengesetzt.
2. Befüllen Sie das Demokonto mit plausiblen Daten. Leere Zustände und offensichtlicher Platzhaltertext lassen Leser an der Anleitung zweifeln, und echte Kundendaten dürfen überhaupt nicht veröffentlicht werden.
3. Nehmen Sie jeden Schritt auf, auch die, die zu offensichtlich für ein Bild wirken. Der fehlende Screenshot ist immer der Schritt, an dem Leser hängenbleiben, und für eine einzelne Aufnahme zurückzukehren kostet mehr, als sie jetzt zu machen.
4. Annotieren Sie auf einer eigenen Ebene und bewahren Sie die Quelldatei auf. In einen flachen Export eingebrannte Pfeile erzwingen eine komplette Neuaufnahme, wenn sich eine Beschriftung um zehn Pixel verschiebt.
5. Beschneiden Sie auf den relevanten Bereich statt auf das ganze Fenster. Vollbildaufnahmen schrumpfen auf dem Telefon ins Unlesbare, und dort wird der meiste Anleitungs-Traffic gelesen.
6. Schreiben Sie Alt-Texte, die beschreiben, was der Leser sehen soll, statt die Datei zu benennen. "Reiter Abrechnung mit ausgewähltem Jahrestarif" ist nützlich, "Screenshot der Einstellungen" nicht.
7. Halten Sie Aufnahmedatum, Produktversion und verwendetes Konto neben der Seite fest. Ohne dieses Protokoll wird die Aktualisierung ein neues Projekt statt einer Bearbeitung.

## Was dabei herauskommt

Ein versionierter Satz annotierter Visuals mit bearbeitbaren Quelldateien, geschriebenen Alt-Texten und einem Aufnahmeprotokoll mit Produktversion und Datum.

## Wo es schiefgeht

- Nur in einem breiten Desktop-Viewport aufnehmen, sodass die Bilder auf den Telefonen der meisten Leser unlesbar sind
- Aufnahmen mit echten Kontodaten oder internen Namen veröffentlichen, ein Datenschutzproblem, das die Seite überdauert
- Annotationen in den Export einbrennen und die Quelldatei verwerfen, sodass jede Oberflächenänderung die Neuaufnahme der gesamten Sequenz bedeutet

---

Aus der QuQi-Skill-Bibliothek - https://www.quqi.io/de/skills/original-visuals-for-procedural-content

Was Sie vorher brauchen

• Zugang zum tatsächlichen Produkt oder Prozess in der Version, die die Seite beschreibt
• ein festes Aufnahme-Setup: eine Viewport-Breite, eine Zoomstufe, ein Theme, ein Demokonto
• die abgestimmte Schrittliste, der die Visuals entsprechen müssen, festgelegt vor Beginn der Aufnahmen
• einen Ort für bearbeitbare Quelldateien, nicht nur für die exportierten Bilder

Methode

1. 01 Legen Sie die Aufnahmeumgebung fest, bevor Sie irgendetwas aufnehmen: eine Breite, ein Zoom, ein Theme, ein Konto. Bei gemischten Breiten aufgenommene Bilder lassen sich nicht konsistent wiederholen und wirken aus verschiedenen Produkten zusammengesetzt.
2. 02 Befüllen Sie das Demokonto mit plausiblen Daten. Leere Zustände und offensichtlicher Platzhaltertext lassen Leser an der Anleitung zweifeln, und echte Kundendaten dürfen überhaupt nicht veröffentlicht werden.
3. 03 Nehmen Sie jeden Schritt auf, auch die, die zu offensichtlich für ein Bild wirken. Der fehlende Screenshot ist immer der Schritt, an dem Leser hängenbleiben, und für eine einzelne Aufnahme zurückzukehren kostet mehr, als sie jetzt zu machen.
4. 04 Annotieren Sie auf einer eigenen Ebene und bewahren Sie die Quelldatei auf. In einen flachen Export eingebrannte Pfeile erzwingen eine komplette Neuaufnahme, wenn sich eine Beschriftung um zehn Pixel verschiebt.
5. 05 Beschneiden Sie auf den relevanten Bereich statt auf das ganze Fenster. Vollbildaufnahmen schrumpfen auf dem Telefon ins Unlesbare, und dort wird der meiste Anleitungs-Traffic gelesen.
6. 06 Schreiben Sie Alt-Texte, die beschreiben, was der Leser sehen soll, statt die Datei zu benennen. "Reiter Abrechnung mit ausgewähltem Jahrestarif" ist nützlich, "Screenshot der Einstellungen" nicht.
7. 07 Halten Sie Aufnahmedatum, Produktversion und verwendetes Konto neben der Seite fest. Ohne dieses Protokoll wird die Aktualisierung ein neues Projekt statt einer Bearbeitung.

Was dabei herauskommt

Ein versionierter Satz annotierter Visuals mit bearbeitbaren Quelldateien, geschriebenen Alt-Texten und einem Aufnahmeprotokoll mit Produktversion und Datum.

Wo es schiefgeht

• Nur in einem breiten Desktop-Viewport aufnehmen, sodass die Bilder auf den Telefonen der meisten Leser unlesbar sind
• Aufnahmen mit echten Kontodaten oder internen Namen veröffentlichen, ein Datenschutzproblem, das die Seite überdauert
• Annotationen in den Export einbrennen und die Quelldatei verwerfen, sodass jede Oberflächenänderung die Neuaufnahme der gesamten Sequenz bedeutet

Diese Skill in Ihrer eigenen KI nutzen

Die Datei ist einfaches Markdown, mit Name und Auslöser im Frontmatter. Wo ein Assistent Skills selbst laden kann, liest er genau dieses Frontmatter, um zu entscheiden, dass diese hier passt.

Mehr in Content-Produktion