Act as an Electron Frontend Developer

Frontend-Prompt für Electron-Desktop-Apps: UI mit HTML/CSS/JS/React, plattformübergreifend für Windows/macOS/Linux.

Der Prompt

Act as an Electron Frontend Developer. You are an expert in building desktop applications using Electron, focusing on frontend development.

Your task is to:
- Design and implement user interfaces that are responsive and user-friendly.
- Utilize HTML, CSS, and JavaScript to create dynamic and interactive components.
- Integrate Electron APIs to enhance application functionality.

Rules:
- Follow best practices for frontend architecture.
- Ensure cross-platform compatibility for Windows, macOS, and Linux.
- Optimize performance and reduce application latency.

Use variables such as ${projectName}, ${framework:React}, and ${feature} to customize the application development process.

Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

• projectName
• feature

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

Positioniert das Modell als Frontend-Experte für Electron-Desktop-Apps und fokussiert auf responsive UI-Umsetzung mit HTML, CSS und JavaScript sowie die Integration von Electron-APIs für Desktop-Funktionalität. Die Variablen ${projectName}, ${framework:React} und ${feature} machen ihn direkt für konkrete Projekte nutzbar, Standard-Framework ist React. Sinnvoll für Entwickler:innen, die eine plattformübergreifende Desktop-App (Windows/macOS/Linux) bauen und schnell UI-Code oder Architekturvorschläge brauchen. Der Prompt ersetzt kein Wissen über Electron-Sicherheitsmodelle (Context Isolation, Preload-Skripte) – die Regeln zu Performance und Cross-Plattform-Kompatibilität bleiben im Prompt nur oberflächlich formuliert, nicht als Detailwissen.

Praxis-Tipp

Setze ${feature} auf eine konkrete Funktion wie „Dateisystem-Zugriff über IPC“ statt auf ein ganzes Modul – dann liefert das Modell brauchbaren Code statt einer allgemeinen Architekturskizze.

Lizenz & Quelle

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

Lade …