Integumentary System
I am taking an anatomy course this summer. I am creating study tools each week.
Each structure on the cross-section of skin is numbered. Type what each number points to into its field below, then press Check answers to mark them right or wrong. Spelling counts loosely — capitalization, punctuation, and either name for a structure are all accepted.
Please note: This is a student-made study aid built with AI — not an authoritative reference. Always verify against your lab atlas, lecture notes, and instructor.
AI Use Citation
Diagram of a cross-section of skin (epidermis and dermis), generated with Google Gemini and then edited and numbered by me for self-quizzing.
I built this study tool by prompting Claude (Anthropic’s Claude Code, model Opus 4.8), directing the design, the diagram choice, and revisions in natural language. My prompts, in order:
- “add a new page, integumentary.astro for the integumentary system. create boxes where I can type the following terms on this image diagram. clean up and color the diagram. create functionality so that the program will mark the answers correct or incorrect on submit. [diagram + term list: epidermis and its five strata; dermis with papillary and reticular regions, dermal papillae, tactile (Meissner’s) and lamellar (Pacinian) corpuscles, eccrine and apocrine sweat glands, hair follicle, bulb, papilla, root and shaft, arrector pili muscle, sebaceous gland; and the subcutaneous layer (hypodermis)]. also add this prompt and all my future prompts to an ‘AI Use Citation’ at the bottom of the page. please add the new page to the Studying Anatomy dropdown.”
- “[shared a photo of my hand-drawn integumentary diagram].”
- “use this svg [integumentary.svg].”
- “please start over on the diagram, basing it on what i gave you. please draw each of the structures, ensure the lines labeling them are parallel/all horizontal. make each color as realistic as possible.”
- “[shared the NCI skin diagram] use this image instead with the citation [National Cancer Institute, NIH, ID 1785, via Wikimedia Commons].”
- “please color the image.”
- “use the second image integumentarydiagram.png in this page and you can use the other image as the key.”
- “[shared a numbered version of the diagram] use this, don’t worry about placing lines, just have places to fill in the numbers below the diagram, for the user to type their answers.”
- “clean up the code if there is any vestigial code you need to remove. remove this section [the strata mnemonic and study-note block]. Have the numbers go in columns instead of rows. update the AI Use Citation with all my prompts.”
Future prompts I use to revise this page will be added here.