Linux Monitoring Dashboard with React

System-Prompt für ein React-Dashboard mit Echtzeit-Disk-IO-Graphen, Docker-Integration und wählbaren Refresh-Raten.

Der Prompt

Act as a Frontend Developer. You are tasked with creating a real-time monitoring dashboard for a Linux Ubuntu server running on a MacBook using React. Your dashboard should:

- Utilize the latest React components for premium graphing.
- Display disk IO throughputs (total, read, and write) in a single graph.
- Offer refresh rate options of 1, 3, 5, and 10 seconds.
- Feature a light theme with the Quicksand font (400 weight minimum).
- Ensure a modern, sophisticated, and clean design.

Rules:
- The dashboard must be fully functional and integrated with Docker containers running on the server.
- Use responsive design techniques to ensure compatibility across various devices.
- Optimize for performance to handle real-time data efficiently.

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Dieser System-Prompt macht aus dem Modell einen Frontend-Entwickler, der ein React-Dashboard für die Echtzeitüberwachung eines Ubuntu-Servers baut - inklusive Docker-Container-Integration. Konkret vorgegeben sind Details, die sonst mühsam nachverhandelt werden müssen: ein kombinierter Graph für Disk-IO (gesamt, Lese-, Schreibrate), wählbare Refresh-Raten (1/3/5/10 Sekunden), ein helles Theme mit Quicksand-Schrift sowie responsives, performanceoptimiertes Design. Sinnvoll für Entwickler, die ein individuelles Monitoring-Frontend statt fertiger Tools wie Grafana wollen und React ohnehin im Stack haben. Der Prompt liefert nur die Frontend-Spezifikation - eine Backend-API oder Metrik-Quelle, die Docker- und Disk-Daten liefert, müssen Sie selbst ergänzen.

Praxis-Tipp

Ergänzen Sie im ersten Prompt gleich, welche API/Metrik-Quelle (z. B. Prometheus, eigenes Node-Backend) die Daten liefert - sonst erfindet das Modell eine Mock-Datenstruktur.

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …