Interactive phylogenetic tree browser with species information, common ancestors, and evolutionary timeline. Explore the tree of life with detailed species cards, divergence time estimates, and key evolutionary innovations at each branch point.
Build Prompt
Copy this prompt into Claude Code
Build a static HTML interactive evolution tree explorer. Dark theme: background #0a0a0f, surfaces #12121a, borders #1a1a2a, accent #a78bfa (violet). Data from inline const TREE = { nested JSON structure } and const SPECIES = [...].
Data structure: TREE is a nested object where each node has: id, commonName, scientificName, rank (Domain/Kingdom/Phylum/Class/Order/Family/Genus/Species), divergedMya (millions of years ago), children (array), extinct (boolean), icon (emoji). SPECIES has extended info: description, keyAdaptations (array), fossilRecord, habitatRange, chromosome count, knownSpeciesCount, conservationStatus (for extant species).
Layout: Two-panel view. Left panel: collapsible/expandable tree rendered with SVG lines connecting nodes. Each node is a pill showing emoji + common name. Extinct species have a faded amber color. Click to expand/collapse branches. Root starts at LUCA (Last Universal Common Ancestor). Right panel: species detail card — shows full taxonomic path (breadcrumb), divergence time badge ("~65 Mya"), key adaptations as badge chips, conservation status color-coded badge, description paragraph, fossil record section, and a mini horizontal timeline bar showing where this species sits in geological time (color-coded by eon: Hadean=dark red, Archean=red, Proterozoic=orange, Phanerozoic=green).
Timeline view toggle: Switch from tree to a horizontal timeline where all species are plotted against a geological time axis from 4,000 Mya to present. Color-code by major group (prokaryotes, invertebrates, vertebrates, plants, fungi, etc.).
Common ancestor finder: Select two species from dropdowns, highlight the lowest common ancestor node in the tree, show divergence time and list shared derived characters.
Search bar: fuzzy search across common and scientific names, jump to node on match.
Seed the tree with: all 3 domains (Archaea, Bacteria, Eukarya), major animal phyla, vertebrate classes, all extant mammal orders, with 60+ species total including humans, chimpanzees, dogs, sharks, octopuses, horseshoe crabs, coelacanths, and axolotls.
SEO: title, meta, OG tags, JSON-LD Dataset markup. Add a glossary section for phylogenetics terms.
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
Focus on a Clade
Narrow the tree to a specific clade — e.g., only primates, only dinosaurs — for deeper detail per species.
Trait Mapper Overlay
Overlay traits (warm-blooded, four-limbed, live birth) on the tree to visualize convergent evolution.
Extinction Events
Mark the Big Five mass extinctions on the timeline and highlight which species survived each one.
Quiz Mode
Hide species names and ask users to place an animal in the correct position on the tree for points.
Genome Size Comparison
Add genome size (base pairs) as a visual bar on each species card and sort/filter by it in list view.
Geographic Distribution
Show a world map on each species card with native range highlighted for biogeography context.
Update Prompt
Update Prompt — Expand coverage to new clades or add recently discovered species
Expand the TREE and SPECIES data to add the complete bird order taxonomy (all 40 Neornithes orders) with representative species for each, including key adaptations and conservation status. Add 3 recently described species from the last 5 years. Redeploy.
SEO Tips
Target "phylogenetic tree of life interactive," "common ancestor of humans and chimpanzees," and "when did mammals diverge."
Add individual anchor-linked sections for each major group so deep links can rank for specific clade searches.
JSON-LD Dataset schema with species count, taxonomic scope, and last-updated date boosts academic search visibility.
Write factual summary paragraphs for each major branch — these attract snippet features for "what is a [phylum]" queries.
Cross-link to related biology tools (cell diagram, anatomy guide) to build topical authority in the biology niche.
Monetization Ideas
Affiliate links to biology and evolution textbooks, field guides, and David Attenborough documentaries.
Sponsorship from natural history museums or biology education platforms (Khan Academy, Crash Course).
Premium downloadable clade-specific poster PDFs with full taxonomic trees formatted for classroom printing.
Embed contextual ads targeting biology students during exam preparation seasons.
Sell quiz and worksheet packs aligned to AP Biology and IB Biology evolution curriculum standards.