AI Prompts – Weekly Timeline Course Schedule

Here is a step-by-step guide to visualizing a traditional course schedule into a horizontal weekly timeline. These prompts are designed for use with Claude, ChatGPT, or any AI code generators like Bolt.new.

Prompt 1 — Layout & Style

Create one standalone HTML file named index.html. 

LAYOUT
- Sticky header with a rounded-square gradient icon badge (dark slate gradient, graduation-cap icon), course title (bold, ~1.25rem), and a subtitle showing "{N} Modules · {N} Weeks · Click any module to see details".
- Header also has a 3-button segmented filter control (pill-shaped container, light gray bg) with options: All / Topics / Assignments. Active button is white with a subtle shadow.
- Main content area, max-width ~72rem, centered.
- A "chart card" (white, rounded-2xl, soft shadow, subtle border) containing a CSS Grid calendar:
  - Grid columns: a fixed ~6rem label column + one column per week (equal width).
  - Row 1: week numbers (1, 2, 3...), centered, muted gray, bold on hover of that column (hover highlights the whole week column light blue).
  - Row 2 ("Module" row): each module is a colored horizontal bar spanning the grid columns matching its week range (using CSS grid-column: span N). Bar shows "Module {id}" in bold white text. Clicking a bar sets it active (thick white inset ring + colored ring using a --ring-color CSS variable). Hover brightens the bar slightly.
  - Row 3 ("Assignment" row): each week column shows small colored icon "chips" (rounded rect, ~1.375rem tall) for any assignment due that week, colored using each module's light background + text color pair. Weeks with no assignments show a subtle diagonal-stripe placeholder pattern. Clicking a chip also sets that module active.
  - Grid cells have thin light-gray borders; the label column cells are right-aligned, uppercase, tiny bold text.
- Below the grid, a "detail panel" card (white, rounded-2xl, colored left/top border matching the active module's color) that updates when a module or assignment chip is clicked:
  - Top banner (tinted background using the module's pale color) with: a colored icon badge (module's icon, solid bar color bg), module label ("Module {id}", colored text) + week range (with small calendar icon), and a large bold title.
  - Body splits into two columns on desktop (stacks on mobile) when both filters are active: "Topics" (bulleted list, each bullet a small colored dot + text) and "Assignments" (list of assignment names, each with small pill tags below it: a category pill with an icon — e.g. Discussion/Paper/Feedback/Creative — and, if present, a "Due {date}" pill). Column headers have a small icon badge + uppercase muted label.
- Footer note in small muted centered text: "Use the filter at the top to show topics, assignments, or both. Click any module or assignment block for details."

STYLE
- Font: system font stack (-apple-system, Segoe UI, Roboto, etc).
- Base text color #1e293b (slate-800), muted text #64748b / #94a3b8.
- Page background: soft diagonal gradient from #f8fafc to #e2e8f0.
- Cards: white, border-radius 1rem, layered soft shadows, faint 1px borders (#e2e8f0 or rgba(226,232,240,.8)).
- Each module gets its own 5-value color set: a solid "bar" color (used for the module bar, icon badges, dots), a pale "light" bg (used for assignment chip backgrounds), a "text" color (readable on the light bg), a very pale "bg" (detail banner background), a "border" color, and a slightly brighter "ring" color for the active-state outline. Pick 5–7 distinct, accessible color families (e.g. sky blue, teal, violet, rose, amber, emerald) and cycle through them per module.
- Icons: simple inline SVG, stroke-based (feather/lucide style), 2px stroke, rounded caps/joins — not filled icons or emoji.
- Motion: 0.2s ease transitions on hover/brightness/background changes; a small fade-up animation (200-300ms) when the detail panel content changes.

BEHAVIOR (vanilla JS, no framework)
- Data lives in a MODULES array of objects: { id, title, weeks (display string), startWeek, endWeek, icon, color {bar, light, text, bg, border, ring}, topics: [string], assignments: [{ name, dueWeek, due (optional display string), category }] }.
- categoryIcons / categoryLabels maps drive the small pill icon + label per assignment category.
- One re-render function rebuilds the DOM from state (activeModuleId, current filter view, hoveredWeek) — simple template-string rendering into a single #app container is fine.
- Clicking a module bar or an assignment chip sets that module active and scrolls the detail panel into view/updates it.
- Hovering a week-number header highlights that whole week's column.
- The three filter buttons toggle whether the Topics row/column and Assignments row/column render (All shows both).

Output the entire thing as one complete HTML file I can copy/paste or download and open directly — no React, no build tools, no external JS libraries, inline SVGs only.

Prompt 2 — Course Data

Provide your course data in the same message as Prompt 1.

Here is my course data. Update the MODULES array in the index.html file you just created (and update the header subtitle / total week count) using this design system, keeping the code structure and styling exactly as built. Give me back the complete, updated standalone HTML file:

Course title: [e.g. ETEC 543 — Course Schedule]
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, or describe the topic and let the AI choose): [e.g. lightbulb, layers, book, users, monitor, gamepad, sparkles]
- Topics covered (bulleted list):
- Assignments due in this module, each with:
  - Assignment name:
  - Due week (number) and/or display due date (e.g. "End of Week 5"):
  - Category: [Discussion / Paper / Feedback / Creative — or your own category labels]

Repeat the module block for every module in the course.

Example of one filled-in module:
Module 1 — "Introduction", Week 1, icon: lightbulb
Topics: "Course overview", "Design primer"
Assignments: "Introduction Discussion Post" — due Week 1 — category: Discussion

Assign each module a distinct color from the app's existing palette options (sky, teal, violet, rose, amber, emerald, etc.) so no two adjacent modules share a color.

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.