Here is a step-by-step guide to visualizing a traditional list of learning outcomes into a simple and interactive matrix. These prompts are designed for use with Claude, ChatGPT, or any AI code generators like Bolt.new.
Prompt 1 — System, Layout & Style
Create one standalone HTML file named index.html. Put all CSS in a <style> tag and all JS in a <script> tag inside the same file — no separate files, no build step, no frameworks, no external JS libraries. In the <head>, link Google Fonts "Inter" (weights 400/600/700) and "JetBrains Mono" (weights 400/700). Give me the complete file so I can save and open it directly in a browser.
For now, focus on visual structure and styling only — static markup is fine; we'll add interactivity in a follow-up.
DATA MODEL (vanilla JS arrays)
- A LOS array of LO id strings in order (e.g. ["LO1","LO2","LO3","LO4","LO5"]).
- A loDescriptions array of [id, full description] pairs, one per LO.
- An items array (the assignments): { id (short slug), assignment (full title), los: [array of LO id strings this assignment addresses], tone (a short key naming this assignment's own accent color) }.
- A toneFill object mapping each tone key to its own hex color — give each assignment a distinct color (not tied to LO) so the color identifies *which assignment* a dot belongs to, ranging from warm amber through neutral grays to near-black, so the palette feels cohesive with the overall design.
STYLE — editorial, minimal, print-like
- CSS custom properties for: --primary (near-black, ~#1a1a1a), --accent (warm amber, ~#d97706), --muted (mid gray, ~#6b6b6b), --surface (warm off-white, ~#f6f5f3), --line (very faint black at ~10% opacity for hairline borders).
- Body font: Inter. Small uppercase labels/eyebrows/mono tags: JetBrains Mono, letter-spacing ~0.12–0.18em, uppercase, small (10–11px).
- Page: white background, content centered in a max-width ~1100px column with generous padding.
- No heavy shadows or rounded-2xl cards — this style uses hairline borders (1px, var(--line)), modest 10–12px border radius, and whitespace instead of heavy visual containers.
LAYOUT — top to bottom
1. Header: a small amber uppercase mono eyebrow ("Visual Syllabus"), then a large bold heading ("Learning Outcomes and Assignments") sized responsively (clamp between ~28px and ~44px), with a thin hairline border beneath the whole header block.
2. Section header row: "Learning Outcomes" as a normal-weight heading on the left; on the right, a "Clear" text-button (amber, underline on hover, hidden by default — only shown once something is selected) plus a small muted mono label ("Matrix").
3. A bordered, rounded, faintly-tinted box containing a vertical list of Learning Outcomes: each LO is a full-width button-style row with a small amber mono "LOx" tag on the left (fixed width) and its full description text next to it, comfortable line-height. Hover shows a subtle border; already define (for later) an "active" state (amber border, white background, subtle shadow) and a "dim" state (lowered opacity) even though the click logic comes in the next prompt.
4. Below that, a bordered, rounded, horizontally-scrollable table:
- Header row: first column header "Assignment" (left-aligned), then one small clickable-looking header button per LO (just "LO1", "LO2", etc., mono font, muted color, subtle rounded hover background — define an "on" active state with a solid amber background and white text for later).
- Body rows: one per assignment. First cell = the assignment's full title (left-aligned, small text). Remaining cells = one per LO, each centered, containing a small rounded-square "dot": filled with that assignment's own tone color if it addresses that LO, or a faint neutral gray flat square if it doesn't. Zebra-stripe alternating rows with a very subtle tint, and a subtle hover background across the whole row. Already define (for later) an "on" row state (soft amber-tinted background, bold assignment name) and a "dim" row state (lowered opacity), and a "cell-on" dot state (slightly larger, with an amber ring/outline) even though the click logic comes next.
Populate it with the placeholder LOs/assignments data just so the layout is visible. Output the entire thing as one complete HTML file — no frameworks, no build tools.Prompt 2 — Interactivity
Paste after Prompt 1 in the same conversation.
Tip: Skip Prompt 2 if you want a simple/light static version — no hover-highlight, no animated connector lines, no pin/reset behaviour.
Now wire up full interactivity in that same file, on top of the layout you just built:
SELECTION STATE
- Track a single `selection` value: either null, or { kind: 'lo', id } or { kind: 'assignment', id }. Only one thing can be selected at a time.
- Clicking an LO (either its row in the list, or its column-header button in the table) selects that LO — or, if it's already selected, clicking it again clears the selection back to null (toggle behavior).
- Clicking an assignment's row in the table selects that assignment the same way (toggle on/off).
- Clicking the "Clear" button sets selection back to null.
- The "Clear" button is only visible/shown when selection is not null.
HIGHLIGHT / DIM LOGIC
- When selection is null: nothing is highlighted or dimmed — everything shows its normal resting style, and no dots are enlarged.
- When an LO is selected:
- That LO's row in the LO list gets the "active" style; every other LO row gets the "dim" style.
- That LO's column-header button in the table gets the "on" style (solid amber background).
- Every assignment row that addresses this LO is NOT dimmed and its cell in that LO's column gets a highlighted column background; every assignment row that does NOT address this LO gets the "dim" style.
- In every row, the dot in this LO's column gets the enlarged "cell-on" treatment if that assignment actually addresses this LO.
- When an assignment is selected:
- That assignment's row gets the "on" style (tinted background, bold title); every other row gets the "dim" style.
- In the LO list, every LO that this assignment addresses gets the "active" style; every LO it does NOT address gets the "dim" style.
- In the table header, there is no single active LO column highlight in this case (leave columns in their default state) — but within the selected assignment's own row, the dots for every LO it addresses get the enlarged "cell-on" treatment.
Keep all state changes purely visual/instant (no page reload, no rebuilding the DOM structure) — just toggle CSS classes on the existing elements based on the current selection, then re-run this logic after every click.
Give me back the complete, updated standalone HTML file with all of the above working.Prompt 3 — Course Data
Provide your course data in the same message as Prompt 1 & 2.
Tip: You can copy and paste your content straight from your syllabus instead of filling out each section in the prompt.
Here is my course data. Update the LOS, loDescriptions, items, and toneFill values in the index.html file you just built. Keep everything else — layout, styling, and any interactivity already in the file — exactly as-is. Give me back the complete, updated standalone HTML file:
Learning Outcomes — for each one, provide:
- LO number/order (e.g. LO1, LO2...):
- Full description (one or two sentences, what students should be able to do):
Assignments — for each one, provide, in the order they occur in the course:
- Assignment title:
- Which Learning Outcomes it addresses (list the LO numbers, one assignment can map to several):
- (Optional) a short description of the assignment's role/weight/timing, if you'd like it reflected — this design doesn't display weight/due date by default, so mention if you'd like those added as extra columns or a detail area.
Example of one filled-in LO and one filled-in assignment:
LO1 — "Critically reflect on how models of technology integration and learning theory relate to the development and implementation of ICT-based learning experiences."
Assignment — "Design Project Phase 3: Final Project (Product & Peer Reflection)" — addresses LO1, LO2, LO3, LO4, LO5
Repeat for every LO and every assignment in the course. Assign each assignment a distinct accent color across the existing warm-neutral palette (amber, near-black, mid-grays) so no two adjacent assignments look identical in the matrix.Prompt 4 — Accessibility Enhancements (UDL + WCAG)
Now review and enhance this same file for accessibility, aligned with WCAG 2.2 (AA) and Universal Design for Learning (UDL) principles. Keep all existing layout, styling, data, and interactivity — add to it, don't redesign it. Make these specific improvements:
DON'T RELY ON COLOR ALONE (WCAG 1.4.1 / UDL multiple means of representation)
- The LO/assignment dots currently communicate a connection using color alone — add a visible non-color cue too: e.g. a checkmark glyph or filled vs. outlined shape for "connected" vs. "not connected," so the information is still clear in grayscale or to someone with color vision deficiency.
- Add a small text legend near the table explaining what a filled dot vs. an empty dot means.
COLOR CONTRAST (WCAG 1.4.3 / 1.4.11)
- Check text-on-background and control-on-background contrast ratios against the current palette (amber accent, muted gray, near-black on off-white) and darken/adjust any color that falls under a 4.5:1 ratio for normal text or 3:1 for large text/UI components, without changing the overall look and feel.
KEYBOARD ACCESSIBILITY (WCAG 2.1.1 / 2.4.7)
- Every clickable element (LO list buttons, LO column-header buttons, assignment table rows, the Clear button) must be reachable via Tab and activatable with Enter/Space — use real <button> elements or add tabindex="0" plus keydown handlers to anything not already a native interactive element.
- Add a clearly visible focus outline/ring on every focusable element (don't remove the default outline without replacing it with an equally visible custom one).
- Ensure focus order follows the visual reading order (top to bottom, left to right).
SCREEN READER SUPPORT (WCAG 1.3.1 / 4.1.2)
- Add proper table semantics: <caption> summarizing what the table shows, <th scope="col"> on LO header buttons, <th scope="row"> or appropriate labeling on assignment name cells.
- Add aria-pressed (true/false) to any toggle-style button (LO buttons, LO header buttons, assignment rows if they act as toggles) reflecting current selection state.
- Add an aria-live="polite" region (visually hidden is fine) that announces the current selection in plain language when it changes — e.g. "Showing assignments related to LO2" or "Showing learning outcomes for Design Project Phase 3" or "Selection cleared" — so screen reader users get the same feedback sighted users get from the highlight/dim effect.
- Add descriptive aria-label or visually-hidden text to icon-only or ambiguous controls (e.g. the Clear button, any dot elements) so their purpose is unambiguous out of visual context.
MOTION & ANIMATION (WCAG 2.3.3)
- Wrap any transition/animation effects (hover transitions, dash/pulse animations if present in this build) in a `@media (prefers-reduced-motion: reduce)` rule that disables or significantly shortens them for users who've requested reduced motion at the OS level.
TARGET SIZE & TOUCH (WCAG 2.5.8)
- Ensure clickable rows, buttons, and dots have a comfortably large hit area (effectively at least ~24×24px, ideally ~44×44px including padding) even if the visible dot/icon itself stays small — expand the clickable padding rather than the visible graphic if needed.
TEXT & READABILITY (UDL multiple means of representation)
- Confirm body text stays at a readable size (14px+) and line-height (1.5+), and that no information is conveyed only through a tooltip or hover-only state — anything shown on hover should also be reachable/announced via keyboard focus.
MULTIPLE MEANS OF ENGAGEMENT (UDL)
- Add a short, plain-language instructional line near the top of the section (visible to everyone, not just assistive tech) explaining how to use the matrix: e.g. "Select a learning outcome or assignment below to see how they connect. Use Tab and Enter, or click, to make a selection."
Give me back the complete, updated standalone HTML file with all of the above added, preserving every existing feature.Key Takeaways
Running these prompts with your course data for the first time might surprise you—it’s impressive how quickly AI can transform a traditional syllabus. However, you may also realize that using AI prompts isn’t a one-and-done magic trick; it’s an interactive process. In my experience, fine-tuning these prompts can easily take 1 hour, depending on how specific you want to be. Think of these prompts as a baseline rather than a single-click solution. From here, you can layer in specific instructions to match your vision, whether that means customizing colour palettes, adding emojis for visual cues, or adjusting typography. By building on these foundational prompts and guiding the AI through clear, detailed conversations, you’ll quickly find yourself “vibe coding” your way to a visual syllabus design.
Once your design is finalized, you can view the live URL and embed it into your website. Check out this post: How to Convert Your Visual Syllabus Design into an Embeddable Link.