Build a digital Cornell notes system with the classic cue column, main notes area, and summary section — all editable in the browser with automatic export to clean, printable study guides. Transform passive note-taking into an active recall system that actually sticks.
Build Prompt
Copy this prompt into Claude Code
Build a static HTML digital Cornell notes tool. Dark theme: background #0a0a0f, surfaces #12121a, borders #1a1a2a, accent #6366f1 (indigo). Pure client-side vanilla JS — no backend.
Data model: A Note Page has — id (uuid), subject (string), topic (string), date (string), lecturer (string), rows (array of NoteRow), summary (string), tags (array of string). A NoteRow has — id (uuid), cue (string, the left-column question or keyword), notes (string, the right-column detail content), isHighlighted (boolean).
Layout structure: Faithful Cornell format — header bar across the top showing Subject, Topic, Date, Lecturer (all editable inline). Below header: two-column layout. Left column (30% width, labeled "Cue Column"): for keywords, questions, and review prompts. Right column (70% width, labeled "Notes"): main content. Bottom bar (labeled "Summary"): space to summarize the entire page in 2–5 sentences. Left and right columns are row-synced — each row pair expands together as content grows.
Note rows: contenteditable divs for both cue and notes fields. Tab key moves from cue to notes, Enter in notes adds a new row pair. Delete empty row on backspace. Each row has a subtle row number label (faint, right-aligned in cue column). Hover reveals a highlight toggle (star icon) that marks the row pair in soft indigo.
Toolbar: "New Page" button, "Add Row" button, subject dropdown (populated from existing subjects), tag input with autocomplete, "Study Mode" toggle, "Export" dropdown.
Study Mode: Hides the cue column content and shows only notes — student reads notes and tries to recall the cue. Clicking a row reveals the cue. Tracks recall score: % of rows recalled correctly (self-report check button per row). Shows mastery percentage badge per page.
Notebook sidebar (left, collapsible): Lists all saved note pages grouped by subject. Click to open. Drag to reorder. Search bar filters by topic, tag, or keyword across all pages.
Export options: "Print-Friendly HTML" — generates a clean light-background page optimized for printing with proper page breaks between note pages. "Study Guide" — consolidates all Summary sections and highlighted rows from a subject into a single condensed review document.
Text formatting shortcuts: **bold** renders bold, *italic* renders italic, `code` renders monospace. Simple markdown-lite parsing in contenteditable.
localStorage persistence: auto-save every keystroke with debounce (500ms). Restore on load. "Export to JSON" / "Import from JSON" for backup.
Preloaded example: One complete note page on "Intro to Macroeconomics — Supply and Demand" with 8 row pairs and a filled summary. Accessible via "Load Example" button.
SEO: title "Cornell Notes Template — Digital Note-Taking System for Students", meta description, JSON-LD HowTo, OG tags.
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
Flashcard Generator
One-click convert all cue/notes row pairs into a flashcard deck for spaced repetition review using an Anki-style flip interface.
Voice-to-Notes
Use the Web Speech API to transcribe lecture audio into the notes column in real time while the student types cues manually.
Collaborative Editing
Share a note page via URL with a hash-encoded snapshot so study partners can view (and optionally fork) the same notes.
Diagram Embeds
Add a simple ASCII-art or SVG drawing canvas slot between rows for diagrams, timelines, and chemical structures.
Reading Mode
Clean reading view that hides all editing UI and renders notes in a distraction-free, high-contrast format for review sessions.
Weekly Review Prompt
On each Sunday, surface a modal showing notes from the past week and prompt the student to fill in any missing summaries.
Update Prompt
Update Prompt — Add features or export formats
Update the Cornell Notes tool to add [flashcard deck export / Anki .apkg format / collaborative share link / voice input]. Ensure the existing Study Mode recall tracking still works correctly. Persist any new settings in localStorage. Redeploy.
SEO Tips
Target "Cornell notes template", "digital Cornell notes", and "how to take Cornell notes" — the method is widely taught and searched by students at every level.
Add an explainer section on the Cornell method with a visual diagram of the three-section layout — this type of illustrated content earns backlinks from education blogs.
Create subject-specific note templates (Biology, History, Math) as pre-filled examples to target searches like "Cornell notes biology template".
Add a printable Cornell notes template PDF download (blank) alongside the digital tool — blank template searches have high volume and low competition.
Share completed example note pages on Reddit study communities (r/learnmath, r/MCAT, r/premed) to drive targeted traffic from serious students.
Monetization Ideas
Offer premium subject-specific note templates (MCAT, law school, engineering) with pre-filled cue questions as a $5 digital download pack.
Affiliate partnership with Notion, Obsidian, or Roam Research for students who want a more powerful knowledge management system.
Sell a "Mastery Study System" course that teaches the Cornell method, active recall, and spaced repetition together — built around the tool.
License the digital notebook UI to schools or tutoring companies as a branded study tool with their logo and color scheme.
Google AdSense on the notebook sidebar during low-traffic periods — non-intrusive placement between the note list items.