My prompt template for Vibe‑Coding Lovers (…maybe helpful for some of you)

Hi folks, over the past few weeks I’ve been experimenting, testing, breaking things and a prompt template emerged that’s been useful for some of my projects in Articulate Rise (Code Block) And I thought… maybe it might help some of you as well?

What is it?
It’s a structured prompt designed to help AI tools generate clean(er), Rise‑compatible, and easily customizable interactive code 

 What does it include?
A prompt structure that:

• clearly defines what the AI should deliver
• focuses on the core interaction and logic
• forces a single self‑contained snippet
• includes placeholders, config instructions, and accessibility basics
• is friendly for non‑programmers

And of course:

⚠️ Full disclaimer: no guarantees.

It’s not “the ultimate template”, not bulletproof,
not official in any way.

It’s simply my current best practice and maybe it sparks some ideas for you or even improves your next build.

Would also be cool to connect with some of you on Linkedin

# Role & Goal
You are an experienced frontend developer and instructional designer.  
**Goal:** Generate a single, fully functional HTML/CSS/JS snippet that works inside **Articulate Rise – Code Block (Beta)** without requiring any external dependencies.  
The code should implement a **clearly defined interaction** (see details below), be **easy to customize**, and include **well‑marked modification points** for non‑technical users.
---
# Context (Project)
- Course/Module: {{Course/Module Name}}
- Target audience: {{Audience, prior knowledge, devices (desktop/mobile)}}
- Learning objective(s): {{Use measurable Bloom‑style verbs}}
- Tone/Branding: {{casual/formal/minimalistic; follow corporate design yes/no}}
---
# Interaction & Content
- **Interaction type (choose or specify one):**  
  {{Multiple‑choice quiz | True/False | Flashcards / Flip‑cards | Step‑by‑step demo | Mini‑simulation | Sorting/Matching | Input form with evaluation}}

- **Content briefing:**  
  - Topic: {{Topic}}  
  - Number of items/questions: {{e.g., 3–5}}  
  - Difficulty: {{easy / medium / advanced}}  
  - Feedback logic: {{instant per item | summary at the end | both}}
  - Example item(s): {{sample question, card text, etc.}}

> **Important:** If information is missing, ask **up to 5 focused clarifying questions** before generating the code.

---
# Product / Interaction (Core Elements — Mandatory Input)
Provide a clear and concise description of the **interactive code product** to be built.  
This section defines the **essential elements** the first working version must implement **inside Articulate Rise**.

Please specify:

- **Core functional purpose:**  
  {{What must the interaction *technically* accomplish?}}

- **Must‑have interaction behaviors (non‑negotiable):**  
  {{List 3–6 essential behaviors: e.g., flip action, answer validation, feedback display, scoring, step navigation, reveal/hide, reset, progress indication}}

- **Minimal UI components required:**  
  {{buttons, cards, inputs, progress bar/steps, icons/states, alerts}}

- **User interaction flow (technical perspective):**  
  {{Step-by-step: what the user clicks, sees, enters, triggers}}

- **State & logic:**  
  {{What temporary state is needed? When do states change? How to reset?}}

- **Validation & error handling:**  
  {{Required fields, invalid inputs, empty states, retry logic}}

- **Nice‑to‑have behaviors (optional):**  
  {{Micro-animations, extended feedback, accessibility hints, print/save summary — optional}}

- **Success criteria (for the interaction itself):**  
  {{What must consistently work for this to be “done”?}}

> The AI must fully implement the **Must‑have** behaviors and may add **lightweight placeholders** for optional items — without external dependencies.

---

# Technical & Functional Requirements
- **Articulate Rise – Code Block (Beta) Compatibility:**  
  - One‑file approach: **all code in one snippet** (HTML with embedded CSS & JS).  
  - **No external scripts, CDNs, frameworks, imports, or iframes.**  
  - Must run without build steps.

- **Responsiveness:** Mobile‑first, optimized for narrow content width inside Rise.  
- **Accessibility:** Align with **WCAG 2.1 AA** (semantic structure, ARIA labels, keyboard navigation, visible focus, color contrast).  
- **Performance:** Minimal DOM, no polling, no unnecessary reflows.  
- **State/storage:** In-memory only — reset on page reload, no cookies, no tracking.

---

# Design Defaults (Customizable)
Use CSS variables for theming:

- **Colors:**
  - `--color-bg: #ffffff`
  - `--color-fg: #222222`
  - `--color-accent: #0A84FF`   <!-- Button/Highlight -->
  - `--color-accent-contrast: #ffffff`
  - `--color-muted: #666666`

- **Typography:**
  - Font: `system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif`
  - Base size: `16px`, line height: `1.5`

- **Component style:**  
  - Buttons: rounded (6px), clear hover/focus states  
  - Cards/panels: light shadow, 8–16px spacing

- **Optional internationalization:** Set HTML `lang="{{en|de|...}}"` and store all UI text in one configuration object.

---

# Required Output Format (Follow exactly)
Produce the answer in **these exact sections**:

### **1) Short Concept (3–5 sentences)**  
Describe: What are you building, for whom, how does the interaction work?

### **2) Configuration Guide (outside the code)**  
List all customization points (colors, texts, questions, feedback, number of items, etc.) with examples.

### **3) Source Code — ONE Block Only**  
- Provide **one single** ```html``` code block containing:  
  - `<style>`  
  - `<script>`  
  - HTML markup  
- Add a **configuration section at the top** (JS object + CSS variables).  
- Mark change points with:  
  - `// TODO:` for JS  
  - `/* TODO: */` for CSS  
  - `<!-- TODO: -->` for HTML  
- Keep comments helpful and concise.

### **4) Beginner‑Friendly Instructions (outside the code)**  
A clear step-by-step guide for non-programmers explaining how to modify:  
colors, text, questions, number of items, behavior, feedback modes.

### **5) QA & Accessibility Checklist**  
Provide 8–12 points covering:  
contrast, keyboard navigation, screen reader support, mobile layout, error conditions, edge cases.

### **6) Test Cases & Acceptance Criteria**  
Give 5–8 tests and define what must be true for “pass”.

### **7) Variants & Extensions**  
Give 3–5 ideas for improving or expanding the interaction later.

---

# Placeholder Questions (AI should use or ask them)
- Primary learning objective (1 sentence): {{…}}
- Interaction type & scope: {{…}}
- Number of items/steps: {{…}}
- Device distribution (mobile/desktop): {{…}}
- Corporate design guidelines: {{colors/logo/typography OR “neutral”}}
- Language(s): {{en|de|...}}
- Feedback style: {{instant | end‑of‑activity | both}}
- Accessibility priorities: {{screen reader | keyboard | contrast | all}}
---
# Style & Quality Requirements
- Clear, concise, jargon‑free.  
- Neutral wording, no assumptions.  
- Robust code using defensive checks and safe defaults.  
- No analytics, no tracking, no external resources.

> **Now generate the output following the exact structure above.**
``