A Framework for Understanding AI at Work

An interactive visualization for exploring how AI works, how teams use it, and how individual fluency can become collective capability.

Live: shughes-mp.github.io/AI_practices_visualization

---

What it covers

The framework is structured in three parts:

• Part 1 — The Anatomy of AI: AI is a stack of three layers — the model, the app, and the harness. Understanding each layer changes what you can do with it.
• Part 2 — The Practice of AI: How you use AI depends on context, repeatability, and agency. These define four modes of use, each of which can scale from a single person to an entire team.
• Part 3 — From Individual to Collective: A six-step continuous improvement loop for turning individual AI fluency into shared, institutional capability.

How to use it

• Browse freely — click on any block to expand it and learn more. Click again to collapse.
• ✨ Guide me — use the guided tour for a structured walkthrough with reflection prompts at each stage.
• ✦ Ask Claude — use the context-aware chat panel to get help from AI grounded in the framework content.
• Print — use the print button to export a clean version for offline use.

Built with

Plain HTML, CSS, and JavaScript — no dependencies or build step required.

Updating

To push a new version of the visualization:

cp framework_visualization.html index.html
git add index.html
git commit -m "Update visualization"
git push

GitHub Pages will re-deploy automatically within ~60 seconds.