ui-gen-record

Was macht ui-gen-record?

Archivieren Sie die Metadaten von „UI-Seitengenerierungsanforderungen“ (Kosten, Modell, Änderungsanzahl, Ergebnisse) in einer einzigen Feishu-Bitabel-Tabelle.

Auslöseszenarien

Kern: .config.json zeigt immer auf die „aktuell aktive Tabelle“. „Neu erstellen / Link binden“ ändert nur diesen Zeiger, ohne die Daten in bestehenden Tabellen zu beeinflussen.

Szenario	Benutzeraussage	Aktion
Erstmalig + nur „Archivieren“	„In Tabelle archivieren / In Bitable archivieren / Diese Anforderung erfassen“	Führe bootstrap.sh aus, um eine neue Tabelle zu erstellen, und hänge dann an
Erstmalig + Feishu-Tabellenlink bereitgestellt	„In diese Tabelle archivieren: https://xxx.feishu.cn/base/...“	Führe link.sh <url> aus, um eine vorhandene Tabelle zu binden, und hänge dann an
Bereits konfiguriert + nur „Archivieren“	„In Tabelle archivieren“	Hänge direkt an die aktuell in .config.json angegebene Tabelle an
Bereits konfiguriert + sage „Neu“	„Neue Tabelle erstellen / Ich möchte eine neue erstellen“	Führe bootstrap.sh --force aus, um eine neue Tabelle zu erstellen und den Zeiger darauf umzuschalten
Bereits konfiguriert + neuer Link bereitgestellt	„Wechsle zu dieser Tabelle: https://...“	Führe link.sh --force <url> aus, um zur neuen Tabelle zu wechseln

Nur wenn ein Feishu Base-URL explizit angegeben wird, wird der Bindungszweig verwendet; andernfalls wird standardmäßig neu erstellt oder direkt angehängt.

Abhängigkeiten

• lark-cli (lark-cli auth login muss bereits abgeschlossen sein)
• Der ausführende Benutzer muss ein Feishu-Konto haben, und die open_id kann über lark-cli auth list abgerufen werden

Tabelle erstellen / binden: Initialisierung von .config.json

Es gibt zwei Möglichkeiten, den Skill auf eine Feishu-Bitabel-Tabelle auszurichten. Wählen Sie eine aus:

Methode A: Neue Tabelle erstellen (empfohlen für Erstbenutzer)

bash ~/.cursor/skills/ui-gen-record/scripts/bootstrap.sh
# Wenn bereits eine .config.json existiert, um den Zeiger zwangsweise zu überschreiben:
bash ~/.cursor/skills/ui-gen-record/scripts/bootstrap.sh --force

Methode B: Binden an eine vorhandene Tabelle

Wenn der Benutzer einen Feishu-Base-Link bereitstellt (z. B. https://xxx.feishu.cn/base/<base_token>?table=<table_id>):

bash ~/.cursor/skills/ui-gen-record/scripts/link.sh <base_url>
# Wenn bereits eine .config.json existiert, um zu einem neuen Link zu wechseln:
bash ~/.cursor/skills/ui-gen-record/scripts/link.sh --force <base_url>

link.sh wird:

1. Aus der URL den base_token (sowie optional table_id / view_id) extrahieren
2. Über lark-cli die Feldliste scannen und anhand der Feldnamen alle field_ids abrufen
3. Prüfen, ob alle 10 erforderlichen Felder („Anforderungsname“, „Anforderungsdatum“, „Vorschau-Link“, „Design-Link“, „Verwendetes Modell“, „Datei“, „Änderungsanzahl“, „Token-Verbrauch“, „USD-Kosten“, „Monat“) vorhanden sind. Fehlt eines, wird mit Fehler abgebrochen.
4. Die Informationen in .config.json schreiben, sodass append.sh automatisch Datensätze an diese Tabelle anhängt, ohne dass der Link erneut angegeben werden muss.

Hinweis: Damit link.sh erfolgreich binden kann, müssen die Feldnamen der Zieltabelle exakt mit den Definitionen dieses Skills übereinstimmen (auch die Typen müssen übereinstimmen, insbesondere Token-Verbrauch = Zahl mit Tausendertrennzeichen, USD-Kosten = Zahl im Währungsformat USD, Monat = Formel). Der sicherste Weg ist, dass die Tabelle ebenfalls mit bootstrap.sh dieses Skills erstellt wurde.

Was bootstrap.sh im Detail tut:

1. Holt über lark-cli auth list die open_id des aktuellen Benutzers
2. Erstellt als Bot eine Base, deren Tabelle UI-Seitengenerierungsaufzeichnungen heißt
3. Erstellt die Standardfelder + 3 Hilfsformelfelder (siehe Tabelle unten)
4. Gruppiert die Ansicht absteigend nach dem Feld Monat
5. Erstellt ein Dashboard Echtzeit-UI-Generierungsstatistiken und füllt es mit 6 Blöcken (siehe unten)
6. Fügt den aktuellen Benutzer mit full_access hinzu und überträgt dann den Besitzer an diesen Benutzer
7. Schreibt base_token / table_id / view_id / dashboard_id / field_ids / owner_open_id in .config.json
8. Gibt am Ende von stdout zwei einmalige manuelle Feineinstellungen aus (Spalte „Monat“ ausblenden, Diagrammfarben einstellen). Diese werden von der Open API nicht unterstützt und müssen vom Benutzer im Browser durchgeführt werden.

Die erstellte Base-URL wird auf stdout ausgegeben und muss dem Benutzer mitgeteilt werden.

Tabellenstruktur

Feld	Typ	Beschreibung
Anforderungsname	Text	Seitenname oder kurze Anforderungsbeschreibung
Anforderungsdatum	Datum/Uhrzeit	YYYY-MM-DD HH:mm:ss, standardmäßig „aktuelle Zeit“
Vorschau-Link	Text (URL)	Lokale Vorschauadresse, z. B. http://localhost:5173/xxx
Design-Link	Text (URL)	Figma / Motiff / Pencil-Link
Verwendetes Modell	Auswahl (mit Farb-Label)	Optionen: Claude Opus 4.7(lila) / Claude Sonnet 4.6(blau) / GPT-5.4(grün) / Gemini 3 Pro(orange) / Gemini 3.1 Pro(rot); erweiterbar
Datei	Anhang	.tsx-Quellcode + exportiertes .zip (mehrere möglich)
Änderungsanzahl	Text	Alle vom Benutzer genannten kleinen Änderungen (inkl. Wiederholungen), linksbündig
Token-Verbrauch	Zahl (einfach)	precision=0, thousands_separator=true, Frontend zeigt 1.000.000; Dashboard summiert direkt
USD-Kosten	Zahl (Währung)	currency_code=USD, precision=2, Frontend zeigt $25,00; Dashboard summiert direkt
Monat	Formel (Text)	TEXT([Anforderungsdatum], „YYYY-MM“), wird für die Ansichtsgruppierung verwendet. Die Bitable-API gruppiert datetime standardmäßig nach Tag, daher wird dieses Textfeld benötigt, um monatlich zu gruppieren

Die externen Parameter von append.sh bleiben kompatibel: Es können weiterhin --token-usage „1.000.000“ und --usd-cost „$25,00“ übergeben werden. Das Skript entfernt intern Kommas / Dollarzeichen und schreibt sie als Zahl in Token-Verbrauch / USD-Kosten.

Die Standardansicht wird absteigend nach dem Feld Monat gruppiert (2026-05 / 2026-04 jeweils eine Gruppe). Es müssen keine Spalten ausgeblendet werden.

Dashboard

Bootstrap erstellt ein Dashboard namens Echtzeit-UI-Generierungsstatistiken, das 6 Blöcke enthält:

Gesamtstatistiken

• Meistgenutztes Modell (Kreisdiagramm): Zählt nach dem Feld Verwendetes Modell, absteigend nach Anzahl
• Gesamter Token-Verbrauch / Gesamte USD-Kosten (Kennzahlenkarte): SUM(Token-Verbrauch) / SUM(USD-Kosten)

Monatliche Statistiken

• Meistgenutztes Modell pro Monat (Gestapeltes Säulendiagramm): x=Monat Farbe=Verwendetes Modell y=count_all
• Monatlicher Gesamt-Token-Verbrauch (Säulendiagramm): x=Monat y=SUM(Token-Verbrauch)
• Monatliche Gesamt-USD-Kosten (Säulendiagramm): x=Monat y=SUM(USD-Kosten)

Nach jedem append.sh-Aufruf können Sie das Dashboard aktualisieren, um die neuen Daten zu sehen.

Diagrammfarben manuell anpassen (einmalig)

Die Bitable-Open-API macht die Farbeinstellungen von Diagrammserien nicht verfügbar. Um die Farben im Diagramm mit den Farb-Labels der Modell-Auswahl in der Tabelle abzugleichen, muss der Benutzer dies einmalig manuell im Browser vornehmen (die Anpassung bleibt dauerhaft gespeichert). Bootstrap gibt am Ende eine Vergleichstabelle aus:

Modell	Farbschema	Ungefährer Hex-Code
Claude Opus 4.7	Lila	#B66CFF
Claude Sonnet 4.6	Blau	#5B9FFF
GPT-5.4	Grün	#67D474
Gemini 3 Pro	Orange	#FF9944
Gemini 3.1 Pro	Rot	#FF6B6B

Vorgehen: Im Diagramm oben rechts Bearbeiten → Rechts Stil → Diagrammfarben → Nach Kategorie festlegen → Farben einzeln zuweisen → Speichern. Nur die beiden Diagramme, die die Modelldimension betreffen („Meistgenutztes Modell“ und „Meistgenutztes Modell pro Monat“), müssen angepasst werden.

Spätere Verwendung: Einen Datensatz anhängen

Wenn der Benutzer Anweisungen wie „In Tabelle archivieren“ gibt:

Schritt 1: Daten sammeln

Leiten Sie aus dem Kontext des aktuellen Gesprächs die folgenden Informationen ab oder fragen Sie den Benutzer; nicht klar definierte Werte dürfen als leere Zeichenfolge "" übergeben werden:

• REQ_NAME: Anforderungsname (erforderlich, normalerweise der Seitenpfad oder der chinesische Seitenname)
• REQ_DATE: Anforderungsdatum (standardmäßig die aktuelle Zeit $(date +'%Y-%m-%d %H:%M:%S'); bei Archivierung einer historischen Datei nehmen Sie stat -f '%Sm')
• PREVIEW_URL: Vorschau-Link (normalerweise http://localhost:5173/<slug>)
• DESIGN_URL: Design-Link (Figma / Motiff / Pencil)
• MODEL: Verwendetes Modell (muss einer Auswahloption entsprechen, andernfalls erweitern Sie die Aufzählung zuerst mit lark-cli base +field-update)
• MOD_COUNT: Änderungsanzahl (Ganzzahl als Zeichenfolge)
• TOKEN_USAGE: Token-Verbrauch (Zeichenfolge mit Tausendertrennzeichen, z. B. 1.000.000)
• USD_COST: USD-Kosten (Zeichenfolge, die mit $ beginnt, z. B. $25,00)
• ATTACHMENT_PATHS: Lokale absolute Pfade zu Anhängen

Schritt 1.5: Anhänge automatisch sammeln

Anhänge bestehen aus zwei Teilen. Der Agent muss den Benutzer nicht fragen, sondern folgt diesem festgelegten Ablauf:

1) Quellcode (erforderlich)

Der vom Benutzer vorliegende Seitenquellcode. Meistens .tsx, kann aber auch .html oder jede andere Datei sein, die das aktuelle Ergebnis repräsentiert. Der Pfad wird aus REQ_NAME abgeleitet oder direkt beim Benutzer erfragt.

2) Export-ZIP (optional – wenn vorhanden, anhängen, wenn nicht, überspringen)

Der Dev-Server dieses Projekts bietet einen POST /__api/export-html-Endpunkt (die Schaltfläche „Exportieren“ im Navigationspanel ruft ihn ebenfalls auf). Der Skill bietet einen stillen Helfer:

ZIP_PATH="$(bash ~/.cursor/skills/ui-gen-record/scripts/try-export.sh "<pageName>")"
# Erläuterung:
# - pageName = relativer Pfad innerhalb von src/pages/ ohne Erweiterung, z. B. „Weiterempfehlungs-Wochenaufgabe-Endversion“ oder „landing/index“
# - Erfolg: ZIP_PATH ist /tmp/<basename>.zip
# - Fehlschlag (Dev-Server nicht online / Endpunkt 404 / Seitenname existiert nicht / Antwort nicht von ZIP): ZIP_PATH ist leer
# - In beiden Fällen wird mit exit 0 beendet, der Agent-Ablauf wird nicht unterbrochen

Anschließend wird der --attachment-Parameter zusammengesetzt:

ATTACH_ARGS=(--attachment "/abs/pfad/zu/source.tsx")
if [[ -n "$ZIP_PATH" ]]; then
  ATTACH_ARGS+=(--attachment "$ZIP_PATH")
fi
bash ~/.cursor/skills/ui-gen-record/scripts/append.sh ... "${ATTACH_ARGS[@]}"

Grundsatz: Interne Kollegen (die den Dev-Server ausführen) erhalten automatisch das ZIP; externe Benutzer (ohne Dev-Server oder die nicht an diesem Projekt beteiligt sind) überspringen das ZIP still und verwenden nur den Quellcode und andere Dateien, die der Benutzer bereits hat. Fragen Sie auf keinen Fall den Benutzer, wie das ZIP zu behandeln ist.

Schritt 2: append-Skript aufrufen

bash ~/.cursor/skills/ui-gen-record/scripts/append.sh \
  --req-name "<Anforderungs-/Seitenname>" \
  --req-date "2026-01-01 12:00:00" \
  --preview-url "http://localhost:5173/<Seitenpfad>" \
  --design-url "https://<Design-Link>" \
  --model "Claude Opus 4.7" \
  --mod-count "10" \
  --token-usage "500.000" \
  --usd-cost "\$12,50" \
  --attachment "/absoluter/pfad/zu/export.zip" \
  --attachment "/absoluter/pfad/zu/source.tsx"

Das Skript gibt die neue Datensatz-ID und die Base-URL zurück; melden Sie die Base-URL dem Benutzer.

Schätzregeln (Pflichtfeld – darf nicht leer sein)

Der Agent muss bei der Erfassung von MOD_COUNT / TOKEN_USAGE / USD_COST die folgenden Maßstäbe anwenden. Selbst wenn ein Transkript fehlt, muss ein Schätzwert angegeben werden. Diese drei Felder dürfen auf keinen Fall leer bleiben:

• Änderungsanzahl: Die Anzahl der jeweils eigenständig ausführbaren kleinen Anforderungen, die der Benutzer im aktuellen Gespräch gestellt hat, einschließlich Wiederholungen. Die anfängliche „Seite generieren“ zählt ebenfalls als 1.
  • Bei der Archivierung einer historischen Datei (Transkript nicht sichtbar): Mindestens 1 eintragen.
• Token-Verbrauch (Zeichenfolge mit Tausendertrennzeichen, z. B. 160.000):
  • Bei sichtbarer aktueller Sitzung: Schätzung basierend auf „Anzahl der Zeichen in der Sitzung + Tool-Roundtrips + Anzahl der Lese-/Schreibvorgänge großer Dateien“
  • Bei ausschließlicher Archivierung einer historischen Datei: Rückwärtsschätzung basierend auf der Größe der generierten Datei. Erfahrungswert: Pro 1 KB Quellcode ≈ 15.000 Gesamt-Tokens (einschließlich des vom Cursor standardmäßig eingefügten Projektkontexts)
  • Chinesisch ≈ 1,3 Tokens/Zeichen; Opus-Sitzungen liegen typischerweise im Bereich von 500.000 bis 3.000.000 Tokens
• USD-Kosten (mit $-Präfix, z. B. $0,42): Schätzung basierend auf den aktuellen offiziellen Preisen des Modells
  • Formel: Kosten = Input_Tokens × Input_Rate + Output_Tokens × Output_Rate
  • Typisches Verhältnis: Input : Output ≈ 15 : 1 (für Cursor-Agent-Sitzungen)

Modellpreistabelle (Referenzwerte 2026)

Modell	Input ($/M)	Output ($/M)
Claude Opus 4.7	15	75
Claude Sonnet 4.6	3	15
GPT-5.4	10	30
Gemini 3 Pro / 3.1 Pro	2	12

Abweichungen bei den Schätzwerten sind zulässig; der Benutzer kann die Werte nach Erhalt der genauen Abrechnung manuell in der Tabelle überschreiben.

Fehlerbehandlung

• config.json existiert nicht
  • Benutzer hat keinen Link angegeben → bootstrap.sh ausführen, um neu zu erstellen
  • Benutzer hat einen Link angegeben → link.sh <url> ausführen, um zu binden
• link.sh meldet „Der Tabelle fehlen erforderliche Felder“ → Die Zieltabelle wurde nicht mit diesem Skill erstellt, das Schema stimmt nicht überein. Weisen Sie den Benutzer an, die Felder entweder manuell zu ergänzen oder bootstrap.sh zu verwenden, um eine neue Standardsatz-Tabelle zu erstellen.
• base_token invalid → Der Benutzer hat die Tabelle möglicherweise gelöscht oder hat keine Berechtigung. Weisen Sie den Benutzer an, bootstrap oder link für eine andere Tabelle erneut auszuführen.
• OpenAPIUpdateField limited (Ratenbegrenzung) → Nach sleep 2 erneut versuchen.
• Anhang nicht gefunden → Prüfen, ob der Pfad existiert. Handelt es sich um eine URL-kodierte Datei in ~/Downloads, diese zuerst nach /tmp kopieren und dann hochladen (lark-cli erfordert relative Pfade).
• Modell nicht in den Auswahloptionen → Den Benutzer zuerst fragen, ob eine neue Option hinzugefügt werden soll; die Optionen mit lark-cli base +field-update aktualisieren.

Verwandte Dateien

• scripts/bootstrap.sh — Erstellt eine neue Standardsatz-Tabelle und überträgt das Eigentum an den aktuell eingeloggten CLI-Benutzer. --force kann bei bereits vorhandenem .config.json eine neue Tabelle erzwingen und den Zeiger überschreiben.
• scripts/link.sh — Richtet den Skill auf eine vorhandene Feishu-Bitabel-Tabelle (URL-Parameter) aus. --force kann den vorhandenen Zeiger überschreiben.
• scripts/append.sh — Hängt einen Datensatz an, unterstützt mehrere Anhänge.
• scripts/try-export.sh — Versucht still, über den Dev-Server dieses Projekts ein ZIP zu exportieren. Gibt bei Erfolg den Pfad auf stdout aus, bei Misserfolg eine leere Zeichenfolge. So kann die append-Logik beide Fälle („interner Kollege mit ZIP“ / „externer Benutzer ohne ZIP“) verzweigungsfrei behandeln.
• .config.json (wird zur Laufzeit generiert) — Speichert base_token / table_id / field_ids / owner_open_id / base_url / linked (linked=true bedeutet, dass über link.sh eine vorhandene Tabelle gebunden wurde; fehlt linked oder ist es nicht gesetzt, wurde die Tabelle mit bootstrap.sh erstellt).