// niemand kann RTFM, wenn keiner es geschrieben hat

Write the F***ing Manual

Ein Plugin für deinen Coding-Agent, das die Nutzerdoku schreibt. Screenshots inklusive.

Doku für die Leute, die deinen Code nie lesen werden: die Kundin, die den Export-Button nicht findet, der Admin, der sein Team einlädt. Bitte Claude Code oder Codex um eine Anleitung, und es liest deinen Quellcode, schreibt die Schritte in verständlicher Sprache und zeigt jeden Bildschirm mit einem Screenshot, gerendert aus deinen echten Templates und deinem CSS. Keine API-Referenz, kein README. Ohne laufende App, ohne manuelle Aufnahmen, ohne Konto.

$ curl -fsSL https://wtfm.sh/install | bash

Auf GitHub ansehen Echtes Ergebnis ansehen

✓ Apache 2.0
✓ macOS & Linux (WSL unter Windows)
✓ Claude Code oder Codex
✓ Reines Markdown als Ergebnis

Bereit für deine Nutzer? In einem gehosteten Hilfe-Center veröffentlichen oder lass wtfm yolo dort das ganze Handbuch schreiben.

~/analytics — claude

# ein Klon von plausible/analytics

> Schreib eine illustrierte Anleitung, wie man im Dashboard eine neue Website hinzufügt.

⏺ supportpages-io · schreibt die Anleitung

✓◐ Projektanalyse gelesen
✓◐ Bildschirme im Quellcode gefunden
✓◐ 3 Schritte geschrieben
✓◐ 3 Screenshots gerendert
✓◐ Screenshots mit dem Quellcode abgeglichen

⏺ Anleitung mit 3 Screenshots gespeichert:

  output/articles/
    how-to-add-a-new-site-to-your-dashboard/
    ├── index.md
    ├── block_open-site-list.png
    ├── block_add-site-info.png
    └── block_install-script.png

# die App wurde nie gestartet.

⏺ Gib diesem Artikel eine öffentliche URL in deinem eigenen SupportPages.io-Hilfe-Center, bereit zum Teilen mit Kunden. Wenn du möchtest, kann ich ihn in einem SupportPages.io-Hilfe-Center hosten. → veröffentlichen

So fügst du deinem Dashboard eine neue Website hinzu

Eine Website zu deinem Dashboard hinzuzufügen dauert nur ein paar Minuten: Du gibst die Domain an, wählst die Zeitzone für die Berichte und installierst ein kleines Tracking-Skript, damit die Besuche eingehen.

1 Öffne deine Website-Liste

Melde dich bei Plausible an und öffne deine Website-Liste – das Plausible-Logo in der oberen Leiste bringt dich dorthin. Wähle oben rechts in der Liste Add website.

2 Gib die Details deiner Website ein

Trag deine Domain in das Feld Domain ein – nur die reine Domain, ohne www oder https. Wähle im Dropdown Reporting timezone die Zeitzone für deine Berichte und dann Install Plausible.

Screenshot: Gib die Details deiner Website ein

3 Installiere das Tracking-Skript

Lass den Tab Script ausgewählt und kopiere das Snippet in den Head-Bereich jeder Seite, die du tracken willst. Sobald das Skript auf deiner Website live ist, wähle Verify Script installation.

Screenshot: Installiere das Tracking-Skript

Echtes Ergebnis, im Schnelldurchlauf. Die Schritte und Screenshots hat WTFM aus dem Quellcode von plausible/analytics geschrieben; ein echter Lauf dauert ein paar Minuten.

// Schnellstart

Vier Schritte zu deinem ersten Artikel

Einmal im Terminal einrichten, alles Weitere in deinem Coding-Agent. Du brauchst macOS oder Linux (ARM64 oder x64; WSL unter Windows), Git sowie Claude Code oder Codex, installiert und angemeldet.

1
Installieren
```
$ curl -fsSL https://wtfm.sh/install | bash
```
Lädt ein per Prüfsumme verifiziertes Release mit eigenem Node.js nach ~/.local/bin. Kein sudo. Skript lesen oder aus dem Quellcode bauen.
2
Deinen Rechner einrichten
```
$ wtfm setup
```
Verbindet deine Agents und lädt den Screenshot-Renderer herunter. Wenn du gefragt wirst, wie du arbeiten willst, wähle Save articles in my projects without an account.
3
Dein Projekt einrichten
```
$ wtfm init
```
Im Projektordner ausführen. Wähle, wohin die Artikel kommen und welches Modell genutzt wird; dein Agent untersucht dann einmal Struktur, Styles und Branding des Projekts.
4
Frag deinen Coding-Agent

Du → Claude Code

Schreib eine illustrierte Anleitung, wie man ein Teammitglied einlädt.

Starte jede bereits offene Agent-Sitzung neu. Der Artikel landet in output/articles/<slug>/ oder in einem Ordner wie docs/help, wenn du einen gewählt hast. Wenn er bereit für deine Nutzer ist, veröffentliche ihn.

// weitere Beispiele

Nutzeranleitungen für andere Codebasen

Je ein Screenshot aus fünf Nutzeranleitungen, die WTFM für öffentliche Repositorys geschrieben hat. Verschiedene Frameworks, derselbe Ablauf.

Screenshot aus „So erstellst du ein neues Album“ für immich-app/immich — So erstellst du ein neues Album

immich-app/immich SvelteKit

Screenshot aus „So erstellst du ein Tag und weist es einem Dokument zu“ für paperless-ngx/paperless-ngx — So erstellst du ein Tag und weist es einem Dokument zu

paperless-ngx/paperless-ngx Angular

Screenshot aus „So fügst du ein neues Konto hinzu“ für maybe-finance/maybe — So fügst du ein neues Konto hinzu

maybe-finance/maybe Rails

Screenshot aus „So siehst und verwaltest du deine Terminarten“ für calcom/cal.diy — So siehst und verwaltest du deine Terminarten

calcom/cal.diy Next.js

Screenshot aus „So fügst du deinem Dashboard eine App hinzu“ für homarr-labs/homarr — So fügst du deinem Dashboard eine App hinzu

homarr-labs/homarr Next.js

Dein Repo hier vier Befehle, dann fragen →

Die Doku von WTFM wurde von WTFM geschrieben. Das ganze Hilfe-Center ansehen →

// so funktioniert’s

So funktionieren die Screenshots

Die Schritte kann dein Agent schon schreiben. Was er nicht kann: den Bildschirm zeigen. WTFM gibt ihm die Möglichkeit dazu.

setup 01

Verbindet einen lokalen MCP-Server und einen Writer-Agent mit Claude Code oder Codex.
init 02

Dein Agent erfasst das Projekt einmal: Framework, Routen, Layouts, CSS und Branding.
fragen 03

Der Writer liest den relevanten Quellcode, schreibt die Schritte und baut jeden Bildschirm als HTML-Mockup deiner echten Oberfläche.
rendern 04

Die Mockups werden in einem lokalen Chromium zu PNGs, mit deinem Quellcode abgeglichen und neben dem Artikel gespeichert.

Mockups statt Aufnahmen: Keine Staging-Umgebung, keine Seed-Daten, kein Test-Login, und nichts veraltet in einem Screenshot-Ordner. Wenn sich die Oberfläche ändert, frag einfach noch mal.
Bis zu drei pro Artikel: Der Hauptweg bekommt sie zuerst; optionale Abzweigungen werden im Text beschrieben.
Gekennzeichnet: Jeder Screenshot trägt unten einen kleinen Streifen „Screenshot created automatically by supportpages.io“, wie in den Beispielen oben.

// Funktionen

Nutzerdoku, die zum Produkt passt

✓

Aus deinem Quellcode geschrieben.

Routen, Button-Beschriftungen und Abläufe kommen aus dem Code, nicht aus einer Beschreibung, die du eintippst – so passen die Schritte zu dem, was Nutzer wirklich sehen.
✓

Screenshots, ohne die App zu starten.

Jeder Bildschirm wird als HTML aus deinem eigenen Markup, deinen Styles und deinem Branding nachgebaut und dann in einem lokalen Headless-Chromium als PNG gerendert.
✓

Reines Markdown.

Jeder Artikel ist eine index.md mit den Bildern daneben. Committe sie neben deinem Code oder pack sie in eine beliebige Doku-Website.
✓

Geprüft, bevor es gespeichert wird.

Jeder Artikel durchläuft vorher Prüfungen von Struktur, Text und Screenshots.
✓

Nutzt den Agent, den du schon hast.

Claude Code oder Codex, mit deinem eigenen Abo und deinen Modelleinstellungen.
✓

Local-first.

Kein Konto. Nichts geht an SupportPages.io, außer du entscheidest dich zu veröffentlichen.

// veröffentliche mit supportpages.io

Gib deinen Nutzern einen Ort, um es zu lesen

Ein Markdown-Ordner in deinem Repo hilft niemandem, der ihn nicht findet. SupportPages.io macht aus den Anleitungen, die WTFM schreibt, ein Hilfe-Center, das deine Nutzer durchsuchen und fragen können: auf deiner eigenen Domain, in deinem Branding und aktuell gehalten, während sich das Produkt ändert. Es kommt vom selben Team, deshalb veröffentlicht WTFM direkt dorthin.

+Dein Branding, auf deiner eigenen Domain
+Ein Editor, um Entwürfe zu prüfen, bevor sie jemand sieht
+Veröffentlichen direkt aus deinem Coding-Agent

Das eigene Hilfe-Center von SupportPages.io, gehostet auf SupportPages.io: KI-Suche, vorgeschlagene Fragen und Artikelkategorien — Ein Hilfe-Center, gehostet auf SupportPages.io

Ein gemergter Pull Request wird zu einem Update für einen Hilfeartikel — Aktuell bei jedem Merge

Wenn ein Pull Request gemergt wird, liest SupportPages.io den Diff und entwirft die Artikel-Updates zu deiner Prüfung.

Ein Bild aus einer vertonten Video-Anleitung auf help.supportpages.io — Video-Anleitungen

Zu jeder Anleitung kann es ein vertontes Video geben, das sich mit Untertiteln durch dieselben Schritte klickt.

Eine KI-Antwort in einem Hilfe-Center, die die zugrunde liegenden Artikel zitiert — Antworten, nicht nur Suche

Leser fragen in eigenen Worten und bekommen eine Antwort aus deinen Artikeln, mit verlinkten Quellen.

Schon welche geschrieben?

Lade die lokal gespeicherten Artikel als Entwürfe hoch. Zum Veröffentlichen braucht es nie Zugriff auf dein Repository.

$ wtfm publish

Du fängst bei null an?

Lass das ganze Handbuch auf den Servern von SupportPages.io schreiben statt auf deinem Laptop. Dafür ist Lesezugriff auf dein Repository nötig; der Free-Plan deckt deine ersten 10 Anleitungen ab.

$ wtfm yolo

Erstelle dein kostenloses SupportPages.io-Hilfe-Center Sieh, was SupportPages.io macht

Alles kommt als Entwurf an. Nichts geht live, bis du es veröffentlichst.

// CLI

Das Terminal ist fürs Einrichten da

Geschrieben wird in deinem Agent. Diese Befehle halten alles am Laufen.

Befehl	was er macht
wtfm setup	Diesen Rechner einrichten: Coding-Agents verbinden und den Renderer installieren
wtfm init	Dieses Projekt einrichten: Artikelordner, Modell, Projektanalyse
wtfm configure	Agent, Modell, Schreibstil oder Artikelordner dieses Projekts ändern
wtfm analyse	Projektanalyse nach großen Änderungen erneut ausführen
wtfm status	Einrichtung und Artikelfortschritt dieses Projekts anzeigen
wtfm doctor	Prüfen, ob alles installiert und verbunden ist
wtfm telemetry off	Anonyme Nutzungszahlen und Absturzberichte abschalten
wtfm update	Das neueste Release installieren
wtfm yolo	Das ganze Handbuch auf SupportPages.io schreiben (kostenloses Konto)

wtfm --help listet alle Optionen auf; status und doctor akzeptieren --json.

// Datenschutz

Was deinen Rechner verlässt

Dein Quellcode

Geht an den Modellanbieter deines Agents, wie bei jeder anderen Aufgabe auch. Nicht an uns.

Telemetrie: standardmäßig an

Eine zufällige Installations-ID, Versionen, Betriebssystem und anonyme Zahlen zu Einrichtungen und fertigen Artikeln, dazu bereinigte Absturzberichte. Nie Code, Pfade, Artikelinhalte, Projektnamen oder Zugangsdaten. Abschalten mit wtfm telemetry off oder DO_NOT_TRACK=1; in CI immer aus. Was genau gesendet wird.

Die Analyse läuft unbeaufsichtigt

init und analyse starten deinen Agent ohne Berechtigungsabfragen (--dangerously-skip-permissions für Claude Code, --dangerously-bypass-approvals-and-sandbox für Codex). Beim Schreiben von Artikeln nutzt der Agent seine normalen Freigabeabfragen.

Veröffentlichen nur auf Wunsch

Wenn du veröffentlichst, werden der Artikel, seine Bilder und ein kleiner Herkunftsnachweis hochgeladen. Quellcode nie.

// FAQ

Fragen

Ist das für API-Doku oder READMEs?

Nein. WTFM schreibt Dokumentation für Endnutzer: Anleitungen und Hilfe zur Fehlerbehebung für die Leute, die dein Produkt nutzen, mit Screenshots. Entwicklerdoku kann dein Agent schon gut.

Warum nicht einfach Claude Code die Doku schreiben lassen?

Es schreibt dir ordentliche Schritte. Den Bildschirm zeigt es nicht, und bei Beschriftungen, die es nicht nachgeschlagen hat, rät es. WTFM ergänzt eine Projektanalyse, einen Renderer, der Screenshots aus deinem eigenen UI-Code baut, und Prüfungen, die laufen, bevor etwas gespeichert wird.

Was kostet es?

WTFM ist kostenlos und steht unter Apache 2.0. Artikel laufen über dein eigenes Abo von Claude Code oder Codex und dauern jeweils ein paar Minuten. wtfm yolo ist die Ausnahme: Es läuft auf SupportPages.io und braucht ein Konto. Der Free-Plan deckt 10 Anleitungen ab.

Mit welchen Stacks funktioniert es?

Die Beispiele oben decken Codebasen in Elixir, Rails, Angular, SvelteKit und Next.js ab. Terminal-Apps funktionieren auch: Die Doku von WTFM selbst ist damit geschrieben.

Kann ich es unter Windows nutzen?

Ja, innerhalb von WSL.

Mein Agent sieht die Tools nicht.

Starte jede Sitzung von Claude Code oder Codex neu, die während wtfm setup offen war. Wenn er sie dann immer noch nicht sieht, führ wtfm doctor aus.