I Let AI Redesign My Canvas Pages (And You Should Too)

My latest favorite way of using AI in my classroom is to vastly improve the look of my Canvas course pages and assignments. 

I've tried making my Canvas pages better by adding color and images ever since I first started using it in 2020. I've attended webinars about how to make small tweaks to HTML to add borders to my images, or turn horizontal lines into dotted horizontal lines. And, of course, emojis help. 

Then, one day earlier this year, I was frustrated with how much trouble students were having with the directions for an assignment. Admittedly, the directions were overly wordy, and I was about to take my own frequent advice and ask an AI to revise the directions for clarity. Then I wondered what would happen if I asked the AI to revise the directions AND the HTML. The results produced a much more readable page, with clearer directions, and a clean design. I was hooked. 

Now, I frequently ask Claude.ai to revise the HTML of my Canvas pages before my students see them. The example above is from the first time I tried this. The AI converted a wall of text into an easy to read page, and used design elements like boxes, emojis, and colors to create clarity about expectations.

John Hattie found that teacher clarity has an effect size of .75, (that's a lot) and clear directions seems like it would fall into the teacher clarity category. I often suggest to teachers that asking AI to revise their directions for clarity is an important step in any assignment design process. But, if you are using Canvas, Schoology, or any other LMS that allows you to access the raw HTML of your pages, then asking AI to revise HTML is a clear winner. 

How to improve HTML with AI: 

I use Claude.ai for this. I've tried some others, but I keep coming back to Claude. 

It helps to duplicate the Canvas page you want to improve before you start improving it. That way you have a back up copy. 

I find it is best to start with an existing Canvas page. If you need to create the page/assignment first then do that, and fill it in with your directions for your students. 

Then, copy the HTML from the Canvas page you have and paste it into Claude, with some specifications about what you want to improve, what colors you want it to have (or not have) etc. To get the HTML from Canvas, edit the page you are working on, and then look for the </> button under the edit window. That will toggle the window to HTML view and you can use Ctrl+A and the Ctrl+C to capture that HTML. 

Your first request will fail. It will look good in the Claude Artifact, but the styles won't copy over to Canvas. Even if you explicitly tell it you are using Canvas in your first prompt, it will still fail. 

So, as soon as Claude generates the first version, I just immediately tell it again that this is for Canvas. (I've stopped even trying to move the first iteration to Canvas.) Then it will immediately apologize, specify why it failed, and generate a new batch of HTML that will work in Canvas. 

If you don't like the style you get, ask for changes. I routinely ask it to cut sections, relocate parts, combine things, change font sizes, and change colors. I sometimes get results that are very square. Asking it to create softer more rounded edges works well for me. 

Once I have a thread with Claude that is reliably producing HTML with styles that I like, I will keep using that thread to revise additional pages. 

Pages I revise with AI often get a little longer. Design elements and white space can take up more room on the page, so there is a bit more scrolling. I find the trade off to be worth it. 

The time it takes me to do this is usually minimal, under 5 minutes per page, but sometimes it can take longer if I'm not getting what I need. And, of course it will likely take you longer the first few times you try it. 

Remember, you can still edit that page once you have pasted in the improved HTML. I often go back in and edit some text, change font sizes, add another emoji here or there, and change text colors for improved contrast. 

Also, note that I find Claude.ai so useful that I am paying $20 a month for it. If you are using the free version, you may hit usage limits before you have exactly what you want from the HTML. 

It's worth it:

For a small investment of my time I find I can create better looking, easier to follow, pages of directions for my students. Even at five minutes a page though, this can add up to an hour to my weekly work, so I save HTML revisions for things that are heavy on directions, and that students might need to work on independently, like when I have a substitute. 

Also, for kicks, I tried asking Claude to revise the HTML of this blog post and it built a page full of colorful bubbles. That might have worked well on Canvas, but not here. I pointed that out and the next try was better, but not as good as the formatting I can get from blogger, so this post remains unenhanced by AI. 

Let me know if you try revising HTML with an AI assistant. I'd love to know how it worked out for you. 

Canvas course design improvement tutorial AI-powered educational content creation Learning management system optimization Teacher productivity tools Student engagement strategies Educational HTML design Course page redesign guide Claude AI for educators