🎓 Interactive Prompt Engineering Guide
Status: ✅ Live
URL: aguidetocloud.com/prompt-guide/
Accent: Lime #84CC16
CSS Namespace: .pguide-*
Body Class: page-prompt-guide
Architecture: 100% client-side JS — zero API calls, zero cost
Last updated: 2026-04-12
Version: V3 (all UX fixes + quiz + challenges + certificate + fix-this-prompt)
What Is It?
An interactive, educational tool that teaches prompt engineering techniques through hands-on practice. Unlike our Prompt Library (copy-paste prompts) and Prompt Polisher (score/rewrite full prompts), this tool teaches WHY each technique works and lets users practice one technique at a time.
┌─────────────────────────────────────────────────────────┐
│ PROMPT ENGINEERING GUIDE │
│ "Learn prompt techniques, don't just use them" │
├─────────────┬───────────────────────────────────────────┤
│ │ │
│ Prompt │ ┌─────────┐ ┌──────────────┐ │
│ Library │ │ GUIDE │ │ POLISHER │ │
│ (84 │ │ │ │ │ │
│ prompts) │ │ TEACHES │ │ AUDITS & │ │
│ │ │ technique│ │ REWRITES │ │
│ Ready to │ │ by │ │ full │ │
│ copy & │ │ technique│ │ prompts │ │
│ use │ │ │ │ │ │
│ │ └────┬─────┘ └──────┬───────┘ │
│ │ │ │ │
│ │ └───────┬───────┘ │
│ │ │ │
│ │ User learns → practices → masters │
├─────────────┴───────────────────────────────────────────┤
│ ECOSYSTEM: Guide → Polisher → Library → Copilot tools │
└─────────────────────────────────────────────────────────┘
Why Build This? (Gap Analysis)
| What Exists |
What's Missing |
| Prompt Library — 84 ready-to-use prompts |
Doesn't teach WHY these prompts work |
| Prompt Polisher — CRAFTS score + rewrite |
Audits full prompts, doesn't teach individual techniques |
| LearnPrompting.org — free course |
Requires sign-up, academic language, no sandbox |
| IBM/Google guides — documentation |
Static reading, no interactivity |
| Paid courses (Udemy, Coursera) |
Expensive, not instant, overkill for IT pros |
Our niche: Interactive, workplace-focused, technique-by-technique education with instant practice — zero cost, zero sign-up.
Competitive Differentiation
What Others Do
- 📖 Static articles/guides (read-only)
- 🎓 Video courses (passive learning)
- 🛠️ Prompt playgrounds (assume you already know techniques)
- 💰 Paid platforms (barrier to entry)
What We Do Differently
- 🎯 Interactive sandbox per technique — practice one technique at a time with visual feedback
- 🏢 Workplace-first framing — "Set a Role" not "Persona Prompting", "Give Examples" not "Few-Shot"
- 📱 Platform-specific tips — tailored hints for M365 Copilot, ChatGPT, Claude, Gemini
- 📈 Progressive path — beginner → intermediate, with completion tracking (localStorage)
- 🔗 Ecosystem integration — deep links to Prompt Library, Polisher, Copilot tools
- 🔓 Zero barrier — no sign-up, no API keys, no cost, works offline
- 🔍 SEO-first — individual pages per technique = long-tail keyword targets
V1 Techniques (8)
| # |
Friendly Name |
Academic Name |
Difficulty |
What It Teaches |
| 1 |
🎯 Give Clear Instructions |
Zero-shot / Instruction prompting |
⭐ Beginner |
Be specific about what you want |
| 2 |
🎭 Set a Role |
Role / Persona prompting |
⭐ Beginner |
Frame the AI's expertise |
| 3 |
📋 Add Context |
Context engineering |
⭐ Beginner |
Give background information |
| 4 |
📐 Define the Format |
Output formatting |
⭐ Beginner |
Structure the response |
| 5 |
💡 Give Examples |
Few-shot prompting |
⭐⭐ Intermediate |
Teach by showing patterns |
| 6 |
🧠 Think Step by Step |
Chain-of-thought (CoT) |
⭐⭐ Intermediate |
Guide reasoning process |
| 7 |
🚧 Set Constraints |
Constraint prompting |
⭐⭐ Intermediate |
Set boundaries and limits |
| 8 |
🗣️ Specify Audience & Tone |
Audience/tone tuning |
⭐⭐ Intermediate |
Control voice and style |
V2 Additions (Deferred)
- 🔄 Iterate & Refine
- 🧩 Combine Techniques
- ❌ Negative Prompting
- 📝 Template Variables
- 💬 Multi-turn Strategy
- 📊 Skill Assessment Quiz
Architecture
content/prompt-guide/
├── _index.md ← Hub page
├── give-clear-instructions.md ← Technique 1
├── set-a-role.md ← Technique 2
├── add-context.md ← Technique 3
├── define-the-format.md ← Technique 4
├── give-examples.md ← Technique 5
├── think-step-by-step.md ← Technique 6
├── set-constraints.md ← Technique 7
└── specify-audience-and-tone.md ← Technique 8
layouts/prompt-guide/
├── list.html ← Hub: technique cards + Prompt Builder tab
└── single.html ← Individual technique page with sandbox
static/css/prompt-guide.css ← Lime #84CC16, .pguide-* namespace
static/js/prompt-guide.js ← Sandbox + Builder + localStorage
Data Flow
┌───────────────────────────────────────────────────┐
│ HUB PAGE │
│ /prompt-guide/ │
│ │
│ ┌─── Tab 1: Learn ──┐ ┌── Tab 2: Builder ──┐ │
│ │ │ │ │ │
│ │ [🎯 Clear Instr] │ │ Step 1: Goal │ │
│ │ [🎭 Set a Role ] │ │ Step 2: Role │ │
│ │ [📋 Add Context] │ │ Step 3: Context │ │
│ │ [📐 Format ] │ │ Step 4: Task │ │
│ │ [💡 Examples ] │ │ Step 5: Format │ │
│ │ [🧠 Step by Stp] │ │ Step 6: Constraints│ │
│ │ [🚧 Constraints] │ │ │ │
│ │ [🗣️ Tone ] │ │ [Live Preview] │ │
│ │ │ │ [Copy] [Polish →] │ │
│ └────────────────────┘ └─────────────────────┘ │
│ │
│ Progress: ████████░░ 6/8 techniques explored │
└───────────────────────────────────────────────────┘
│ │
▼ ▼
┌───────────────┐ ┌──────────────────────────┐
│ TECHNIQUE PAGE│ │ PROMPT POLISHER │
│ /prompt-guide/│ │ "Polish your prompt →" │
│ set-a-role/ │ └──────────────────────────┘
│ │ │
│ What is it? │ ▼
│ When to use │ ┌──────────────────────────┐
│ Before/After │ │ PROMPT LIBRARY │
│ Try It 🧪 │ │ "Find similar prompts →" │
│ Platform Tips │ └──────────────────────────┘
│ Real Examples │
│ Next → [📐] │
└───────────────┘
Hub Page — Tab Structure
Tab 1: Learn Techniques (default)
- Grid of 8 technique cards
- Each card: emoji + friendly name + one-liner + difficulty badge + ✅ completed (localStorage)
- Progress bar: "X of 8 techniques explored"
- Filter: All / Beginner / Intermediate
Tab 2: Prompt Builder
- 6-step guided wizard:
- What's your goal? — dropdown (email, summary, analysis, troubleshooting, presentation, document, brainstorm, custom)
- Set a role — optional, auto-suggestions per goal
- Add context — textarea with placeholder hints
- Define your task — main instruction textarea
- Set the format — radio buttons (bullets, table, paragraph, email, code, JSON)
- Add constraints — optional toggles (word limit, tone, audience, language)
- Live preview updates as user fills each step
- Templates — pre-filled examples per goal
- CTAs: Copy prompt / Polish in Prompt Polisher → / Find similar in Prompt Library →
Individual Technique Page Structure
- Hero — technique name, emoji, difficulty badge, read time, "Mark complete" button
- What is it? — 2-3 sentences + real-world analogy
- When to use it — bullet list of workplace scenarios
- Before & After — side-by-side comparison (bad → good)
- Try It Yourself 🧪 — interactive sandbox:
- Pre-filled "starter prompt" (needs improvement)
- User rewrites in textarea
- Visual checklist (not CRAFTS score) shows what they've added
- Encouraging feedback: "Great! You've added a clear role ✅"
- Platform Tips — collapsible accordion per platform (M365 Copilot, ChatGPT, Claude, Gemini)
- Real Examples — 3 prompts from the Prompt Library that use this technique
- Related Techniques — 2-3 cards linking to recommended next techniques
- FAQ — 2-3 questions (feeds FAQPage schema)
- Cross-tool CTAs — Polisher, Library, next technique
SEO Strategy
Target Keywords
| Page |
Primary Keyword |
Secondary Keywords |
| Hub |
prompt engineering guide |
prompt engineering techniques, how to write better AI prompts |
| Give Clear Instructions |
how to write clear AI prompts |
instruction prompting, specific AI prompts |
| Set a Role |
role prompting |
persona prompting, AI role assignment |
| Add Context |
adding context to AI prompts |
context engineering, prompt context |
| Define the Format |
AI prompt output format |
format AI responses, structured prompts |
| Give Examples |
few-shot prompting |
few shot examples, example-based prompting |
| Think Step by Step |
chain of thought prompting |
step by step AI reasoning, CoT prompting |
| Set Constraints |
prompt constraints |
limiting AI responses, constraint prompting |
| Audience & Tone |
AI prompt tone |
audience-aware prompting, tone in prompts |
Schema Markup
- Hub page:
WebApplication + FAQPage
- Technique pages:
HowTo (steps for applying the technique) + FAQPage
- All pages:
BreadcrumbList
Internal Linking Strategy
- Prompt Library → Guide (learn the technique behind this prompt)
- Prompt Polisher → Guide (learn the techniques to improve your score)
- Blog posts about prompting → Guide
- Guide → Polisher (practice with your own prompts)
- Guide → Library (see real examples)
- Guide → Copilot Matrix (which apps support what)
Technical Details
CSS Design Tokens
--tool-accent: #84CC16; /* Lime */
--tool-accent-dim: rgba(132, 204, 22, 0.15);
--tool-accent-glow: rgba(132, 204, 22, 0.25);
localStorage Keys
| Key |
Purpose |
Format |
pguide_completed |
Completed techniques |
JSON array of slugs |
pguide_builder_state |
Builder wizard state |
JSON object |
pguide_last_visited |
Last visited technique |
slug string |
URL State Parameters
| Param |
Values |
Used On |
tab |
learn, builder |
Hub page |
difficulty |
beginner, intermediate, all |
Hub page |
goal |
email, summary, etc. |
Builder tab |
step |
1-6 |
Builder tab |
- JS: < 25KB (prompt-guide.js)
- CSS: < 15KB (prompt-guide.css)
- First paint: < 1s
- Interactive: < 2s
Accessibility
- Keyboard navigation (Tab through cards, Enter to open)
aria-label on all interactive elementsprefers-reduced-motion respected- Focus-visible outlines
aria-live="polite" on sandbox feedback
┌─────────────────────────────────────────────────┐
│ USER LEARNING JOURNEY │
│ │
│ 1. GUIDE: Learn techniques one by one │
│ ↓ │
│ 2. BUILDER: Build prompts step by step │
│ ↓ │
│ 3. POLISHER: Audit & improve full prompts │
│ ↓ │
│ 4. LIBRARY: Browse 84 ready-to-use prompts │
│ ↓ │
│ 5. COPILOT TOOLS: Apply in M365 Copilot │
│ (Readiness → Features → ROI → Licensing) │
└─────────────────────────────────────────────────┘
Files to Create
| File |
Purpose |
content/prompt-guide/_index.md |
Hub page content |
content/prompt-guide/give-clear-instructions.md |
Technique 1 |
content/prompt-guide/set-a-role.md |
Technique 2 |
content/prompt-guide/add-context.md |
Technique 3 |
content/prompt-guide/define-the-format.md |
Technique 4 |
content/prompt-guide/give-examples.md |
Technique 5 |
content/prompt-guide/think-step-by-step.md |
Technique 6 |
content/prompt-guide/set-constraints.md |
Technique 7 |
content/prompt-guide/specify-audience-and-tone.md |
Technique 8 |
layouts/prompt-guide/list.html |
Hub template (2 tabs) |
layouts/prompt-guide/single.html |
Technique template (sandbox + content) |
static/css/prompt-guide.css |
Lime accent styles |
static/js/prompt-guide.js |
Interactivity |
Files to Modify
| File |
Change |
layouts/partials/nav.html |
Add 🎓 Prompt Guide to Toolkit dropdown |
layouts/free-tools/list.html |
Add tool card |
layouts/_default/baseof.html |
Add body class page-prompt-guide |
hugo.toml |
Bump cache_version, increment tool_count to 15 |
Implementation Phases
Phase 1: Foundation (current session)
- Research & plan ✅
- Create all Hugo content pages
- Create layouts (list.html + single.html)
- Create CSS + JS
Phase 2: Integration
- Update nav, free-tools, baseof
- Add SEO schema markup
- Cross-link from existing tools
Phase 3: Polish & Deploy
- Test all interactions
- Smoke test
- Deploy
V2 (Future)
- Skill Assessment quiz
- More techniques (Iterate, Combine, Negative)
- Share results
- Community examples