Topic:
❌ Weak Prompt
Score: 2/10
Why it's weak:
Typical AI output:
✓ Strong Prompt
Score: 9/10
Why it works:
Typical AI output:
Configure your prompt
Task (what you need)
Techniques to apply
✓
Role Assignment
Set an expert persona
✓
Stack Declaration
Declare tech stack
Constraint-First
What NOT to use
Format Control
Specify the output format
Show Don't Tell
Paste existing code
Role
Stack
Generated prompt
Click "Build Prompt" to generate your engineered prompt using the selected techniques…
Prompt quality score
CLARITY
SPECIFICITY
FORMAT CONTROL
OVERALL
Technique 01
🎭 Role Assignment
Assign an expert persona before the task. Activates domain-specific knowledge and shifts the writing style.
"You are a senior CSS performance engineer who writes GPU-accelerated animations…"
Technique 02
📦 Stack Declaration
Declare your exact tech stack. Without this, the AI guesses and often picks the wrong framework.
"Tech stack: Vanilla JS (ES2022), plain CSS, Chrome 110+, Firefox 110+, Safari 16+"
Technique 03
🔒 Constraint-First
List what the code must NOT do. Constraints produce more focused, production-ready output.
"Constraints: no external libraries, no inline styles, must work without JavaScript, under 30 lines"
Technique 04
📋 Format Control
Tell the AI exactly what to return. No format instruction = padded, generic responses.
"Return only the CSS with inline comments. No preamble, no explanation."
Technique 05
👁 Show Don't Tell
Paste your actual code. AI cannot guess your variable names, class structure, or patterns.
"Here is my current CSS: :root { --bg: #fff; --text: #1a1a1a; } …"
Technique 06
🔄 Incremental Loop
Don't try to get perfect output in one shot. Build in rounds: skeleton → behaviour → a11y → hardening.
Round 1: basic structure. Round 2: animations. Round 3: accessibility. Round 4: edge cases.
Technique 07
🐛 Debug Template
For bugs: provide the code, the exact error, expected behaviour, actual behaviour, and browser version.
"Expected: centred in viewport. Actual: collapses to 0 height on Safari iOS 16.4"
Technique 08
⚖️ Ask for Options
Request 3 approaches with trade-offs. Faster than asking one at a time and comparing manually.
"Give me 3 ways to do X. For each: the code, when to use it, and its main limitation."
Technique 09 · Copilot Specific
✍️ Comment-First Prompting
In Copilot, your prompts are comments and function names — not a chat box. Write the intent, then let Copilot complete the body.
// Throttle scroll events to max once every 16ms using requestAnimationFrame
// Returns a cleanup function to remove the event listener
function throttleScroll(callback) {
// ← Copilot writes the body here
}