tobias
a310c1e6f2
Zwei Punkte aus COMPANION_APP_ARCHITECTURE.md fehlten bisher im Design-Brief für Claude Design.
97 lines
5.2 KiB
Markdown
97 lines
5.2 KiB
Markdown
# DataMetric360 — Design brief for Claude Design
|
||
|
||
Paste the block below into a **new Claude Design project** that has the **"Audi Dashboard UI"** design
|
||
system attached. Then iterate screen by screen. See the step-by-step in the chat/companion doc.
|
||
|
||
---
|
||
|
||
## Prompt to paste
|
||
|
||
```
|
||
Entwirf eine App namens "DataMetric360" — eine private Fahrzeug-App für ein einzelnes Auto.
|
||
Nutze ausschließlich die Komponenten aus dem angehängten Design-System (Audi Dashboard UI).
|
||
|
||
WICHTIG — Marken-Assets:
|
||
Anders als das angehängte Design-System (das bewusst neutral gehalten ist) darf diese App echte
|
||
Audi-Marken-Assets verwenden: die vier Ringe, die Audi-Type-Schrift, die Modell-Typenschilder
|
||
(RS 4 Avant competition). Kein generischer Ersatz nötig.
|
||
|
||
WICHTIG — kein Fernsteuerungs-Charakter:
|
||
Diese App ist eine reine Anzeige- und Erfassungs-App. Keine Bedienelemente zum Verriegeln,
|
||
Entriegeln, Starten oder sonstigen Fernsteuern des Fahrzeugs entwerfen — auch nicht als Mockup
|
||
oder Platzhalter, der das suggeriert.
|
||
|
||
WICHTIG — Grundlagen:
|
||
- Dunkles Theme ("Nacht") ist Standard, helles Theme ("Tag") existiert als Umschaltung.
|
||
- Keine Schatten, keine Verläufe. Flache Kacheln, Pill-Buttons, Haarlinien als Trenner.
|
||
- Zahlen im deutschen Format (1.234,5 · Komma als Dezimaltrennzeichen).
|
||
- Alle Texte auf Deutsch.
|
||
- Schriftgewichte nur 300 und 400 — niemals fett/600+.
|
||
|
||
RESPONSIVE — das ist zentral:
|
||
Die App läuft in zwei Kontexten und muss beide gleich gut bedienen:
|
||
1. Smartphone (iPhone/Android, ca. 390–430px breit) — Hauptkontext, Bedienung mit dem Daumen,
|
||
Tab-Leiste unten.
|
||
2. Großer Bildschirm (Desktop/Tablet, eingebettet in ein Home-Assistant-Dashboard, ab ca. 1000px).
|
||
Hier soll das Layout NICHT einfach eine zentrierte schmale Handy-Spalte sein, sondern die
|
||
Fläche sinnvoll nutzen: mehrspaltige Kachel-Anordnung, Navigation seitlich statt unten,
|
||
Listen und Detailansicht nebeneinander statt nacheinander.
|
||
Zeige für jeden Hauptbildschirm beide Varianten.
|
||
|
||
BILDSCHIRME (Hauptnavigation, 5 Bereiche):
|
||
1. "Übersicht" — Fahrzeugfoto, Modellbezeichnung, Kennzeichen, Status "sicher abgestellt",
|
||
Reichweite + Tankfüllstand als große Zahl mit Fortschrittsbalken, Kilometerstand,
|
||
nächster Service, letzte Fahrt und letzte Tankung als Vorschau.
|
||
2. "Mein Audi" — Übersichtsseite mit Fotogalerie und Kacheln, die zu Unterseiten führen:
|
||
Fahrzeugdaten/Technik, Service, Reifen, Versicherung & Steuer.
|
||
3. "Fahrten" — Liste aller Fahrten, gruppiert nach Jahr und Monat (aufklappbar).
|
||
Pro Fahrt: Datum, Uhrzeit, Strecke in km, Dauer, Fahrtart (privat/Arbeitsweg).
|
||
Plus eine Detailansicht einer einzelnen Fahrt mit Karte, Start-/Zieladresse,
|
||
Durchschnitts- und Höchstgeschwindigkeit.
|
||
4. "Statistik" — ausgewertete Kennzahlen über wählbare Zeiträume: gefahrene Strecke,
|
||
Fahrzeit, Verbrauch, Kosten, Aufteilung Tag/Nacht, Aufteilung privat/Arbeitsweg.
|
||
5. "Tanken" — Liste der Tankvorgänge (Jahr/Monat gruppiert), pro Eintrag Datum, Liter,
|
||
Preis pro Liter, Gesamtbetrag, Tankstelle. Plus Detailansicht eines Tankvorgangs
|
||
mit Beleg-Upload.
|
||
|
||
ZUSÄTZLICHE BILDSCHIRME:
|
||
6. "Einstellungen" — erreichbar über ein Zahnrad oben rechts, nicht über die Tab-Leiste.
|
||
Fahrzeugdaten bearbeiten (FIN, Kennzeichen, Modell), Theme-Umschaltung,
|
||
Foto-Verwaltung, Datenexport, Backup.
|
||
7. "Ersteinrichtung" (Onboarding, einmalig beim ersten Start) — der Nutzer verbindet die App
|
||
mit seinem eigenen Server: Feld für die Server-Adresse, Feld zum Einfügen eines
|
||
Zugangs-Tokens, alternativ ein Button "QR-Code scannen". Freundlich und knapp erklärt,
|
||
kein technisches Kauderwelsch.
|
||
|
||
NEU UND WICHTIG — Live-Daten:
|
||
Das Fahrzeug sendet jetzt laufend Live-Telemetrie (Position, Geschwindigkeit, Drehzahl,
|
||
Zündung an/aus, Tankfüllstand). Entwirf dafür:
|
||
- Eine "Fahrt läuft gerade"-Ansicht: Live-Karte mit aktueller Position, aktuelle
|
||
Geschwindigkeit groß, bisherige Strecke und Dauer der laufenden Fahrt.
|
||
- Auf der Übersicht: ein deutlich sichtbarer Hinweis, wenn das Fahrzeug gerade fährt,
|
||
mit Absprung in diese Live-Ansicht.
|
||
|
||
OFFLINE-ZUSTAND:
|
||
Die App kann ihren Server nicht immer erreichen. Entwirf einen unaufdringlichen, aber
|
||
eindeutigen "Offline"-Hinweis in der Kopfzeile: die zuletzt geladenen Daten bleiben sichtbar,
|
||
sind aber erkennbar nicht aktuell. Zeige außerdem, wie Änderungen aussehen, die offline
|
||
gemacht wurden und noch auf Übertragung warten (z. B. ein hochgeladener Beleg in einer
|
||
Warteschlange).
|
||
|
||
LEERE ZUSTÄNDE:
|
||
Zeige für Fahrten, Tankvorgänge und Statistik jeweils auch den Zustand "noch keine Daten
|
||
vorhanden" — freundlich formuliert, mit einem Hinweis, was als Nächstes passiert.
|
||
```
|
||
|
||
---
|
||
|
||
## Notes for the implementation step (me, afterwards)
|
||
|
||
- Import via `DesignSync` from the resulting project, same as the Design-Audit task.
|
||
- Target repo: a new `companion-app/` (Vite + React + TypeScript + Capacitor), consuming
|
||
`@audi-dash/ui` from `design-system/`.
|
||
- The design system ships **no Audi brand assets** (licence constraint) — but DataMetric360 is sideload-only
|
||
and therefore inside the private-installation scope, so real fonts/rings/badges get added back at
|
||
implementation time from `homeassistant/www/`, **not** into `design-system/`.
|
||
- Data layer: HA REST + WebSocket, see `COMPANION_APP_ARCHITECTURE.md` §3.
|