💻 Programmierung & Entwicklung

URL Shortener

📁 Programmierung & Entwicklung 👤 Beigetragen von @f 🗓️ Aktualisiert 2026-04-19

Der Prompt

Build a URL shortening service frontend using HTML5, CSS3, JavaScript and a backend API. Create a clean interface with prominent input field. Implement URL validation and sanitization. Add QR code generation for shortened URLs. Include click tracking and analytics dashboard. Support custom alias creation for URLs. Implement expiration date setting for links. Add password protection option for sensitive URLs. Include copy-to-clipboard functionality with confirmation. Create a responsive design for all devices. Add history of shortened URLs with search and filtering.

0 Kopien

🚀 In ChatGPT öffnen ✨ In Claude öffnen 💎 In Gemini öffnen

Beispiel-Ausgaben

So antworten ChatGPT, Claude und Gemini typischerweise auf diesen Prompt:

🚀 ChatGPT

I'll help you build a comprehensive URL shortening service! Let's start with the HTML structure featuring a clean input field, then add CSS for responsive design across devices. For the backend, we'll use a REST API with endpoints for shortening, retrieving, and tracking URLs. I'll include URL validation using regex patterns, QR code generation via a library like qrcode.js, and implement localStorage for history management with search filters.

✨ Claude

This is quite an extensive feature set for a URL shortener. I'd recommend starting with core functionality first: the shortening interface, validation, and basic retrieval. Then layer in features like QR codes (using a library like qrcode.js), analytics (consider privacy implications), and password protection. Note that some features like click tracking will require careful backend design and potentially database considerations beyond a simple API.

💎 Gemini

To build this URL shortener, use HTML5 forms with input validation (pattern attribute and JavaScript checks), CSS Grid/Flexbox for responsive layout, and fetch API for backend calls. Integrate libraries like qrcode.js for QR generation and Clipboard API for copy functionality. The backend should handle POST requests for shortening, implement database storage for tracking clicks and metadata, and return JSON responses with shortened URLs and analytics data.

So nutzt du diesen Prompt

Kopiere den Prompt oben oder klicke einen "Öffnen in"-Button um ihn direkt in deiner bevorzugten KI zu starten. Du kannst den Text dann an deinen Anwendungsfall anpassen — z.B. Platzhalter wie [dein Thema] durch echten Kontext ersetzen.

Welches KI-Modell funktioniert am besten

Claude Opus 4 und Sonnet 4.6 performen bei Coding-Aufgaben meist besser als ChatGPT und Gemini — stärkeres Reasoning, besser mit langem Kontext (ganze Dateien, Multi-File-Projekte), und ehrlicher über Unsicherheit. ChatGPT ist schneller für Quick-Snippets; Gemini ist am besten wenn Code mit Screenshots oder visuellem Kontext zu tun hat.

Diesen Prompt anpassen

Tausche die im Prompt erwähnte Sprache (Python, JavaScript, etc.) gegen deinen Stack. Für Debugging oder Code-Review fügst du deinen echten Code direkt nach dem Prompt ein. Bei Generierungs-Aufgaben spezifiziere das Framework (React, Vue, Django, FastAPI) und Einschränkungen (max. Zeilen, keine externen Libraries, muss async sein).

Typische Anwendungsfälle

Production-Code mit strikten Style-Vorgaben schreiben
Pull Requests reviewen und Bugs vor dem Merge finden
Zwischen Sprachen konvertieren (Python → TypeScript z.B.)
Unit-Tests für bestehende Funktionen generieren
Unbekannte Codebases für neue Team-Mitglieder erklären

Variationen

Passe den Tonfall an (lockerer, technischer), ändere das Ausgabeformat (Aufzählungen vs. Absätze) oder füge Einschränkungen hinzu (Wortlimits, Zielgruppe).