Drawing App

Entwickler-Prompt für eine vollwertige Browser-Zeichen-App mit Ebenen, Undo/Redo und Export.

Der Prompt

Create an interactive drawing application using HTML5 Canvas, CSS3, and JavaScript. Build a clean interface with intuitive tool selection. Implement multiple drawing tools including brush, pencil, shapes, text, and eraser. Add color selection with recent colors, color picker, and palettes. Include layer support with opacity and blend mode options. Implement undo/redo functionality with history states. Add image import and export in multiple formats (PNG, JPG, SVG). Support canvas resizing and rotation. Implement zoom and pan navigation. Add selection tools with move, resize, and transform capabilities. Include keyboard shortcuts for common actions.

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 umfangreicher Entwickler-Prompt, der eine KI anweist, den Code-Grundstock für eine browserbasierte Zeichen-App zu liefern: HTML5-Canvas mit Pinsel/Stift/Formen/Text/Radierer, Farbwahl inkl. Picker, Ebenen mit Deckkraft/Blend-Modes, Undo/Redo-Historie, Import/Export (PNG/JPG/SVG), Zoom/Pan sowie Auswahl- und Transform-Werkzeuge. Der Umfang entspricht eher einer Mini-Photoshop-Spezifikation als einem simplen Malfeld – erwarte meist ein Grundgerüst über mehrere Dateien/Funktionen, nicht eine fertige Produktions-App in einem Rutsch. Gut geeignet als Startpunkt für ein Canvas-Lernprojekt oder MVP; für echte Produktreife braucht es danach Performance-Optimierung (v. a. bei Ebenen/Undo-Historie) und Cross-Browser-Tests.

Praxis-Tipp

Fordere die Umsetzung in Etappen an (erst Zeichnen + Farben, dann Ebenen, dann Undo/Redo), sonst liefert das Modell oft nur Gerüst-Code ohne funktionierende Details für die späteren Features.

Lizenz & Quelle

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

Lade …