Generate a working page from scratch

Write me {{page or feature}}.

Environment:
- Stack: {{e.g. Next.js + TypeScript + Tailwind}}
- Already installed: {{list your dependencies}}
- Target file: {{path}}

Requirements:
1. Complete, runnable code. No omissions, no "rest of the code here" comments.
2. Only use dependencies I have. If you need a new package, tell me which and why first.
3. Style with {{e.g. Tailwind}}; do not create a separate CSS file unless I ask.
4. Brief comments on non-obvious logic explaining what it does.
5. When done, tell me: how to run it, what URL to open, and which lines to review first.

Constraints:
- Must work on mobile (at least {{e.g. 375px}} wide must not break).
- No abstractions I did not ask for. If one file is enough, do not split it into five.

Replace the {{}} parts with your own content

Why it works

1. Pinning the stack and existing dependencies is the best defense against AI inventing packages you never installed
2. "No omissions, no placeholder comments" kills the lazy // ... rest similar output
3. "Tell me before adding a package" keeps install decisions yours and prevents version conflicts
4. Asking which lines to review makes AI self-check and hands you a review path

What it looks like

"Build an event landing page, Next.js + Tailwind, at app/events/page.tsx, must not break at 375px" - AI returns a complete tsx file, the run command, and the responsive breakpoints to check.

Where it bites

• !Saying just "write a login page" with no stack gets you React when your project is Vue
• !Not demanding complete code, so AI hands back ellipses that do not run and you cannot find the break

Browse categories