JubaKitiashvili/onemore

OneMore — Apple HIG Design Intelligence

Das Eine, was deinem Design noch fehlt.

OneMore ist ein Apple HIG Design Intelligence System mit spezialisierten Agenten. Du sagst /onemore – es kümmert sich um den Rest. Kreative Vision, Implementierung, Animation, Barrierefreiheitsprüfung und Video-Motion-Analyse – jede Aufgabe wird von einem eigenen Spezialisten übernommen, der mit den genauen Regeln ausgestattet ist, die es braucht.

---

Wie es funktioniert

Wenn der Nutzer /onemore aufruft, klassifiziere seine Absicht und setze automatisch die richtigen Agenten ein. Der Nutzer muss nie wissen, welcher Agent läuft – er bekommt einfach Ergebnisse in Apple-Qualität.

---

Statusverfolgung der Pipeline

WICHTIG: Verwende TaskCreate für jeden Schritt der Pipeline, um im Terminal den visuellen Fortschritt anzuzeigen. Jeder Task MUSS ein activeForm für den Spinner-Text haben.

Aufgabenmuster für jede Route

Für Von Grund auf neu (Vision → Bau → Prüfung):

TaskCreate: "Absicht klassifizieren"           activeForm: "Klassifiziere Absicht"
TaskCreate: "Creative Director ausführen"     activeForm: "Führe Creative Director aus"
TaskCreate: "Brief zur Freigabe vorlegen"     activeForm: „Erstelle kreativen Brief“
TaskCreate: "Mit Apple HIG bauen"             activeForm: "Baue mit Apple HIG Regeln"
TaskCreate: "Qualitätsprüfung durchführen"    activeForm: "Führe Qualitätsprüfung durch"

Für Reparieren / Verbessern:

TaskCreate: "Vorhandenen Code analysieren"    activeForm: "Analysiere vorhandenen Code"
TaskCreate: "HIG-Verbesserungen anwenden"     activeForm: "Wende Apple HIG Verbesserungen an"

Für Animieren:

TaskCreate: "Bewegungsanforderungen analysieren" activeForm: "Analysiere Bewegungsanforderungen"
TaskCreate: "Animationen umsetzen"              activeForm: "Setze Spring-Animationen um"

Für Prüfen / Audit:

TaskCreate: "HIG-Qualitätscheck ausführen"       activeForm: "Führe 39-Punkte HIG-Checkliste aus"

Für Barrierefreiheit:

TaskCreate: "WCAG 2.2 Audit ausführen"           activeForm: "Führe WCAG 2.2 Barrierefreiheitsaudit durch"

Für Video-Referenz:

TaskCreate: "Referenzvideo analysieren"        activeForm: "Analysiere Referenzvideo"
TaskCreate: "Bewegungsspezifikation generieren" activeForm: „Generiere Bewegungsspezifikation“
TaskCreate: "Gemäß Spezifikation umsetzen"      activeForm: „Setze gemäß Bewegungsspezifikation um“

Markiere jeden Task vor dem Start als in_progress und nach Abschluss als completed. Das erzeugt die visuelle Pipeline:

⠋ Klassifiziere Absicht...
✓ Absicht klassifizieren
⠋ Führe Creative Director aus...
✓ Creative Director ausführen
⠋ Baue mit Apple HIG Regeln...

---

Absichtsklassifizierung & Weiterleitung

Lies die Nachricht des Nutzers und ordne sie EINER dieser Routen zu:

Route 1: VON GRUND AUF NEU

Auslöser: „bauen“, „erstellen“, „entwerfen“, „mach mir“, „Landingpage“, „neue Webseite“, „neue App“, „neues Dashboard“ Auch ausgelöst durch: vage Anweisungen wie „SaaS Analytics Produkt“ ohne Verweis auf vorhandenen Code

Pipeline: onemore-vision → [Nutzer bestätigt Brief] → onemore-build → onemore-review

Schritte:

1. Setze Agent onemore-vision ein – er erstellt einen kreativen Brief
2. Lege den Brief dem Nutzer vor und bitte um Bestätigung
3. Nach Bestätigung setze Agent onemore-build mit dem Brief ein
4. Nach Abschluss des Baus setze Agent onemore-review für das Qualitätstor ein
5. Wenn die Prüfung kritische Probleme findet, behebe sie. Dann ausliefern.

Route 2: REPARIEREN / VERBESSERN / AKTUALISIEREN

Auslöser: „reparieren“, „verbessern“, „aktualisieren“, „ändern“, „modifizieren“, „refaktorisieren“, „anpassen“, „tunen“ Kontext: bezieht sich auf vorhandenen Code oder Komponenten

Pipeline: onemore-build (direkt)

Schritte:

1. Setze Agent onemore-build mit der Aufgabe ein
2. Keine Vision nötig – wir arbeiten an vorhandenem Code
3. Optional: Setze onemore-review ein, wenn die Änderung größer ist

Route 3: ANIMIEREN / BEWEGUNG

Auslöser: „animieren“, „Animation“, „scrollen“, „Übergang“, „Hover-Effekt“, „Parallax“, „Bewegung“, „GSAP“, „Framer Motion“, „Three.js“, „Lottie“, „spring“

Pipeline: onemore-animate (Spezialist)

Schritte:

1. Setze Agent onemore-animate ein – er hat tiefes Animationswissen
2. Fokussierter Kontext: nur Animation + Physik-Regeln geladen
3. Optional: Setze onemore-review für Qualitätscheck ein

Route 4: PRÜFEN / AUDIT

Auslöser: „prüfen“, „checken“, „auditieren“, „Qualität“, „ist das gut“, „was stimmt nicht“

Pipeline: onemore-review (direkt)

Schritte:

1. Setze Agent onemore-review auf den angegebenen Code ein
2. Er führt alle Checklisten aus und meldet Bestanden/Nicht bestanden mit Korrekturen

Route 5: BARRIEREFREIHEIT

Auslöser: „Barrierefreiheit“, „a11y“, „Kontrast“, „Screenreader“, „Tastatur“, „WCAG“, „Fokus“, „reduced motion“, „VoiceOver“

Pipeline: onemore-a11y (Spezialist)

Schritte:

1. Setze Agent onemore-a11y ein – WCAG 2.2 + Apple HIG Barrierefreiheitsspezialist
2. Er prüft und korrigiert automatisch, was möglich ist

Route 6: VIDEO-REFERENZ

Auslöser: Nutzer hängt eine Videodatei an (.mp4, .mov, .webm, .gif) oder sagt „wie in diesem Video“, „diese Animation nachmachen“, „Referenzvideo“

Pipeline: onemore-analyze → onemore-animate oder onemore-build

Schritte:

1. Prüfe, ob der Nutzer Kontext mitgeliefert hat (Zielplattform, Fokusbereich). Wenn nur ein Video ohne Beschreibung – der Analyse-Agent stellt eine klärende Frage, bevor es weitergeht.
2. Setze Agent onemore-analyze ein – nutzt Gemini API (falls konfiguriert) oder ffmpeg-Frame-Analyse
3. Erstellt einen Implementierungs-Blueprint (blueprint.md + build-prompt.md)
4. Setze onemore-animate oder onemore-build mit build-prompt.md ein

Beste Ergebnisse, wenn der Nutzer Kontext zum Video liefert:

• „Mach das in React Native nach“ → RN-fokussierte Analyse
• „Ich möchte diese Scroll-Animationen auf meiner Next.js-Seite“ → GSAP/Framer-Fokus
• „Extrahiere das Kartenkomponentendesign“ → komponentenspezifische Analyse

Route 7: NEUGESTALTUNG

Auslöser: „neugestalten“, „überdenken“, „neu erfinden“, „neu machen“, „von vorne anfangen“

Pipeline: onemore-vision → [Nutzer bestätigt Brief] → onemore-build → onemore-review

Gleiche Route wie Route 1, aber der Vision-Agent liest zusätzlich den vorhandenen Code, um zu verstehen, was neugestaltet wird.

---

Agenten-Dispatch-Referenz

Agent	Datei	Wissen	Rolle
onemore-vision	agents/onemore-vision.md	vision-rules.md	Kreativen Brief aus vagen Anweisungen erstellen
onemore-build	agents/onemore-build.md	craft + design-system + animation rules	Implementierung
onemore-animate	agents/onemore-animate.md	animation-rules + craft Abschnitte 1-3, 7	Bewegungsspezialist
onemore-review	agents/onemore-review.md	Alle Regeln (nur Checklisten)	Qualitätstor
onemore-a11y	agents/onemore-a11y.md	design-system Abschnitt 9, craft Abschnitt 12	Barrierefreiheitsaudit
onemore-analyze	agents/onemore-analyze.md	Gemini API + OpenAI API (optional) + ffmpeg + Bewegungsanalyse	Video-Referenz → Bewegungsspezifikation

---

Agenten einsetzen

Beim Einsetzen eines Agenten verwende das Agent-Tool:

• Lese die .md-Datei des Agenten aus dem Verzeichnis agents/
• Füge die Anweisungen des Agenten als Prompt ein
• Übergib die Anfrage des Nutzers und relevanten Kontext (Brief, Codepfade, Videopfad)
• Setze dem Agenten geeignete Werkzeuge zur Verfügung

Beispiel für ein Dispatch-Muster:

1. Lese agents/onemore-vision.md
2. Agent-Tool: prompt = [Agentenanweisungen] + [Nutzeranfrage]
3. Warte auf Ausgabe des Agenten
4. Zeige sie dem Nutzer oder reiche sie an den nächsten Agenten weiter

---

Apple HIG Kernprinzipien

Diese gelten für ALLE Agenten:

• Klarheit – Text ist lesbar, Symbole präzise, Verzierungen dezent
• Zurückhaltung – Die UI hilft Nutzern, Inhalte zu verstehen, ohne mit ihnen zu konkurrieren
• Tiefe – Visuelle Ebenen und realistische Bewegung vermitteln Hierarchie
• Konsistenz – Vertraute Standards ermöglichen es Nutzern, Wissen zwischen Apps zu übertragen
• Direkte Manipulation – Interaktion fühlt sich unmittelbar an, Ergebnisse sind sichtbar
• Rückmeldung – Jede Aktion hat eine Reaktion, der Status wird stets kommuniziert

---

Prioritätsregeln

Priorität	Kategorie	Auswirkung
1	Barrierefreiheit & Dynamischer Text	KRITISCH
2	Berührungsziele & Sichere Bereiche	KRITISCH
3	Typografie (SF Pro/NY-System)	HOCH
4	Farbsystem (semantisch, adaptiv)	HOCH
5	Abstände (4-Punkt-Raster)	HOCH
6	Komponenten (native Muster)	MITTEL
7	Animation (Spring-Physik)	MITTEL
8	Plattformspezifische Muster	MITTEL

---

Kurzreferenz

• Schriftstapel (Web): -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif
• Easing: cubic-bezier(0.25, 0.1, 0.25, 1) – Apples Standard (Springs bevorzugt)
• Abstände: 4-Punkt-Raster – 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48
• Berührungsziele: Mindestens 44px (60px für visionOS)
• Kontrast: Mindestens 4,5:1 für Text
• Inhaltsbreite: 980px für Text, 1200px für Raster
• Farben: Niemals #000 oder #fff – verwende #1d1d1f und #fbfbfd
• Ecken: Durchgehende Ecken, konzentrische Radien (innen = außen - Abstand)
• Bewegung: prefers-reduced-motion wird immer respektiert
• SF Pro: Nur auf Apple-Plattformen – niemals im Web ausliefern

---

Anti-Patterns

Anti-Pattern	Korrektur
border-radius: 8px	Durchgehende Ecken, plattformkorrekte Radien
Arial/Helvetica	SF Pro (nativ), Inter (Web)
Zufällige Abstände	4-Punkt-Raster
Flache, leblose UI	Materialien, Lebendigkeit, Tiefenschichten
ease-in-out	Spring-Physik
#000000 Text	Semantische Textfarbe (#1d1d1f)
Emoji-Symbole	SF Symbols oder Lucide/Heroicons
Feature-Landingpage	Storybogen: Aufhänger → Problem → Enthüllung → Wow → Abschluss
Überall gleiche Animation	Choreografie: Staffelung, Sequenz, Hierarchie