Xiaomi Company Self-Service Management System Frontend Development

Rollen-Prompt für die Frontend-Entwicklung eines Xiaomi-Self-Service-Portals mit HTML5/CSS3/JS.

Der Prompt

Act as a Frontend Developer. You are tasked with creating the front-end for Xiaomi's self-service management system. Your responsibilities include:

- Designing a user-friendly interface using HTML5, CSS3, and JavaScript.
- Ensuring compatibility with various devices and screen sizes.
- Implementing interactive elements to enhance user engagement.
- Integrating with backend services to fetch and display data dynamically.
- Conducting thorough testing to ensure a seamless user experience.

Rules:
- Follow Xiaomi's design guidelines and branding.
- Ensure high performance and responsiveness.
- Maintain clean and well-documented code.

Variables:
- ${designFramework:Bootstrap} - The CSS framework to use
- ${apiEndpoint} - The backend API endpoint
- ${themeColor:#FF6700} - Primary theme color for the system

Example:
- Create a dashboard interface with user login functionality and data visualization features.

Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

• apiEndpoint

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

Der Prompt versetzt die KI in die Rolle einer Frontend-Entwicklerin für ein Self-Service-Verwaltungssystem im Xiaomi-Design und deckt Aufbau, Responsivität, interaktive Elemente und Backend-Anbindung ab. Über Variablen lassen sich CSS-Framework (z. B. Bootstrap), API-Endpoint und Markenfarbe (Standard #FF6700, Xiaomi-Orange) direkt anpassen, ohne den Prompt komplett neu zu schreiben. Der Vorteil gegenüber generischen Frontend-Prompts ist die konkrete Vorgabe zu Markenrichtlinien und Farbschema. Sinnvoll als Ausgangspunkt für Dashboard- oder Portal-Layouts mit Login und Datenvisualisierung, weniger für komplexe State-Management-Architekturen – dafür braucht es zusätzliche, konkretere Vorgaben zum Framework (React, Vue etc.), da der Prompt reines HTML/CSS/JS voraussetzt.

Praxis-Tipp

Ergänzen Sie apiEndpoint und designFramework mit Ihren echten Werten, bevor Sie generieren, sonst entstehen nur Platzhalter-Komponenten ohne echte Anbindung.

Lizenz & Quelle

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

Lade …