# Dashboard prompt

From "Using AI to Align Your Program, Courses, and Syllabi With Industry AI," Caryn M. Stanley, DBA, ACBSP Region 4, October 16, 2026. carynstanley.com/acbsp-align

**How to use it**

1. Open a new chat in an AI tool that can make a web page (Claude artifacts, or ChatGPT or Gemini canvas) and attach the workbook, AI-Field-Scan-Starter.xlsx.
2. Paste the prompt below.
3. Open the page it makes, check a few rows against the workbook, and save or share it.
4. When the workbook changes, ask the same chat to rebuild the page from the new file.

---

```
Build me an interactive dashboard as ONE self-contained web page (HTML, CSS and JavaScript in a single file) from the attached workbook (AI-Field-Scan-Starter.xlsx, or my own copy of it).

THE DATA
- Sheet "Use cases": one row per AI use case. Columns: ID, Field, Use case, What AI does, Published figure, Figure details, Vendor figure?, Knowledge students need, Skills students need, Abilities students need (one item per line), What the human adds, Classroom idea.
- Sheet "Sources": one row per source. Columns: Use case ID, Publisher, Title, Link, Published, Kind, Vendor?, Quote (exact words), Quote found on page, Checked on. Match sources to use cases by ID.
- Use every row that has an ID, and skip empty rows. Show every field that appears in the Field column, including any I added. Copy the text exactly: do not summarize, invent, add or "improve" any figure, source, quote or link. Put the data inside the page as JSON so the page works on its own.

THE PAGE (title: "AI Field Scan")
1. Header: the title, a subtitle giving the number of use cases, fields and checked sources, and a light/dark toggle.
2. Filters (a left sidebar on a computer, above the content on a phone): Field (all, or one or more fields, each with its own color), "Published figures only", "Hide vendor figures", and a search box that searches every text column.
3. Four summary tiles that update with the filters: Use cases shown; Fields covered; Sources checked (quote found out of total); Use cases with a published figure.
4. A bar chart of use cases per field, one bar per field in that field's color; clicking a bar filters to that field. Draw it with plain HTML and CSS or inline SVG, with no chart library.
5. A sortable table, one row per use case: Field (a colored tag) | Use case (the name, with "What AI does" underneath in smaller text, cut to two lines) | Published figure (the number in bold, a small ✓ if its source's quote was found, and a "vendor" tag for a vendor figure; "no figure" in gray if empty) | What students need to know and do (the first three items, each with a colored letter badge K, S or A, then "+N more") | a Details button.
6. A Details pop-up for each use case: the field tag, the name and what AI does; "What students need to know and do" with every K, S and A item; two side-by-side boxes, "What the human adds" and "Classroom idea"; "Published figure" with the full figure details; and "Sources", each with its kind, date, a "vendor" tag when relevant, "✓ checked" with the check date when its quote was found, the exact quote in italics, and a link that opens in a new tab. It closes with ×, the Escape key, or a click outside it.

DESIGN
- Clean and professional: white cards with soft borders on a light gray background, generous spacing, one blue accent color, and a distinct, accessible color for each field. A readable sans-serif font at 14 to 16 pixels.
- Works on a phone (the page itself never scrolls sideways; the table may scroll inside its card), works with a keyboard, shows where the focus is, and has good color contrast in light and dark.

HONESTY
- Show only what is in the workbook. If a cell is empty, show nothing or "no figure"; never fill a gap.
- End with a short footer: "Every source was opened and its quoted words found on the page. Figures appear only when a source published them. Vendor figures are labeled."

Give me the finished page, then two lines on how to update it when the workbook changes.
```