Component Design for the Living Syllabus

This guide explains how to use Generative AI (ChatGPT, Claude, Gemini) to assist in creating accessible, professional HTML components for the Canvas LMS.

While the primary Living Syllabus workflow relies on the generate.js script to convert entire documents, this AI workflow is designed for ad-hoc component creation. It helps you generate specific widgets (like alert boxes, schedules, or grading rubrics) that you can paste directly into your Markdown files or Canvas pages.

1. The Strategy: Centaur vs. Cyborg Workflows

When using AI for course design, you generally operate in one of two modes, based on the "Jagged Frontier" of AI capability (Mollick 2024):

• The Centaur Mode (Delegation): You have existing content (e.g., a written grading policy) and you simply need the AI to wrap it in a specific visual container. The AI acts as a junior developer executing a precise task.
• The Cyborg Mode (Integration): You are brainstorming the course structure with the AI. You might ask it to "Design a visual schedule that emphasizes project deadlines," and it generates both the conceptual layout and the code simultaneously.

2. Setting Up the AI (The Primer)

AI models do not inherently know the strict technical constraints of the Canvas LMS (e.g., that it strips <style> blocks and media queries). You must prime the model before asking it to write code.

2.1. Option A: File Upload (Recommended)

If your AI interface supports file uploads (Claude Projects, ChatGPT 4o):

1. Upload the technical definition file: component-blueprints.md.

2. Type this instruction:

   "I have uploaded a technical design document called 'Component Design - Living Syllabus'. Use this file as the strict constraints for all code you generate in this session. Do not use external CSS. Do not use classes. Use only the inline styles and RGBA color logic defined in the document."

2.2. Option B: The "System Prompt" Paste (Fallback)

If you cannot upload files, paste this block at the very start of your chat session to align the AI's logic with our technical constraints:

*** SYSTEM INSTRUCTION ***
You are an expert Educational Technologist specializing in "Canvas LMS HTML." 
Your goal is to generate semantic, accessible HTML fragments that survive the Canvas Sanitizer.

STRICT TECHNICAL CONSTRAINTS:
1. NO CSS Classes: Canvas strips them. You must use INLINE STYLES only (e.g., <div style="display: flex;">).
2. NO <style> Blocks: Do not write <style>...</style>.
3. DARK MODE RESILIENCE: 
   - Never use solid light backgrounds (e.g., background: #fff). 
   - Use RGBA for transparency (e.g., background: rgba(255,255,255,0.05)).
   - Never set text color to Black (#000). Leave it undefined so it adapts to user themes.
4. LAYOUT: Use "Fluid Hybrid" layout. Use `display: flex; flex-wrap: wrap;` for columns.
5. INTERACTIVITY: The only allowed interactive tag is <details> and <summary>.
6. FONTS: Use system fonts only: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

AESTHETIC (2025 Standard):
- Style: "Tactile Maximalism" or "New Brutalist".
- Use high-contrast borders (2px solid).
- Use "Dopamine Colors" for accents (Blue: #3182ce, Green: #38a169).

3. The Prompt Library

The following examples demonstrate how to construct prompts for increasingly complex needs. Use these as templates to craft your own requests.

3.1. The "Wrapper" (Simple Delegation)

Goal: You have text. You want it inside a box.

Concept: This prompt delegates a single, discrete task (Centaur Mode), focusing on efficiency (Lollypop Design 2025). It provides the content and specifies the visual container.

The Template:

"Generate a [Component Name] for the following text.
Content: [Insert Text]
Style: [Insert Vibe/Color]"

Example Prompt:

"Generate a 'Warning Alert' box for the following text.
Content: 'Late Policy: Assignments submitted after the deadline will incur a 10% penalty per day.'
Style: High-contrast Red."

3.2. The "Transformer" (Data Visualization)

Goal: You have a list. You want a grid or table.

Concept: This prompt asks the AI to interpret the structure of your data and transform it into a more useful visual layout, effectively using the AI as a "thinking partner" (Bowen & Watson 2024).

The Template:

"Take this [Data Source] and transform it into a [Visual Layout].
Constraint 1: [Responsiveness Rule]
Constraint 2: [Visual Detail]"

Example Prompt:

"Take this list of weekly modules and transform it into a responsive Grid Card layout.
Constraint 1: Use flex-wrap so cards stack on mobile.
Constraint 2: Add a relevant emoji to the top of each card based on the module title.

Data:
Week 1: History of the Internet
Week 2: The Protocol Stack
Week 3: Digital Capitalism"

3.3. The "Designer" (Divergent Ideation)

Goal: You have a vague idea. You need creative options.

Concept: This prompt leverages the AI's ability to generate multiple variations, helping you overcome "blank page" syndrome through divergent thinking (Khan et al. 2025).

The Template:

"I need a [Component Type] for [Context].
Generate 3 distinct design variations:

1. [Style A]
2. [Style B]
3. [Style C]"

Example Prompt:

"I need a Hero Header for my syllabus titled 'Intro to Digital Humanities'.
Generate 3 distinct design variations:

1. The Ivy League: Serif fonts, serious tone, grey borders.
2. The Startup: Sans-serif, gradients (Blue/Purple), rounded corners.
3. The Brutalist: Mono-space font, thick black borders, sharp corners."

3.4. The "Architect" (Complex Logic)

Goal: You need a multi-part interactive component.

Concept: This prompt combines multiple constraints and asks for complex HTML structures (like nested interactivity) that would be tedious to write by hand.

The Template:

"Build a [Complex Component] that includes [Feature A] and [Feature B].
The structure should be: [Describe Hierarchy].
Ensure [Specific Technical Constraint]."

Example Prompt:

"Build an Interactive FAQ Section.
The structure should be: A main container with a title 'Course FAQ', followed by 5 <details> tags.
Feature A: The summary text should be bold and blue.
Feature B: The hidden content should have a light grey background.
Ensure all borders use RGBA colors for dark mode compatibility.

Content:
Q: Is attendance mandatory? A: Yes.
Q: Can I submit late? A: See syllabus."

4. Refining the Output (Troubleshooting)

Even with a system prompt, AI often "hallucinates" web standards that Canvas does not support. Use these "Correction Prompts" to fix specific errors.

5. Advanced: The "Syllabus-as-Code" JSON Workflow

The "Syllabus-as-Code" JSON Workflow is a method for separating your course data (the content) from its design (the HTML tags). Instead of asking the AI to write the final code, you ask it to extract the raw information into a structured format (JSON), which your local computer then converts into perfect HTML.

This approach is detailed in the "Structured Engineering" module of your design analysis. Here is a breakdown of what it means and why it is beneficial.

5.1. What it Means: Decoupling Content from Code

In a standard workflow, you ask the AI to "Write a syllabus schedule in HTML." The AI has to do two things at once:

1. Think about the content: (Dates, topics, readings).
2. Think about the design: (Writing <table>, <tr>, <td>, adding CSS styles).

In the JSON Workflow, you split these tasks:

1. The AI handles the Content: It outputs only the raw data in a strict format (JSON), ensuring reliable parsing (Anthropic 2024).
2. Your Script handles the Design: Your local generate.js script takes that data and plugs it into a pre-built, error-free HTML template.

5.2. The Actual Benefits

According to the "Structured Output Validation" and "Micro-Component" sections of your documentation, this provides four major advantages:

5.2.1. Eliminates AI Coding Errors ("Hallucinations")

When AI generates HTML directly, it often invents non-existent CSS classes or forgets to close tags. By restricting the AI to JSON output, you force it to adhere to a strict schema (Anthropic 2024).

• Benefit: The AI cannot "break" the layout because it isn't writing the layout code. It only provides the text, and your trusted script handles the HTML tags.

5.2.2. Write Once, Render Anywhere (Theme Agnosticism)

Because the data is clean and unformatted, you can use the same JSON file to generate multiple different outputs without asking the AI to rewrite anything.

• Benefit: You can feed the same schedule.json file into your generate.js script to produce a PDF for printing, a Dark Mode HTML table for Canvas, and a Mobile-Friendly List for email, simply by swapping the template.

5.2.3. Strict Quality Control

The documentation notes that this method guarantees "schema-compliant responses" (Anthropic 2024).

• Benefit: If the AI tries to skip a "Due Date" or format a date incorrectly (e.g., "Jan 5" vs "2025-01-05"), the JSON validator can catch this error automatically before it ever reaches your syllabus.

5.2.4. Modular Micro-Components

This aligns with the "Micro-Component" strategy described in your batch-make design.

• Benefit: You can treat your course like a database. You can write a script that says, "Go get all assignments from the JSON files and build a 'Master Calendar' on the homepage." This is impossible if the assignments are locked inside static HTML blobs.

5.3. The Prompt

"Extract the course schedule from this text and format it as a JSON object matching this schema:
{ 'week': string, 'dates': string, 'topic': string, 'readings': [] }.
Do not generate HTML, just the data."

References

Anthropic. 2024. "Structured Outputs." Anthropic Documentation.

Bowen, José Antonio, and C. Edward Watson. 2024. Teaching with AI: A Practical Guide to a New Era of Human Learning. Baltimore: Johns Hopkins University Press.

Khan, Abidullah, Atefeh Shokrizadeh, and Jinghui Cheng. 2025. "Beyond Automation: How UI/UX Designers Perceive AI as a Creative Partner in the Divergent Thinking Stages." CHI '25 Proceedings.

Lollypop Design. 2025. "10 AI-Powered Ways to Revolutionize UI/UX Design Today." Lollypop Design Blog.

Mollick, Ethan. 2024. Co-Intelligence: Living and Working with AI. New York: Portfolio/Penguin.