Here is a step-by-step guide to visualizing a traditional list of learning outcomes into a swimlane matrix. These prompts are designed for use with Claude, ChatGPT, or any AI code generators like Bolt.new.
Prompt 1 — System, Layout & Interactivity
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 React/Vue/Tailwind), no external libraries. Give me the complete file so I can save and open it directly in a browser.
DATA MODEL (vanilla JS arrays)
- An LOs array: { id (e.g. "LO1"), desc (one-sentence description) }.
- An assigns array: { name, weight (e.g. "15%" or "0% (Formative)"), due (display text), los: [array of LO id strings this assignment addresses] }.
- A loColors array with one hex color per LO, all from a single cohesive color family in ascending intensity (e.g. 5 shades of green from light to dark, one per LO in order) so each LO is visually distinct but the palette feels unified.
LAYOUT — top to bottom
1. Plain page header: a small bold title ("Learning Outcome & Assignment Alignment") and a muted gray one-line subtitle underneath ("Click any LO or assignment to highlight connections").
2. A horizontally-scrollable alignment matrix built as an HTML table:
- Left column (~240px wide): one row per Learning Outcome, each shown as a rounded "pill" containing the LO id in bold colored text (e.g. "LO1") plus its description in smaller bold gray text. This column does not scroll.
- One column per assignment (~72px wide each): for each LO row × assignment column, show a small centered rounded bar/pill — filled with that LO's color if the assignment addresses that LO, or a flat light-gray "empty" bar if it doesn't.
- Alternate row shading (very light cream/gray, subtly different odd vs even) across the data columns, with a slightly deeper hover tint on the whole row.
- Below the LO rows, a final row/footer labeled "Assignments →" (right-aligned, bold gray) followed by one small rounded badge per assignment column showing "A1", "A2", etc. (outlined badge, gray text/border by default).
3. Below the table, a "detail card" (white, rounded corners, thin light border, padding) that shows either the selected assignment's details or the selected LO's details.
STYLE
- Simple, clean, document-like aesthetic: system/Arial-style sans-serif font, off-white/cream page background (~#f5f5f3), dark charcoal body text (~#1a1a1a), muted gray secondary text (~#888).
- Rounded corners throughout (6–10px), soft borders (1–1.5px, light gray), small pill/badge shapes with generous padding.
- Green as the accent/highlight family (or substitute the palette to match the LO color family you chose), used for hover states, active borders, and tag backgrounds.
- Subtle transitions (~0.15–0.2s) on hover and state changes.
INTERACTIVITY
Selection state: track which assignment is currently selected (activeAssignment) and which LO is currently selected (activeLO). Only one can be active at a time — selecting one clears the other. By default, select the first assignment on page load so the chart isn't blank.
Clicking an assignment (its column of bars, or its "A#" badge):
- Sets that assignment active and clears any active LO.
- That assignment's "A#" badge gets a highlighted style (filled background, colored border/text).
- In the matrix, every bar in that assignment's column that represents a true connection gets enlarged/emphasized (e.g. scale up vertically, add a colored ring matching its LO's color) and every other bar (including unrelated cells in that column, and all bars in other columns) dims to a low opacity.
- The detail card updates to show: the assignment's name and number, its weight and due date as small colored tag/pills, and a row of small colored tags — one per LO it addresses, each tag colored to match that LO's color and labeled with the LO id.
Clicking a Learning Outcome (its row label pill):
- Sets that LO active and clears any active assignment.
- That LO's row label pill gets a highlighted style (tinted background, colored border, colored text for both the id and description).
- In the matrix, every bar in that LO's row that represents a true connection gets enlarged/emphasized (e.g. scale up horizontally, darken slightly, add a colored ring), and every other bar dims to a low opacity.
- The detail card updates to show: the LO's id and full description (in its color), followed by a simple stacked list of every assignment that addresses it, each list item showing "A# — assignment name".
Keep all state changes purely visual/instant (no page reload) — re-render just the classes/styles/detail card on each click, don't rebuild the whole table.
Populate it with placeholder LOs/assignments arrays just so the layout and behavior are visible. Output the entire thing as one complete HTML file — no frameworks, no build tools.Prompt 2 — Course Data
Provide your course data in the same message as Prompt 1.
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 and assigns arrays (and loColors if the number of LOs changed) in the index.html file you just built. Keep everything else — layout, styling, and 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 sentence, what students should be able to do):
Assignments — for each one, provide, in the order they occur in the course:
- Assignment name:
- Weight (e.g. "15%", "20%", "0% (Formative)", "Part of 15%"):
- Due date (display text, e.g. "End of Week 7" or "Ongoing (Wks 1–13)"):
- Which Learning Outcomes it addresses (list the LO numbers, one assignment can map to several):
Example of one filled-in LO and one filled-in assignment:
LO1 — "Critically analyze instructional design theory and practice"
Assignment — "Design Project Phase 3: Final Project" — 40% — due End of Week 13 — addresses LO1, LO2, LO3, LO4, LO5
Repeat for every LO and every assignment in the course.Prompt 3 — 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.