Page Design with AI

Want to jazz up your Canvas pages but don’t know where to start? Join us in Zoom for this demo and make it workshop!

You will have new page design in 15 minutes!

Page design can chunk content and assist in managing cognitive-load for all students.

Claude.ai is recommended generator for producing code. We used the free version to create our examples.

Tips for Creating Page Code with AI Generator

Be specific about the purpose of the page.
State that the page is for Instructure Canvas.
Include the theme, topic, or color scheme in your prompt.
Include the phrase "html for inline design". If page doesn't render correctly in Canvas, reiterate that you don't have access to the CSS.
Include "Page must meet WCAG 2.2 AAA standards for accessibility."
Ask that the code be "responsive so that it renders correctly on mobile devices"
Don't close Claude, you may decide to come back for page adjustments.

Sample Prompt

I need an Instructure Canvas page design using inline HTML with all CSS embedded directly in the HTML elements using style attributes for feedback plan for my fully online community college class. Use div code. Make the page responsive for mobile devices. Be sure that the page meets AAA WCAG 2.2 Accessibility guidelines. Be sure color contrast regardless of bold meets WCAG 2.2 AAA standards.

Secondary Prompts

If the code doesn't look the same when you bring it into Canvas, return to Claude and reiterate that the "code/color/boxes/layout did not render correctly in Canvas. Can you change the code for inline styles? I have no access to CSS."

Other design prompts you might try:

Add a color scheme to your prompt.
Use a white page background.
Square the corners.
Use columns.
Limit boxes to header and footer.
Tell the AI generator what you like/to keep.
Tell the AI generator what changes to make - use more green, set a serious tone.

Suppose that you created a home page and now you want a similar page for weekly agenda, return to Claude and ask it to create a page with the same theme and layout...

Copy Code to Canvas

Use the "Copy" button in the upper right corner of Claude to capture the html code. The button will change from "Copy" to a Checkmark icon.
Open a new Canvas page in "Edit" mode.
Switch to html window by selecting the html icon under the Rich Content Editor.
Paste the code into the html window.
Switch back to RCE page view.
Save the page.

TipsLinks and Buttons on the Canvas Page

Links will need to be set once the page is in Canvas. Follow these steps to preserve the button formatting.

In a second browser tab, open the page that you want the button to navigate to. Copy the page url.
Return to the new page and open the "Link Options" feature. Paste the copied url into the "Link" box.
Select "Done".

Let's head to modules and get started!