Image Editor

Baut aus einem Prompt eine browserbasierte Bildbearbeitung mit Canvas, Filtern, Ebenen und Undo/Redo.

Der Prompt

Develop a web-based image editor using HTML5 Canvas, CSS3, and JavaScript. Create a professional interface with tool panels and preview area. Implement basic adjustments including brightness, contrast, saturation, and sharpness. Add filters with customizable parameters and previews. Include cropping and resizing with aspect ratio controls. Implement text overlay with font selection and styling. Add shape drawing tools with fill and stroke options. Include layer management with blending modes. Support image export in multiple formats and qualities. Create a responsive design that adapts to screen size. Add undo/redo functionality with history states.

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

Umfangreicher Bau-Prompt für einen kompletten browserbasierten Bildeditor mit HTML5 Canvas, CSS3 und JavaScript: Helligkeit/Kontrast/Sättigung/Schärfe, anpassbare Filter mit Vorschau, Zuschnitt und Skalierung mit Seitenverhältnis-Kontrolle, Text- und Formwerkzeuge, Ebenenverwaltung mit Blend-Modi, Export in mehrere Formate, responsives Layout und Undo/Redo-Verlauf. Guter Ausgangspunkt für Entwickler, die ein Grundgerüst oder eine Feature-Checkliste für einen In-Browser-Editor brauchen, etwa zusammen mit einem Coding-Assistenten. Der Prompt ist als einzelner Auftrag sehr ambitioniert, realistisch ist iteratives Umsetzen statt eines fertigen Tools in einem Schritt.

Praxis-Tipp

Lassen Sie sich zuerst nur das Grundgerüst (Canvas plus Werkzeugpanel) generieren und ergänzen Sie Filter, Ebenen und Export danach Schritt für Schritt.

Siehe auch

• Architect Guide for Programmers
• Accessibility Auditor
• Bug Discovery Code Assistant

Lizenz & Quelle

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

Lade …