You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
CHOSEN IDEA: VisualDebugger — AI Bug Tutor for VS Code
"Vibe coding makes you fast. VisualDebugger makes you fast AND smart."
The Concept
A VS Code extension for students and developers that turns every AI-assisted bug fix into a learning moment. When a user asks AI to fix code, VisualDebugger doesn't just apply the fix — it shows a live visual preview, classifies the bug, explains why it broke, and tracks your personal bug patterns over time.
The Problem
"Vibe coding" is the hottest and most controversial trend in dev education — students ship code they don't understand
AI tools fix bugs silently, creating a dependency loop where developers never learn from their mistakes
Developers spend ~70% of debugging time reproducing and understanding bugs, not fixing them
Students accept AI-generated fixes without building mental models of what went wrong
The Narrative (Pitch Angle)
AI coding tools made students faster but not smarter. Every accepted AI fix is a missed learning opportunity. VisualDebugger is the missing feedback loop — every bug you hit becomes a lesson you retain. It's not anti-AI; it's AI that teaches instead of just doing.
Theme fit: Education — AI-powered learning tool that turns every bug into a teachable moment.
Core Features (The Full Loop)
Feature
What It Does
Why It Matters
AI Fix + Visual Diff
Shows exactly what changed in the code with highlighted diff
Baseline — user sees the change, not just the result
Live Preview
Split panel: broken UI on left → fixed UI on right (for web projects)
Makes the fix concrete and visual, not just abstract code
Track B: LLM pipeline — bug classification, explanation gen, quiz gen (test in isolation with sample diffs)
Dev 3 + Dev 4
6–10
4h
Integration: connect LLM pipeline to extension, wire up diff → classify → explain → quiz flow
All together
10–14
4h
Live preview panel (iframe-based), Bug Dashboard (Recharts in webview)
Dev 1+2: preview, Dev 3+4: dashboard
14–18
4h
End-to-end demo flow: plant bugs in demo app, test full pipeline, fix edge cases
All together
18–21
3h
Polish: animations, loading states, error handling, seed dashboard data
Dev 1+2: polish, Dev 3+4: seed data
21–23
2h
Demo prep: script the walkthrough, rehearse 3+ times, pre-record backup video
All together
23–24
1h
Buffer for fires, final testing, sleep deprivation management
All together
Prompt Engineering Notes
Bug Classification Prompt (example)
You are a coding education assistant. Given a code diff (before and after a bug fix), your job is to:
1. **Classify** the bug into exactly one category:
- CSS Layout / Specificity
- Null / Undefined Reference
- Off-by-one Error
- Async / Race Condition
- State Management
- Type Mismatch
- Logic Error
- Syntax Error
2. **Explain** why the original code was broken in 2-3 sentences. Write for a student learning to code. Use plain English. Reference the specific lines that changed.
3. **Name the concept** — what CS/programming concept does this bug relate to? (e.g., "Immutability", "Event Loop", "CSS Cascade")
4. **Generate a quiz question** — one multiple-choice question that tests whether the student understands WHY the bug occurred (not just WHAT the fix was).
Respond in JSON format:
{
"category": "...",
"explanation": "...",
"concept": "...",
"quiz": {
"question": "...",
"options": ["A) ...", "B) ...", "C) ...", "D) ..."],
"correct": "B",
"explanation": "..."
}
}
Why This Wins
Timely narrative — "anti-vibe-coding" is the conversation happening RIGHT NOW in tech education. Judges will have opinions on this. Your project takes a clear, positive stance.
It's a real product, not a toy — VS Code extension with persistent bug tracking feels like something students would actually install and use.
The dashboard is the money shot — showing a visualization of a student's coding weaknesses over time is the moment judges lean forward. It transforms a bug fixer into a learning analytics platform.
Education theme fit is perfect — every feature maps to pedagogy: active recall (quiz), spaced awareness (dashboard), concept linking (explanations).
Technical depth is real — VS Code extension API + LLM pipeline + live preview + data visualization. This is not a ChatGPT wrapper.
The demo is self-contained — you break something, you fix it, you learn from it. The entire loop happens in 2 minutes on one screen.
Comparison: VisualDebugger vs Other Top Picks
VisualDebugger
FormBreaker
DocTranslate
Theme
Education
Re-engineering
Healthcare
Demo Impact
5 — live bug fix + dashboard
5 — side-by-side PDF fill
4 — before/after translation
Feasibility
3–4 — VS Code extension is tricky
5 — pre-select forms
5 — clean LLM pipeline
Judge Appeal
5 — timely, every dev relates
5 — universal pain
5 — health equity
Uniqueness
5 — nobody else will build this
3 — civic tech is known
3 — translation tools exist
Risk
Medium — extension dev complexity
Low
Low
Ceiling if it works
Highest — "I want this" reaction
High
High
Previous Research: All 9 Ideas (Archived)
Click to expand full research on all 9 original ideas
Education Ideas
E1: GradeGhost (Safe and Polished)
One-liner: AI grading co-pilot that takes a teacher's rubric and a stack of student essays, then produces draft feedback and scores that the teacher reviews and approves in a streamlined UI — cutting grading time by 80%.
The Pain: High school teachers grade 120–180 essays per assignment at 8–12 min each = 16–36 hours per cycle. #1 contributor to burnout (NEA). Students get shallow feedback ("Good job") because teachers are overwhelmed.
The Magic Moment: Split screen. Teacher uploads a rubric photo + 5 essays. System processes in ~30 sec. Grading queue appears — click Student 1, see highlighted passages, rubric criteria with suggested scores (e.g., "Thesis Clarity: 4/5"), and a draft feedback paragraph. Teacher tweaks one score, edits one sentence, hits "Approve." 90 seconds vs 10 minutes. Export to CSV + feedback PDFs.
One-liner: Records a lecture, then auto-generates a personalized, interactive "replay" for each student — highlighting parts they need to re-hear based on knowledge gaps, with inline micro-quizzes.
The Pain: Lecture recordings are the #1 study resource but the worst format for learning. Passive re-watching is no better than not reviewing at all.
One-liner: Students collaboratively negotiate their course syllabus with their professor by proposing, debating, and voting on topics and assessments — AI synthesizes into a class-authored syllabus.
The Pain: Student agency predicts engagement, yet syllabi are unilateral. Negotiated syllabi → 23% higher satisfaction but logistics are nightmarish.
One-liner: Takes medical discharge instructions and re-renders at 5th-grade reading level in patient's preferred language, with visual aids and read-aloud.
The Pain: 88 million US adults have limited health literacy. Poor comprehension → 30% higher readmission.