Interactive cell biology reference with labeled organelle diagrams, function descriptions, and comparison charts. Build a visual study tool covering prokaryotic, animal, and plant cells with clickable organelle detail panels for biology students at every level.
Build Prompt
Copy this prompt into Claude Code
Build a static HTML interactive cell biology reference site. Dark theme with background #0a0a0f, surfaces #12121a, borders #1a1a2a, accent color #a78bfa (purple). Data from inline `const ORGANELLES = [...]`, `const CELL_TYPES = [...]`, `const PROCESSES = [...]`.
Each organelle has: id, name, nickname (e.g. "powerhouse of the cell"), cellTypes[] (animal/plant/prokaryote), function (2 sentences), structure (1 sentence), analogy (real-world comparison), size (nanometers), membrane (true/false), discoveredBy, discoveredYear, relatedOrganelles[], clinicalRelevance (disease if malfunctions).
Cell types: animal, plant, prokaryote — each with a list of present organelles and unique features.
Layout: Three tabs at top — Animal Cell, Plant Cell, Prokaryote. Each tab shows a large SVG cell diagram with organelles drawn as labeled, colored shapes positioned anatomically. Each organelle in the SVG is clickable (hover highlights it). Clicking opens a right-side detail panel: name, nickname, function, structure, real-world analogy, size scale bar, and "diseases linked" list.
Below the diagram: Organelle comparison table — rows = organelles, columns = animal/plant/prokaryote, checkmarks for presence. Filterable by membrane-bound vs non-membrane-bound.
Processes section: Mitosis, Meiosis, Photosynthesis, Cellular Respiration — each as a step-by-step animated (CSS) flow diagram showing which organelles are involved at each step.
Quiz mode: hide organelle labels on the SVG, click a shape and type its name, get immediate feedback with score tracking.
SEO: title, meta description, OG tags, JSON-LD EducationalResource. Include print stylesheet for labeling worksheets (blank diagram + answer key).
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Microscopy Gallery
Add real electron microscopy image references alongside the diagrams for each organelle.
Specialized Cell Types
Expand to neurons, red blood cells, muscle cells, and stem cells with unique organelle arrangements.
Disease Connections
Link each organelle to genetic diseases — mitochondria to MELAS, lysosomes to Gaucher disease.
3D Rotation Simulation
CSS 3D transform to rotate the cell model showing depth and organelle layering.
AP Biology Alignment
Tag each organelle and process with AP Biology big ideas and learning objectives.
Blank Diagram Worksheet
Printable blank SVG with numbered arrows and answer key for classroom labeling exercises.
Update Prompt
Update Prompt — Add specialized cell types or expand processes
Add a new cell type tab for [neuron/muscle cell/red blood cell]. Create the SVG diagram with accurate organelle placement and proportions for that cell type. Add its unique organelles to the ORGANELLES array with full detail panels. Update the comparison table to include the new cell type column. Redeploy.
SEO Tips
Target "cell organelle functions", "animal vs plant cell diagram", "biology cell quiz" — evergreen study queries.
Use JSON-LD EducationalResource with educationalLevel, learningResourceType, and subject properties.
Create dedicated pages for each organelle so "mitochondria function" queries land on a deep content page.
Add alt text to all SVG elements describing the organelle shape and location for accessibility and SEO.
Include an FAQ section answering "What does the [organelle] do?" for each major structure.