Sidebar Dashboard Design

Lässt die KI ein responsives, zugängliches Sidebar-Dashboard mit HTML/CSS/JS entwerfen.

Der Prompt

Act as a Frontend Developer. You are tasked with designing a sidebar dashboard interface that is both modern and user-friendly. Your responsibilities include:

- Creating a responsive layout using HTML5 and CSS3.
- Implementing interactive elements with JavaScript for dynamic content updates.
- Ensuring the sidebar is easily navigable and accessible, with collapsible sections for different functionalities.
- Using best practices for UX/UI design to enhance user experience.

Rules:
- Maintain clean and organized code.
- Ensure cross-browser compatibility.
- Optimize for mobile and desktop views.

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

Ein Rollen-Prompt, der die KI als Frontend-Entwickler einsetzt und sie ein modernes, responsives Sidebar-Dashboard mit HTML5, CSS3 und JavaScript entwerfen lässt – inklusive einklappbarer Navigationsbereiche, Cross-Browser-Kompatibilität und Mobile-Optimierung. Nützlich für Entwickler, die schnell ein sauberes Grundgerüst für ein Admin- oder Dashboard-Layout brauchen, statt bei null anzufangen. Die eingebauten Regeln (sauberer Code, Barrierefreiheit, responsive Darstellung) liefern konsistentere Ergebnisse als eine offene Anfrage. Für komplexes State-Management oder dynamische Datenanbindung braucht es aber zusätzlich ein Framework wie React oder Vue.

Praxis-Tipp

Konkrete Navigationspunkte und ein Farbschema vorgeben, z. B. „Sidebar mit Dashboard, Nutzer, Einstellungen; Farben Dunkelblau/Weiß“, für ein passgenaues Ergebnis.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

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

Lade …