Prompting For Non-Coders

No code? No problem. Think of AI tools as teammates who write HTML, CSS, and JavaScript when you give them clear direction. Here’s how to prompt with confidence.

Ground Rules

• Start with the goal: What should the player learn or feel?
• Share the constraints: single HTML file, offline-friendly, accessible.
• Ask for short chunks of code so you can test quickly.

Prompt Framework

1. Role: “You are a friendly front-end developer.”
2. Task: “Build a dialogue box that teaches PLACEHOLDER AI concept.”
3. Constraints: “Use vanilla JS, no external libraries.”
4. Output: “Return HTML, CSS, and JS in one block.”

Example Prompt

“You are a senior web dev helping me with an offline hackathon project. Create a simple quiz with three buttons that teaches players about AI hallucinations. Include inline CSS for styling, keep the code under 100 lines, and explain how to change the questions.”

Review Checklist

• Does the code run when you paste it into index.html?
• Are there any external links or CDN references? Remove them.
• Is the text inclusive and clear? Edit it to match your team voice.

Iterate With AI

• Ask for improvements: accessibility tweaks, keyboard controls, or hints.
• Paste your current code and say “Fix the bug where PLACEHOLDER issue happens.”
• Request test cases or QA checklists to catch issues early.

Stay curious, stay in control, and treat the AI like a collaborator—not an authority.