Here is a step-by-step guide to visualizing a traditional course schedule into a learner-centered linear flowchart. These prompts are designed for use with Claude, ChatGPT, or any AI code generators like Bolt.new.
How to Use These Prompts
Use Prompt 1 first (Master Prompt) with your course data filled into Prompt 2 (Content Template). Then use Prompts 3–5 for refinements or specific enhancements.
Prompt 1 — Master System
Paste this at the start of every session to establish the design context.
Your task is to build a responsive, single-page Visual Course Syllabus web application as a standalone HTML file (HTML + Tailwind CSS via CDN + Lucide Icons via CDN + vanilla JavaScript).
### DESIGN REFERENCE
Model this after a clean, modern visual syllabus with the following
characteristics:
- Indigo/slate color palette (primary: #4f46e5 indigo-600, surface: slate-50/white)
- Inter or system sans-serif font
- Card-based module layout with subtle shadows and rounded corners (rounded-xl)
- Color-coded activity badges (pills) for each learning activity type
- Two view modes: [Modules] and [Tasks & Assignments], toggled via a button group
- Filter bar allowing users to show/hide content by activity category
- A sticky navigation bar with smooth scroll
- A hero header with course code, title, and course description
- Fully responsive (mobile-first, works on all screen sizes)
- Print-friendly via @media print CSS
### ACTIVITY BADGE COLOR SYSTEM (must be consistent across all outputs)
Assign one unique color to each activity type and use it consistently:
- Readings → Violet (bg-violet-100, text-violet-700)
- Discussions → Blue (bg-blue-100, text-blue-700)
- Hands-on Tasks → Amber (bg-amber-100, text-amber-700)
- Assignments → Red (bg-red-100, text-red-700)
- Reflections → Purple (bg-purple-100, text-purple-700)
### MODULE CARD STRUCTURE
Each module card must include:
1. Module number badge (colored circle) + Module title + Week range
2. Expandable/collapsible content area showing:
- Topics list (bulleted, clean)
- Activity badges (pills) for each item in that module
- Due date chips for any submissions (red-outlined, calendar icon)
3. Color-coded left border strip matching the module's sequence color
### TASKS & ASSIGNMENTS VIEW
A separate flat list view showing all assignments across the course with:
- Assignment title, weight (%), due date
- Interactive checkbox (localStorage-persisted)
- Line-through styling when checked off
- Grouped by module or listed chronologically
### FILTER FUNCTIONALITY
A horizontal filter bar above the schedule with toggle buttons for each
activity type. Clicking a filter shows only modules/items containing
that activity type. "View All" resets filters.
### NAVIGATION
Sticky top nav with links to: Overview, Schedule, Assignments.
Active section highlighted as user scrolls. Print/PDF button on the right.
### CODE REQUIREMENTS
- Single self-contained .html file (no external JS files)
- Tailwind CSS via CDN: https://cdn.tailwindcss.com
- Lucide icons via CDN: https://unpkg.com/lucide@latest/dist/umd/lucide.js
- No React or build step required — vanilla JS only
- localStorage for checkbox persistence
- All interactivity via inline event handlers or document.getElementById
Await the course content data before generating code.
Tip: You can reference the live URL in your prompt to give the AI a visual anchor: “Design this to match the layout and style of https://ranslearninglab.github.io/courseschedule_bolt2/”
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 the course content data. Generate the complete visual syllabus HTML
file using the design system and structure described above.
---
### COURSE INFORMATION
Course Code: [e.g. ETEC 543]
Course Title: [e.g. Learning Analytics]
Semester/Term: [e.g. Fall 2025]
Course Description:
[Paste 2–4 sentence course description here]
---
### COURSE MODULES & SCHEDULE
For each module, provide:
Module [#]: [Module Title]
Weeks: [e.g. Week 1 / Weeks 3–5]
Topics:
- [Topic 1]
- [Topic 2]
Activities:
- [Reading: Author (Year) — Title]
- [Discussion: KeyWord Discussion Post & Response]
- [Task: Hands-on activity description]
Due:
- [Assignment name — weight% — due date]
[Repeat for each module]
---
### ASSIGNMENTS LIST
For each assignment:
Title: [Full assignment title]
Weight: [e.g. 20% / Part of 15% / 0% Formative]
Due: [Week or date]
Description: [1–2 sentence description of the assignment]
Learning Outcomes: [e.g. LO1, LO3]
[Repeat for each assignment]
---
Generate the complete, self-contained HTML file now.Prompt 3 — Style Refinement
Use this after initial generation to fine-tune the visual design.
Refine the visual design of this syllabus with the following adjustments:
1. HERO SECTION
- Use a gradient background: from-indigo-800 via-indigo-700 to-violet-600
- Course description displayed in a frosted-glass card
(bg-white/10, border border-white/20, backdrop-blur, rounded-xl)
- Quick-info badges as pill chips (bg-white/15, text-white, rounded-full)
2. MODULE CARDS
- Each module has a unique left-border accent color following this sequence:
Module 1: indigo (#6366f1)
Module 2: violet (#8b5cf6)
Module 3: cyan (#06b6d4)
Module 4: emerald (#10b981)
Module 5: amber (#f59e0b)
Module 6: red (#ef4444)
- Module number badge uses the same color as its border
- Card hover state: border-color darkens slightly, subtle shadow lift
3. ACTIVITY BADGES
- Use rounded-full pill shape with icon + label
- Font size: text-xs, font-weight: font-semibold
- Consistent padding: px-2.5 py-0.5
- Icon: 12px Lucide icon preceding each label
4. FILTER BAR
- Pill-shaped toggle buttons (rounded-full)
- Active state: filled background matching the activity color
- Inactive state: white background, colored border and text
- Smooth transition on toggle (transition-all duration-200)
5. TYPOGRAPHY HIERARCHY
- Course title: text-3xl md:text-4xl font-bold
- Section headings: text-xl font-bold
- Module titles: text-base font-semibold
- Body/descriptions: text-sm text-slate-500
- Badge labels: text-xs font-semibold
6. SPACING & LAYOUT
- Max content width: max-w-5xl mx-auto
- Section padding: py-12 px-4
- Card gap: space-y-4
- Card inner padding: p-5 or p-6
Apply these changes while keeping all existing functionality intact.Prompt 4 — Interactivity Enhancement
Use this to add or improve interactive features.
Enhance the interactivity of this visual syllabus with the following features:
1. VIEW TOGGLE (Modules ↔ Tasks & Assignments)
- Two-button toggle group styled as a segmented control
(bg-slate-100 rounded-lg p-1, active button: bg-white shadow rounded-md)
- Modules view: shows module cards in order
- Tasks view: shows a flat chronological list of all assignments with
checkboxes, weight badges, due date chips, and module tag
2. FILTER BAR
- Horizontal scrollable row of filter pills above the schedule
- Each pill corresponds to an activity type (Readings, Discussions,
Hands-on, Assignments, Reflections)
- Multi-select: multiple filters can be active simultaneously
- When a filter is active, modules without that activity type are dimmed
(opacity-30) rather than hidden, to preserve spatial context
- "Clear filters" text link appears when any filter is active
3. MODULE EXPANSION
- Cards are collapsed by default showing only title + week + activity badge
summary count (e.g. "3 readings · 1 discussion · 1 assignment due")
- Click to expand full detail panel with smooth CSS transition
(max-height transition from 0 to auto)
- First module auto-expanded on load
- "Expand all / Collapse all" toggle button above the list
4. ASSIGNMENT CHECKLIST
- Checkbox persists via localStorage (key: 'syllabus_[courseCode]_[assignmentId]')
- When checked: row gets line-through, text-slate-400, and a ✓ icon in green
- Progress bar at top of Assignments section showing % complete
(e.g. "3 of 9 assignments complete")
5. ACTIVE NAV HIGHLIGHTING
- IntersectionObserver watches each section
- Active nav link gets: text-indigo-600, border-b-2 border-indigo-600
- Smooth transition on change
6. PRINT / PDF
- Print button in nav triggers window.print()
- @media print: hide nav, filters, toggle; expand all cards;
remove shadows; use 1-column layout; increase font contrast
Implement all features while keeping the file self-contained
(no external JS beyond CDN imports).Prompt 5 — Accessibility & Responsiveness
Use this to ensure the syllabus meets accessibility and mobile standards.
Review and enhance this visual syllabus for accessibility and responsiveness:
1. WCAG COMPLIANCE
- Ensure all text/background color combinations meet WCAG AA contrast ratio
(minimum 4.5:1 for body text, 3:1 for large text and UI components)
- All interactive elements (buttons, checkboxes, cards) have :focus-visible
styles with a 2px indigo ring offset
- All icon-only buttons have aria-label attributes
- Decorative icons have aria-hidden="true"
- All interactive elements are keyboard-navigable (Tab, Enter, Space)
- Collapsible sections use aria-expanded and aria-controls attributes
2. SEMANTIC HTML
- Use <header>, <nav>, <main>, <section>, <footer> correctly
- Module cards use <article> or <section> with aria-labelledby
- Filter buttons use role="group" with aria-label="Filter by activity type"
- View toggle uses role="tablist" with role="tab" for each button
3. RESPONSIVE LAYOUT
- Mobile (< 640px): single column, full-width cards, horizontal scroll for
filter bar, stacked hero info
- Tablet (640–1024px): 2-column overview grid, module cards full width
- Desktop (> 1024px): max-w-5xl centered, 3-column activity breakdown inside
expanded module cards
4. TOUCH-FRIENDLY
- Minimum tap target size: 44×44px for all interactive elements
- Filter pills have min-height: 36px
- Card click/tap area covers the full header row
5. PERFORMANCE
- Defer non-critical scripts with defer attribute
- Use CSS transitions instead of JS animations where possible
- Minimize DOM manipulation: build all HTML as strings, then inject once
Apply all changes and verify the file remains self-contained.
Tip: Once the layout is finalized, ask the AI to update styling and components only—without altering the data structure—to prevent regressions.
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.