Same Prompt, Different Tools: Claude Design
I'm back with round two of my Same Prompt, Different Tools experiment!
If you missed the first one, I'm giving different AI tools the same learning problem, the same source material, and the same basic requirements to see what they create. I'm intentionally not telling them what kind of learning experience to build or what instructional strategies to use. Then I look at the instructional decisions they made, what worked (and what didn't), and how accessible the result is.
My first test was Mindsmith, which is actually built for creating eLearning. You can [read that post here] if you want to see how it went.
Next up is Claude Design, and we're already in pretty different territory. Claude Design isn't specifically an eLearning authoring tool ilke Mindsmith is, so there are some limitations. I gave it the same prompt and the same OSHA source document anyway, and let it decide what to do with them. And... I'm fairly pleased with the results.
One important difference to keep in mind: Claude Design doesn't natively generate images or videos. Since I didn't provide any media for it to use, this learning module won't include any. That's a limitation of the tool rather than a design decision Claude made.
Please also keep in mind this is just a fun little experiment to satisfy my curiosity, and to help raise awareness about the importance of accessibility testing with ANY tool, even when you prompt AI to make accessible content.
The Prompt
I gave each tool the same general prompt and source material. Keep in mind, this is skipping most of the instructional design process. This is all hypothetical so I could keep the scope fairly narrow. I found this OSHA document on Heat Illness Prevention, and decided to narrow it down to landscaping-related work environments.
Here is the exact prompt that I pasted into each tool:
"Create a 10–15 minute digital learning experience for newly hired seasonal employees at a landscaping company who will be working outdoors in hot weather.
Employees receive information about heat safety, but supervisors have found that new employees do not consistently recognize signs of heat illness or know how to respond appropriately when they or a coworker begins experiencing symptoms.
Use the provided OSHA document, Protecting Workers from the Effects of Heat, as the source material. The learning experience should prepare employees to apply this information and make appropriate decisions when they encounter potential heat illness on the job.
The learning experience must conform to WCAG 2.2 Level AA.
Use a clean, professional visual style appropriate for the audience, with a color palette inspired by the provided OSHA document."
I didn't give any more instruction unless I was specifically asked questions that I needed to answer in order for the tool to move forward.
About Claude Design
Claude Design is an AI design and prototyping tool from Anthropic. Unlike Mindsmith, it isn't an eLearning authoring tool. It's designed for creating things like visual designs, interactive prototypes, one-pagers, and other visual work. So we're already giving the same prompt to a very different kind of tool.
Claude Design is currently in beta and is available on Claude's Pro, Max, Team, and Enterprise plans. The least expensive option for an individual is Claude Pro, which is currently $20 per month or $200 per year. I have the Pro plan.
You create by chatting with Claude, and then you can continue prompting it to make changes or edit directly on the canvas. It can also create interactive prototypes, which is particularly relevant here since I asked it to create a digital learning experience without telling it what that experience should look like.
For this experiment, though, I'm starting the same way I did with Mindsmith: the same prompt, the same OSHA source material, and no additional instructional design direction.
How Claude Design Handled the Prompt
Claude didn't need me to provide any additional information before it got started. It immediately identified specific accessibility criteria to focus on and even caught accessibility issues while it was creating the course.
Here's what Claude put in the chat as it worked:
An 11-section self-paced module built from FS-3743: how heat illness develops, early vs. emergency signs with their response protocols, a sort-the-signs practice activity, risk factors and the 20% rule, three job-site decision scenarios with branch-specific feedback, a 5-question check (retakeable), and a printable wallet-card summary.
Accessibility: keyboard-operable native buttons/radios, 44px+ targets, visible focus rings, aria-live feedback, labeled progressbar, no color-only cues (every state carries text), AA contrast, reduced-motion support.
Tweaks available: company name, emergency number, and pass threshold.
Found issues — fixing…
Refining design: Heat Illness Training.dc.html
Finishing up Heat Illness Training.dc.html
Fixed: the quiz prompt legends now float full-width so the fieldset border never cuts through wrapped question text, with the radio group's grouping semantics intact.
Standalone file ready — fonts and runtime inlined, works offline with no dependencies.
The Course
I evaluated the course using 10 different criteria. Remember, this isn't a true experiment with strict controls. I skipped most of the instructional design process, and the prompt was intentionally pretty generic. I didn't even provide learning objectives.
I'll highlight a few of my observations below, but overall, the “out-of-the-box” course scored 23/30 using my self-created criteria.
Content Selection & Performance Alignment: The content was very much in alignment with the provided document and stayed focused on the performance goal. The most important takeaways were reinforced through interactive practice, and the decision scenarios were descriptive and in line with what a landscaper is likely to encounter on the job.
Content Accuracy: No hallucinations! It stuck with the OSHA guide and even organized some of the information more clearly than the provided PDF.
Cognitive Load: This is where Claude Design really shines. (And not just because there are no extraneous images, videos, or sounds!) The information is broken down and organized clearly, with clear and predictable visual formatting used throughout most of the course.
Feedback: Feedback was specific to the learner's responses and gave them the opportunity to learn by trying again and reading the explanations. The feedback was mostly very clear, and I would only make some minor edits.
Accessibility
Before moving on, I have a confession to make. Claude.... schooled me. I was working on this project late at night, filming the second video where I go through and see how easy it is to edit accessibility through prompting.
Not only was I pleasantly surprised with Claude's ability to fix accessibility issues, but I didn't even have to tell Claude how to fix them. I learned while prompting that if I just pointed out the problems, Claude was able to discern the appropriate fix.
And then... I asked Claude to fix something that wasn't broken. I pointed out an "issue" with the radio button groups and navigating between them, myself momentarily forgetting how radio button groups should behave for a keyboard/screen reader. Claude immediately corrected me and cited the relevant accessibility guidance. This was momentarily embarrassing, but I was able to finish my night's work and sleep off the shame.
I was able to prompt very casually by describing the accessibility issues I encountered, and Claude still came back with the appropriate solutions. Here are a couple of the prompts I gave and Claude's responses:
Prompt: Can you change Stage 1 - Minor, Stage 2 - Intensifying, and Stage 3 - Emergency to programmatic Heading Level 3?
Response: All three stage labels are now real <h3> elements under the section's <h2>, with identical visual styling.
Prompt: On Section 1 when I hit the Start Module button, the screen immediately changes and the screen reader immediately reads "Continue" and there is no indication of being on a new screen, and no easy way to get to the beginning of the content.
Response: Focus was staying on the nav button, which simply relabeled itself from "Start the module" to "Continue" — so nothing announced the change and Tab resumed from the bottom of the page.
Now every section change moves focus to that section's <h2> (made programmatically focusable with tabindex="-1"). The screen reader announces the new heading — "Early signs of heat illness, heading level 2" — and the next Tab walks forward from the top of the new content. Applies to Back as well as Continue, and the page still scrolls to top.
Using Claude Design in Practice
Claude Design surprised me with how much it was able to do from a pretty generic prompt. The first version wasn't something I would publish without changes, but it was already a functional learning experience with practice, scenarios, feedback, and an assessment.
Where Claude Design became even more interesting to me was when I started revising it. I didn't need to know how the course was coded or tell Claude exactly how to make a change. I could describe what I wanted differently, or simply point out a problem, and let Claude figure out how to make it happen. That was especially useful when I started addressing accessibility issues. I did, however, go back and inspect the code after finishing the edits and retest everything with a keyboard and screen reader to make sure it was functioning as it should.
There are some obvious limitations. Claude Design isn't an eLearning authoring tool, and it doesn't natively generate the images and videos that a tool like Mindsmith can. I'd also want to do more testing before relying on it for a larger or more complex learning experience.
But for creating a relatively simple, interactive learning experience? I can absolutely see myself using this again. The combination of a strong first draft and being able to revise it through normal conversation made it surprisingly easy to go from “here's the problem” to something much closer to a course I would actually use. I can also see this being really valuable for quickly creating prototypes to test ideas before investing the time in a full build.
The Bigger Accessibility Takeaway
My takeaway from Claude Design is a little different from Mindsmith. I still firmly believe that AI should not be left unattended, but this experiment made me think more about what role AI could play in actually fixing accessibility issues, not just creating them.
I was able to describe accessibility problems in plain language without telling Claude how to solve them, and it was often able to determine the appropriate fix on its own. That's potentially really useful for someone who understands accessibility well enough to recognize a problem but doesn't necessarily have the coding knowledge to implement the solution themselves.
Of course, this only works if you can identify the problems in the first place, and verify that the fixes actually worked. (Don't leave AI unattended!)
Claude confidently making a change doesn't mean I can confidently assume that change is correct. I still went back through the code, tested with a keyboard and screen reader, and checked the resulting behavior. And, as my brief radio-button embarrassment demonstrated, sometimes Claude may actually know that the thing you're asking it to “fix” isn't broken in the first place. Thanks, Claude.
Claude made fixing the accessibility issues I found much easier than I expected, but that doesn't make testing any less important. Even when AI can fix these problems, we still need humans who can recognize those problems and verify that the solutions actually work.
Make sure you check out the full video where you can follow along while I work through accessibility testing this course.
Comments