Canvas HTML Gem: AI-Assisted Lesson Page Formatting

Challenge / Context

Formatting Canvas pages consistently — matching our school’s visual style, meeting WCAG/ADA accessibility requirements, and embedding the correct AI-use policy indicator — took real time to do by hand for every page, especially with only the rudimentary HTML knowledge I picked up in a library web design course back in 2008. I wanted a way to turn raw lesson notes into polished, accessible, on-brand Canvas pages without manually writing or repeatedly copy-pasting styled markup.

Approach

I built a custom Gemini “Gem” with a detailed system prompt that acts as an expert Canvas HTML developer for my 6th grade ELA course. I give it a raw lesson sketch, a structured outline, or an existing page draft, and it outputs ready-to-paste, inline-styled HTML matching my course’s exact design system. I then paste that code directly into Canvas’s HTML editor — the video shows that full workflow, from prompt to published page.

About the Gem

The system prompt defines a full mini design system, so every page comes out consistent regardless of how rough my original notes are:

• Consistent typography and color rules for headings, body text, lists, and dividers, all as inline styles (required by Canvas’s editor).
• A defined callout box palette — distinct styles for general information, warm-up prompts, reflection questions, and activity cards — so the visual language of a page instantly signals what kind of content it is.
• Three input modes: “Chunk & Code” for turning raw, unstructured notes into a sequenced Learn/Engage/Apply page; “Pre-Chunked Code” for mapping an already-organized outline directly into the templates; and “Format-Only” for preserving my exact wording verbatim when I just need it styled, not rewritten.
• Built-in accessibility and policy compliance — every output is checked against WCAG/ADA guidelines, and the Gem knows to embed our school’s AI-use policy indicator image when relevant, reflecting the appropriate permitted level of AI use for that assignment.

Design Rationale

This project is really about building a tool rather than a single lesson: I encoded my visual and accessibility standards into a reusable AI prompt so that every Canvas page meets the same bar, without relying on me remembering or re-typing HTML syntax each time. Defining distinct input modes matters because my raw material varies — sometimes I have a messy brain-dump of ideas, sometimes an already-organized outline, and sometimes a finished draft that just needs formatting — and the Gem adapts its behavior accordingly rather than forcing every input through the same process.

Outcome / Reflection

This dramatically sped up how quickly I can turn lesson ideas into polished, accessible Canvas pages, and it let me do a level of formatting work I couldn’t have done unaided with only basic, years-old HTML knowledge — the AI tool became a translator between my design intent and the actual code. Looking ahead, I’d like to build in a quick self-check step where the Gem verifies its own output against the design spec before I paste it in, to catch any drift from the style guide over time.