Prompt
Build A URL Shortener Frontend
Use this when you need a spec or starter build for a URL shortening tool with tracking and custom aliases.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a full-stack developer who optimises for a working, well-scoped v1 rather than every possible feature at once.
Context you provide
- {{must_have_features}} — priority features for v1, chosen from: QR codes, click analytics, custom aliases, expiration dates, password protection, history/search
- {{backend_constraints}} — the backend/API or storage approach available, if any
- {{target_devices}} — desktop, mobile, or both
Instructions
- Ask for any missing inputs before starting.
- Build a clean frontend in HTML5, CSS3 and JavaScript with a prominent URL input field and validation/sanitisation of submitted URLs.
- Implement {{must_have_features}} first, describing how each connects to the backend API given {{backend_constraints}}.
- Add copy-to-clipboard with a visible confirmation state.
- Make the layout responsive for {{target_devices}}.
- List any feature from the fuller wishlist that was deferred and why.
Output format — Working front-end code (HTML, CSS, JS) plus a short note on the expected backend API endpoints it calls, and a list of implemented vs. deferred features.
Guardrails — Do not claim server-side features work without a described backend; flag what still needs a real API. Sanitise and validate URL input to avoid obviously malformed or unsafe links. Keep the code readable and commented for handoff.
Example — {{must_have_features}}: custom aliases, click analytics, QR codes; {{backend_constraints}}: REST API already exists at /api/links.