Was macht imagine-it?
Verwandele eine Spezifikation in ein spekulatives Mockup: eine kleine Sammlung von einfachen .html-Dateien, die zeigen, wie ein Feature in diesem Produkt aussehen könnte. Es ist ein Gesprächsgegenstand für Menschen, um darauf zu reagieren, kein Produktionscode – daher stehen Geschwindigkeit und Plausibilität vor Vollständigkeit.
Eingabe (alle optional, beliebige Reihenfolge): eine Issue/PR-URL oder #123, ein Jira-Schlüssel oder eine Jira-URL, ein Dateipfad, Freitext, plus Flags:
--wireframe– erzwingt ein Graustufen-Wireframe anstelle des Repo-Looks.--out <dir>– Ausgabeverzeichnis (Standard:.imagine-it/im Repo-Root). Die Ausgabe geht immer nach<out>/<slug>/.--screens <n>– begrenzt oder erzwingt die Anzahl der Bildschirmdateien.--screenshot[=png|jpeg]– erstellt auch Bilder der Bildschirme (Standard PNG).--states– erfasst bei Screenshots jeden Zustand, nicht nur den initialen.--viewport <BxH>– Aufnahmegröße (Standard 1440x900; 390x844 für Mobile-First-Produkte).--notes– Aufnahme mit eingeschaltetem Spezifikations-Overlay (Standard aus).
Ohne Eingabe ist die Spezifikation das aktuelle Gespräch.
Arbeitsablauf
Führe die Schritte der Reihe nach aus. Jeder erzeugt ein Artefakt, das der nächste konsumiert; behalte sie in deinen Arbeitsnotizen – nur das HTML wird auf die Festplatte geschrieben.
1. Spezifikations-Digest
Hole die Spezifikation ein und destilliere sie zu einem Spezifikations-Digest: Titel, Slug, Ziel, Akteure, Einstiegspunkte, primärer Ablauf, Entitäten mit realistischen Beispielwerten, Zustände, Akzeptanzkriterien nummeriert als AC-1…, Ausgeschlossenes, Annahmen, Offene Fragen.
Jede von dir gefüllte Lücke wird zu einer Annahme; Entscheidungen, die nur ein Mensch treffen kann, werden zu offenen Fragen. Mach weiter – frage den Benutzer nur, wenn es überhaupt keine Spezifikation gibt (kein Argument, nichts im Gespräch).
Erledigt, wenn: jedes Digest-Feld ausgefüllt (oder explizit „keine”) und jedes AC nummeriert ist. Details, Bezugsquellen und ein Beispiel: references/context-intake.md.
2. Design-Brief
Durchsuche das Repo schreibgeschützt und schreibe einen Design-Brief: Modus (Hi-Fi oder Wireframe), Stack, einen bereit zum Einfügen :root-Token-Block mit den kanonischen Variablennamen, Dark Mode, App-Shell, Komponentenhinweise, 1–3 dem Feature am nächsten kommende Referenzbildschirme, Icon-Stil, UI-Locale und die Quelldateien, von denen alles stammt.
Wenn deine Umgebung Sub-Agents unterstützt, delegiere diese Suche an einen und nimm nur den Brief zurück; wenn nicht, führe die Suche inline im selben Lese-Budget durch. Der Modus ist Wireframe, wenn --wireframe übergeben wird oder das Repo keine zu imitierende UI hat; erkläre warum im Brief. Aktualisiere dann die Einstiegspunkte des Digests mit den gefundenen echten Routen/Beschriftungen.
Erledigt, wenn: der Token-Block jeden kanonischen Variablennamen verwendet (außer Wireframe: Tokens = none) und jede Token-Gruppe eine Quelldatei zitiert. Stack-Erkennungsmatrix, wo Tokens versteckt sind, kanonische Namen: references/design-discovery.md.
3. Bildschirmplan
Lege die Dateien fest, bevor du HTML schreibst: eine Tabelle mit # | Datei | Zweck | Zustände | Abgedeckte ACs, in Flussreihenfolge. Eine Datei pro eigenständiger Ansicht oder inhaltsreichem Overlay; Zustände (leer, laden, fehler, erfolg…) leben als Abschnitte in ihrem Bildschirm. So viele wie nötig, so wenige wie möglich – typischerweise 2–6.
Erledigt, wenn: jedes AC in der Spalte „Abgedeckte ACs” mindestens einer Zeile erscheint. Regeln und ein Beispiel: references/screen-planning.md.
4. Generieren
Schreibe in <out>/<slug>/:
index.html Hub: Digest-Zusammenfassung, Ablauf, AC-Abdeckung, Annahmen, offene Fragen, Design-Quellen
styles.css Design-Brief-Tokens + assets/base.css wörtlich + Feature-Komponentenstile
ii.js wörtlich kopiert von assets/ii.js (Mockup-Toolbar: Nav, Notizen, Zustände, Theme)
01-<screen>.html eine pro Zeile des Bildschirmplans
02-<screen>.html
Beginne mit assets/index-template.html und assets/screen-template.html; kopiere assets/base.css und assets/ii.js aus diesem Skill-Ordner. Imitiere die Referenzbildschirme: gleiche Shell, Nav-Beschriftungen, Komponentenformen und Kopierton, in der UI-Sprache des Repos. Fülle mit realistischen Domänendaten. Markiere jedes Element, das ein AC erfüllt, mit data-note="AC-n: …" und jede spekulative Designentscheidung mit data-note="NOTE: …".
Die Ausgabe ist eigenständiges einfaches HTML/CSS mit winzigem Vanilla-JS, das direkt von der Festplatte geöffnet wird: nur relative Links, Inline-SVG-Icons, Systemfont-Fallbacks für die Schriften des Repos. Vollständiger Ausgabevertrag und Checkliste vor der Auslieferung: references/html-conventions.md.
5. Verifizieren
Führe die Checkliste vor der Auslieferung in references/html-conventions.md aus. Erledigt, wenn jeder Checklistenpunkt besteht; sonst korrigieren und erneut prüfen.
6. Aufnahme (nur mit --screenshot)
Wird ohne Screenshot-Flag vollständig übersprungen. Andernfalls rendere die geplanten Bildschirme (und den Hub zuletzt) als Bilder in <out>/<slug>/screenshots/ und füge einen Screenshot-Abschnitt zu index.html hinzu. Ein Aufnahmeproblem blockiert nie den Durchlauf.
Erledigt, wenn: jedes geplante Bild existiert, nicht leer ist, die richtigen Magic Bytes hat und das erste Bild betrachtet wurde; übersprungene Aufnahmen werden mit dem manuellen Befehl gemeldet. Flags, hell/dunkel, Benennung, Werkzeugleiter und Fallbacks: references/screenshots.md.
7. Übergeben
Antworte mit: dem Pfad zu index.html, der Tabelle des Bildschirmplans, den Screenshot-Pfaden (plus allen übersprungenen Aufnahmen und deren manuellem Befehl), den Annahmen und offenen Fragen sowie einem Angebot, es zu öffnen (start unter Windows, open unter macOS, xdg-open unter Linux). Wenn <out> innerhalb des Repos liegt und noch nicht ignoriert wird, schlage vor, es zu .gitignore hinzuzufügen.
Nachverfolgungen: Kontext aus <out>/<slug>/index.html (Annahmen, Design-Quellen) und styles.css neu aufbauen; das Repo nicht erneut durchsuchen; den Slug behalten; index.html entsprechend aktualisieren; Schritt 5 erneut ausführen (und, falls Screenshots existierten, die betroffenen Bildschirme und den Hub neu aufnehmen).