Here is a step-by-step guide to visualizing a traditional list of learning outcomes into an interactive node graph. 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. In the <head>, load these from CDN via <script>/<link> tags: React 18 (react.production.min.js), ReactDOM 18 (react-dom.production.min.js), Babel Standalone (babel.min.js), the Tailwind CSS CDN script, and the Google Font "Plus Jakarta Sans" (weights 400–900). Write all component code inside one <script type="text/babel"> tag in the body so the browser transpiles JSX live — no build step, no npm, no separate files. 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 layout with placeholder data is fine; we'll add interactivity and the animated connector lines in a follow-up.
DATA MODEL (a single INITIAL_DATA object in a JS const)
- los: array of { id (e.g. "LO1"), code, titleEn, descriptionEn, color (a distinct vivid hex, one per LO — e.g. blue, purple, pink, emerald, amber, cycling if there are more than 5) }.
- assignments: array of { id, titleEn, weightText (e.g. "15%", "0% (Formative)", "Part of 15%"), numericWeight, isFormative (boolean), timelineText (display string), startWeek, dueWeek, isOngoing (boolean), learningOutcomes: [array of LO id strings], category, descriptionEn }.
LAYOUT — top to bottom
1. Page background: light slate-100, generous padding, everything centered in a max-w-7xl container.
2. One large white card (rounded-2xl, bordered, shadow-xl, generous padding, relative positioning, overflow hidden, min-height ~680px) containing everything below.
3. Inside the card, a header row (bottom border, margin/padding below it):
- Left: a small bold uppercase pill "Interactive Node Graph" + a muted helper line "Hover or click cards to trace linkages", then a bold uppercase heading "Learning Outcomes to Assignments Mapping Flow" below it.
- Right: a "⚡ Flow Animation" toggle-styled button (styling only for now) and a conditional "Reset Pin" button.
4. A subtle full-card background dot/grid pattern (faint repeating linear-gradient lines every 24px, very light slate) sitting behind the content, absolutely positioned.
5. An absolutely-positioned, full-size SVG overlay sitting above the grid pattern but visually behind the two content columns (pointer-events disabled so it never blocks clicks). For now it just needs <defs> with one linearGradient per LO (from that LO's color to a shared blue, left to right) — the actual connector paths come in the next prompt.
6. Below the header, a responsive two-column layout (stacks to one column on mobile; on large screens, a 12-column grid with the left column spanning columns 1–5 and the right column starting at column 8 spanning 5, leaving a visual gap in the middle for connector lines to arc through):
- Left column, "Learning Outcomes (LOs)" — a small header row with the section title + a count badge + a small "LO Focus" pill on the right, bottom-bordered. Below it, one rounded-xl bordered card per LO: a solid colored square/badge showing the LO id (background = that LO's color, white bold text), the LO's title next to it, and below that a "Mapped Tasks:" label followed by small badge chips — one per assignment that references this LO, each showing a short assignment label (e.g. "A1").
- Right column, "Course Assignments" — same header pattern with a count badge and a "Timeline & Weight" pill. Below it, one rounded-xl bordered card per assignment: two small pills at the top (the timeline text, and the weight text — styled differently if the assignment is formative vs. weighted), the assignment title in bold below, and on the right edge of the card a small vertical stack of outlined badges — one per Learning Outcome it maps to, each outlined and colored to match that LO's color.
STYLE
- Font: "Plus Jakarta Sans" throughout.
- Neutral slate/white palette as the base, with each LO's own vivid accent color used consistently everywhere that LO appears (its badge, its outline badges on assignment cards, its gradient in the SVG defs).
- Rounded-xl/2xl corners, soft shadows, bold uppercase micro-labels for section headers and pills, generous card padding.
- Cards should already have a defined hover style (e.g. border color shifts toward blue, faint tinted background) even though the full active/dimmed interactive 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 — CDN scripts only, no other 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 hoveredLo, hoveredAsg (set/cleared on mouse enter/leave of each card), and a single pinned state shaped like { type: 'lo' | 'asg', id }.
- Clicking a card toggles its pin: if it's already pinned, clicking again clears the pin; otherwise it becomes the new pin (replacing any other pin).
- Compute activeLoId = pinned LO id if pinned, else hoveredLo. Compute activeAsgId = pinned assignment id if pinned, else hoveredAsg. Pin always takes priority over hover.
- Also track an animatePulse boolean (default true) toggled by the "⚡ Flow Animation" button, and update that button's own active/inactive style accordingly.
- The "Reset Pin" button only renders when something is pinned, and clears the pin when clicked.
HIGHLIGHT / DIM LOGIC
- If nothing is hovered or pinned: every LO card, every assignment card, and every connector line is treated as fully active (normal full-opacity styling).
- If an LO is active (hovered or pinned): that LO card gets a highlighted style (if pinned: a distinct tinted background + colored ring + shadow; if only hovered: a lighter highlighted border); every assignment card that lists this LO in its learningOutcomes is treated as active; everything else (other LO cards, non-matching assignment cards, non-matching connector lines) dims to low opacity (~40%), and dimmed cards restore to a partial hover opacity on their own mouse-over.
- If an assignment is active (hovered or pinned): mirror the same logic — that assignment card gets the highlighted style (pinned = tinted background + colored ring; hovered = lighter border), every LO it maps to is treated as active, everything else dims.
- On an active assignment card, its list of LO outline badges should visually emphasize (slight scale-up + shadow) the specific badge matching the active LO.
- On an LO card, its "Mapped Tasks" badge chips should switch to a solid filled style (e.g. solid blue background, white text) specifically for the task that is the currently active assignment.
ANIMATED SVG CONNECTOR LINES
- For every learningOutcomes relationship in the data (each LO ↔ assignment pair), compute a smooth cubic bezier path between that LO card and that assignment card:
- Measure both cards' bounding boxes relative to the big card container.
- If the assignment card sits to the side of the LO card (side-by-side desktop layout), draw a horizontal S-curve from the LO card's right edge to the assignment card's left edge, with control points offset horizontally by half the horizontal distance.
- If they're stacked vertically instead (mobile layout), draw a vertical S-curve from the LO card's bottom edge to the assignment card's top edge, with control points offset vertically instead.
- Recalculate all paths: once on mount, again after a few short delays (to catch late layout/font shifts), on window resize, once fonts finish loading, and via a ResizeObserver watching the container.
- Render two SVG layers:
- A background layer: every path not currently active, drawn thin, light gray, and low-opacity, always faintly visible so the overall structure of the graph is visible at rest.
- A foreground layer: only the currently active paths, each drawn twice — a soft, wider, low-opacity glow stroke in that LO's color behind it, and a crisper stroke on top using that LO's linear gradient, with a dashed stroke pattern that animates (moving dash offset via a CSS keyframe, looping) whenever animatePulse is true.
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 INITIAL_DATA object (los and assignments arrays) 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 title/description (one sentence, what students should be able to do):
- Preferred accent color, if you have one in mind (otherwise let the AI choose a distinct vivid color per LO):
Assignments — for each one, provide, in the order they occur in the course:
- Assignment title:
- Weight (e.g. "15%", "0% (Formative)", "Part of 15%") and whether it's formative (yes/no):
- Timeline / due text (e.g. "End of Week 7" or "Ongoing (Weeks 1–13) / Final due Week 13"):
- Start week and due week (numbers, for internal sequencing):
- Which Learning Outcomes it addresses (list the LO numbers, one assignment can map to several):
- Short one-sentence description:
Example of one filled-in LO and one filled-in assignment:
LO1 — "Critical understanding and personal reflection on design concepts and curriculum" — color: blue
Assignment — "Design Project Phase 3: Final Project" — 40%, not formative — due End of Week 13 (start week 11, due week 13) — addresses LO1, LO2, LO3, LO4, LO5 — "Capstone final submission combining product output, holistic LO integration, and reflection."
Repeat for every LO and every assignment in the course.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.