Go from a brief to a working prototype
Give your coding assistant a focused brief, clear boundaries, and checks that prove the main flow works.
Make it yours.
A little context makes a better starting point.
Kept on your device. Prompts run in the AI tool you choose.
Write a testable brief
Describe the task from the user's point of view. A narrow, complete flow is easier to evaluate than an open-ended feature list.
Help me scope this feature: An interactive prompt builder with editable inputs and a copy button. Stack: Next.js, TypeScript, pnpm, and an existing UI component library. Write a compact brief containing the target user, their task, the primary flow, inputs, expected outputs, loading/empty/error states, and five observable acceptance criteria. Keep the first version small. List open questions and clearly labeled assumptions. Do not introduce a database or external service unless the feature needs one.
Before you move on
The complete guide.
Read every step, prompt, and review check in one place. The examples use the context below; use the interactive workflow above to make them your own.
Example context
- Feature to build
- An interactive prompt builder with editable inputs and a copy button
- Your stack
- Next.js, TypeScript, pnpm, and an existing UI component library
1. Write a testable brief
Describe the task from the user's point of view. A narrow, complete flow is easier to evaluate than an open-ended feature list.
Example prompt Help me scope this feature: An interactive prompt builder with editable inputs and a copy button. Stack: Next.js, TypeScript, pnpm, and an existing UI component library. Write a compact brief containing the target user, their task, the primary flow, inputs, expected outputs, loading/empty/error states, and five observable acceptance criteria. Keep the first version small. List open questions and clearly labeled assumptions. Do not introduce a database or external service unless the feature needs one.
Review checklist
- Choose one primary user task
- Define empty and error states
- Make every acceptance criterion observable
2. Build in a small slice
Ask the assistant to inspect the project first. Reusing established components and patterns keeps a prototype close to the eventual product.
Example prompt Implement the agreed brief for An interactive prompt builder with editable inputs and a copy button using Next.js, TypeScript, pnpm, and an existing UI component library. First inspect the project instructions, package scripts, existing components, and design tokens. Reuse established patterns. Build one complete flow with keyboard-accessible controls, clear labels, and honest loading/error feedback. Keep secrets on the server and validate data at its boundary. Explain the files you will change, then implement the smallest coherent version.
Review checklist
- Review the proposed files and dependencies
- Try the full primary flow
- Check behavior with missing or invalid input
3. Verify and hand off
Use checks tied to the acceptance criteria. Record what actually ran, what passed, and what still needs attention.
Example prompt Review the implementation of An interactive prompt builder with editable inputs and a copy button against its acceptance criteria. Run the project's relevant type checks, lint checks, and existing tests. Manually or with browser automation verify the primary flow, invalid inputs, keyboard use, and a narrow viewport. Fix failures within scope. Report exact commands and observed outcomes, along with remaining limitations. Do not claim a check passed if you did not run it.
Review checklist
- Run the relevant project checks
- Verify the complete flow in the browser
- Record any remaining limitations
What you’re working toward.
A scoped implementation brief, a working primary flow, and a reproducible verification checklist.