Here is a step-by-step guide to visualizing a traditional course schedule as a swimlane matrix, which can also serve as an interactive progress tracker. These prompts are designed for use with Claude, ChatGPT, or any AI code generators like Bolt.new.
Prompt 1 — System & Layout
Create one standalone HTML file named index.html. Use the Tailwind CSS CDN script (<script src="https://cdn.tailwindcss.com"></script>) for styling, and plain vanilla JS in one inline <script> tag — no React, no build step, no other external libraries except inline SVG icons (feather/lucide-style, stroke-based, 2px stroke). Give me the complete file so I can save and open it directly in a browser.
For now, focus on visual structure and layout only — static markup and styling is fine; we'll add interactivity in a follow-up.
DATA MODEL (vanilla JS objects/arrays)
- A MODULES array: { id, title, weeks (display string like "Weeks 3–5"), iconName, summary, items: [ { id, label, type: "topic" | "assignment", status: "todo" | "in_progress" | "completed", estimatedMinutes, dueDate, description (optional), notes (optional) } ] }.
- Each module is assigned one of ~6 named color themes (e.g. Indigo, Emerald, Amber, Rose, Violet, Sky). Each theme defines a consistent set of Tailwind classes reused everywhere that module appears: a soft header background + border, a bold badge background/text pair, a solid icon-background color, a progress-bar fill color, an "active" border/ring color, and a lighter background + border pair for its topic/assignment cards. Cycle themes across modules so no two adjacent modules match.
LAYOUT — top to bottom
1. Sticky header (white, bottom border, shadow): a small rounded-xl blue icon badge (graduation-cap style icon) + an uppercase blue eyebrow line with the course name + "Course Schedule" as a bold title. On the right: a pill showing "{N} Modules • {N} Weeks" and a "Share" button.
2. Progress Tracker card (white, rounded-2xl, soft shadow, subtle decorative soft-colored blurred circles in the background corners):
- Small pill eyebrow "Course Progress Tracker" + "{completed} of {total} items completed" text, and a bold heading "Overall Course Progress".
- "Reset" button and a blue "Mark All Complete" button, top-right (styling only for now).
- Below: the overall completion percentage right-aligned above a horizontal segmented bar (rounded, ~2rem tall, light gray track). The bar is divided into one segment per module, each segment's width proportional to that module's share of total items, showing a filled portion (module's solid theme color) proportional to that module's completion %, with a small pill label overlay showing the week range. Under the bar, each module's segment area shows "Module {id}" in small bold text colored to match its theme.
3. Swimlane Matrix card (white, rounded-2xl, shadow, horizontally scrollable):
- Eyebrow pill "Swimlane Matrix View" + helper text "Click any week segment to highlight module info", heading "Swimlane Matrix".
- Three stacked rows, each row = a fixed ~8rem-wide light-gray label chip on the left (icon + row name: "Modules", "Topics / Timelines", "Assignments / Due Dates") followed by one ~270px-wide column per module.
- Row 1 (Modules): each column is a themed header block (light theme background + border) showing a small "Module {id}" badge and the module title.
- Row 2 (Topics) and Row 3 (Assignments): each column lists that module's items of the matching type as compact rows: a left icon (empty circle = todo, clock icon in amber = in progress, check circle in emerald = completed), the item label, and a small due-date line underneath. Empty columns show small italic "No matching topics/assignments" placeholder text.
4. A small blue-tinted tip banner below the matrix with placeholder explanatory text.
5. Item detail modal markup (hidden by default, we'll wire up open/close next): fixed overlay, dark translucent backdrop with blur, a rounded-2xl white panel with a dark slate-900 header showing the module name (small badge) + a type badge ("topic" in blue / "assignment" in amber) + the item title, and a close (X) button. Body: a 3-button segmented status control (To Do / In Progress / Completed, each with its own icon and color when active), the item's description in a light gray box, a two-column row of small info cards (due date with calendar icon, estimated duration with clock icon), and a notes textarea.
6. Footer: small centered text with the course name and a copyright line.
Populate it with 2-3 placeholder modules just so the layout is visible. Output the entire thing as one complete HTML file — inline SVGs only, no React, no other build tools.Prompt 2 — Interactivity (optional)
Prompt 2 is designed to add checklist behavior and status toggling. If you don’t need these features, you can skip Prompt 2 and move directly to Prompt 3.
Now wire up full interactivity in that same file, on top of the layout you just built:
CHECKLIST / STATUS TOGGLING
- Each topic/assignment row's icon button cycles that item's status: todo → in_progress → completed → todo, on click. Clicking the icon must NOT open the detail modal (stop event propagation).
- Icon and label styling update live with status: todo = empty gray circle outline; in_progress = amber clock icon; completed = emerald filled check icon + the label becomes struck-through and grayed out.
- The segmented progress bar (per module, and the overall percentage) recalculates and re-renders immediately whenever any item's status changes, animated with a smooth width/color transition.
- "Mark All Complete" sets every item's status to completed and updates the bar. "Reset" shows a confirm() dialog, and if confirmed, sets every item back to todo.
- Persist the full MODULES state (including status and notes) to localStorage on every change, and load it back on page load, falling back to the default data if nothing is saved.
MODULE HIGHLIGHTING
- Clicking a module's header block (Row 1) toggles that module "active": the active module's header, topic column, and assignment column all get a highlighted border/ring in its theme color; every other module's columns dim to reduced opacity. Clicking the same module again, or clicking empty space, clears the highlight. Hovering a dimmed column while another is active temporarily restores its full opacity.
DETAIL MODAL
- Clicking anywhere on a topic/assignment row except the status icon opens the modal for that item, populated with its title, type badge, module name, description, due date, estimated minutes, and current status.
- The modal's own 3-button status control lets the user change status directly from the modal, syncing with the row's icon/state in the swimlane behind it.
- The modal's notes textarea saves to that item's `notes` field (and to localStorage) either live or via a small "Save" action — your choice, but it must persist.
- The close (X) button, clicking the dark backdrop, and pressing Escape should all close the modal without losing changes.
Give me back the complete, updated standalone HTML file with all of the above working.Prompt 3 — Course Data
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 MODULES array in the index.html file you just built, and update the header's module/week count. Keep everything else — layout, styling, and any interactivity already in the file — exactly as-is. Give me back the complete, updated standalone HTML file:
Course name (shown in the header eyebrow): [e.g. ETEC 510: Designing Technology-Supported Learning Environments]
Total weeks in term: [e.g. 13]
For each module, provide:
- Module number/order:
- Module title:
- Week range (e.g. "Week 1" or "Weeks 3–5"):
- Icon theme (pick one that fits the topic, or describe it and let the AI choose): [e.g. bookOpen, compass, wrench, shieldCheck, monitor, gamepad]
- One-sentence summary of the module:
- Items in this module — list each as either a Topic or an Assignment, with:
- Label/name:
- Type: Topic or Assignment
- Due date (display text, e.g. "End of Week 5" or "Mid Week 2"):
- Estimated time in minutes:
- Description (optional, 1–2 sentences for the detail popup):
Repeat the module block for every module in the course.
Example of one filled-in module:
Module 1 — "Introduction", Week 1, icon: bookOpen
Summary: "Foundational concepts in media education and 21st century digital literacy."
Items:
- "Introduction: Media Education for the 21st Century" — Topic — due End of Week 1 — 60 mins
- "Let's get to know each other Digital Story" — Assignment — due End of Week 1 — 120 mins
Assign each module a distinct color theme from the app's existing palette (Indigo, Emerald, Amber, Rose, Violet, Sky, etc.) so no two adjacent modules share a color.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.