🧛👻 BloodBound Academy: How I Built a Haunting AI Study Tool in ~7 Hrs Using Kiro's Spec-Driven Magic

[MyrinNew]

The Challenge

It's 2 AM. You're staring at your syllabus, trying to create study aids for your study sessions. Manually transcribing? Tedious. Organizing topics? Time-consuming. Creating comprehensive lesson plans? Exhausting.


What if AI could do all of this... wrapped in a haunting vampire aesthetic?


That's what I built. But here's the real story: I went from rough idea to production deployment in <7 hrs using Kiro's spec-driven development.


Let me show you exactly how.





⚡ The ~7-Hour Timeline (No BS)





Hour 0:00 → Brain dump ideas (messy, unstructured)
↓
Hour 0:40 → Kiro generates complete specs in 5 MINUTES! 🤯
↓
Hour 1:00 → Review & refine specs to match my vision
• Adjust requirements.md for my specific needs
• Tweak design.md architecture decisions
• Finalize tasks.md execution plan
↓
Hour 4:00 → Click through 15 tasks → Working MVP ✅
• From empty folder to functional app
• Systematic task execution
• All tests passing
↓
Hour 7:00 → Vibe code enhancements 🎨
• Audio system (14 effects)
• Enhanced animations (blood trails, spiders, bats)
• Multiple themes (gothic, vampire)
• Component polish & rendering improvements
↓
Hour 7:30 → Refine specs to match final code 📚
• Kiro analyzes all files
• Updates specs = living documentation
↓
Hour 7:45 → Deploy to Netlify 🚀
• Git workflow setup
• Push to production
• Live on the internet!






Result: A fully functional, production-ready app with:

• 🤖 AI-powered lesson generation from syllabus images
• 🧛♂️ Immersive vampire theme with 14 audio effects
• 📜 Ancient scroll viewer with flickering candles
• 🎨 20+ CSS animations and atmospheric effects
• ✅ Property-based testing with 100+ iterations
• � Living documentation that matches the code

🎯 The Two Game-Changing Moments

Moment #1: Specs in 5 Minutes

I gave Kiro this messy brain dump:





A site with a landing page, and another page where user can
- Upload syllabus images
- AI extracts course structure
- Users pick topics
- Chose between :- Overview, In-depth explanation, or Key Takeaways of the Topic chosen
- Generate study aids based on topic, unit, content type
- Ancient scroll display with candles
- Blood trails, screen cracks, flying bats
- Thunder, lightning, gothic fonts
- Audio effects everywhere
- Multiple themes
- Retro horror game vibes






One prompt later:

"Create comprehensive specs for this project using spec-driven development."

5 minutes. THREE complete files:


📄 requirements.md - 12 requirements, 60+ EARS-compliant acceptance criteria


📄 design.md - Complete architecture, 13 correctness properties, testing strategy


📄 tasks.md - 15 major tasks, 50+ executable subtasks


This wasn't documentation. This was a complete blueprint for building the entire application.


What would have taken me a couple hrs of planning took less than 10 mins.

Moment #2: Click-to-Execute Tasks

Here's where my mind exploded.


In the tasks.md file, I could click on each task to execute it:





- [ ] 2. Implement image upload and validation
- [ ] 2.1 Create UploadZone component
- [ ] 2.2 Implement file validation
- [ ] 2.3 Write property test for file size






Click task 2.1 → Kiro generates complete UploadZone component with drag-and-drop


Click task 2.2 → Kiro implements validation logic with error handling


Click task 2.3 → Kiro writes property-based test with fast-check


Each task built on the previous one. Zero context loss. No "what was I doing again?" moments.


This could be the future of software development.



� My journey: Hour by Hour

Hour 0: The Messy Beginning (40 mins)

I opened a document and brain-dumped everything:

• User flow: Upload → Extract → Select → Generate → View → Export
• Pages: Dramatic landing page, Generator with upload zone
• UI: Flickering candles, blood trails, screen cracks, flying bats
• Features: OCR extraction, AI lesson generation, multiple exports
• Vibes: Retro, spooky, haunting, Halloween, vampire, gothic

No structure. No implementation plan. Just ideas and vibes.

Hour 0.67: The 5-Minute Miracle

I fed my mess to Kiro:

"Create comprehensive specs for this project using spec-driven development. Generate requirements.md, design.md, and tasks.md files."

5 minutes later:


✅ 12 detailed requirements with 60+ acceptance criteria


✅ Complete system architecture with component interfaces


✅ 13 correctness properties for property-based testing


✅ 15 major tasks broken into 50+ actionable subtasks


✅ Testing strategy with fast-check integration


✅ Security considerations and error handling


I had a complete blueprint for building a production application.

Hours 1-4: Click, Click, Click (3-4 hours)

Starting with an empty folder, I systematically clicked through tasks:


✅ Task 1: Initialize Next.js (~10 min)


✅ Task 2: Upload & validation (~20 min)


✅ Task 3: Text extraction engine (~25 min)


✅ Task 4: AI integration (~30 min)


✅ Task 5: Checkpoint - tests pass ✓ (~5 min)


✅ Task 6: Scroll viewer component (~35 min)


✅ Task 7: Atmospheric effects (~40 min)


✅ Task 8: Export functionality (~20 min)


✅ Task 9: Accessibility (~15 min)


✅ Task 10: Security (~15 min)


✅ Task 11: Application flow (~30 min)


✅ Task 12: Checkpoint - tests pass ✓ (~5 min)


✅ Task 13: Polish UI (~25 min)


✅ Task 14: Deployment config (~10 min)


✅ Task 15: Final checkpoint ✓ (~5 min)


Result: Working MVP in about 4 hrs.


Every component integrated perfectly because Kiro had full context from the specs.

Hours 4-7: Vibe Coding Magic (2-3 hours)

With a working MVP, I switched to creative mode:


Audio System (1 hour):





Me: "Add multiple sound effects with contextual triggers. Act as a veteran professional designer cum dev with an expertise in retro, spooky, halloween, haunting sites & special effects."
Kiro: *generates AudioManager with heartbeat, thunder, whispers*

Me: "Make heartbeat intensify during AI processing. Add more sound effects and handle the audio system for dramatization, more haunting/spooky vibes. I want different & yet overlapping sounds for different actions on the site."
Kiro: *implements dynamic volume control*

Me: "Add vampire ambience that loops"
Kiro: *creates VampireAudio component*






Enhanced Animations (45 min):





Me: "Add crawling spiders on screen edges"
Kiro: *creates CSS keyframes with random delays*

Me: "Blood trails that fade smoothly"
Kiro: *implements trail system with cleanup*

Me: "Screen crack on every click"
Kiro: *generates crack overlay with glass-break sound*

Me: "I want the animations to be realistic, use better css. Act as a veteran designer with an expertise in these sites."






Gothic Styling (30 min):





Me: "Use authentic medieval fonts"
Kiro: *imports Cinzel, Crimson Text, Special Elite*

Me: "Text glitch effects that self-correct"
Kiro: *creates glitch-text CSS with data attributes*

Me: "Darker, more blood-red palette"
Kiro: *updates entire theme system*






Multiple Themes (45 min):





Me: "Vampire theme with blood moon and bats"
Kiro: *generates complete theme with unique effects*

Me: "Theme switching system"
Kiro: *implements useTheme hook with persistence*






The secret? Kiro had access to my complete specs. Every enhancement integrated seamlessly with the existing architecture.

Hour 7: Closing the Loop (30 minutes):

After all the enhancements, my code had evolved beyond the original specs.


So I asked Kiro:

"Analyze all files in the project and refine the specs to match the final implementation"

Kiro scanned every component, hook, and utility, then:

• ✅ Updated requirements.md with new features
• ✅ Refined design.md with actual architecture
• ✅ Adjusted tasks.md to reflect what was built

Now my specs are living documentation - they perfectly describe the production system.

Hour 7.25: Git Workflow & Production Deployment (45 minutes):

Setting Up Git (10 minutes):





git init
git add .gitignore
git commit -m "🧛♂️ Initial setup - project structure"






Committing Features Incrementally:





git add components/UploadZone.tsx components/SyllabusViewer.tsx
git commit -m "✨ Add upload and syllabus viewer components"

git add components/AncientScrollViewer.tsx
git commit -m "📜 Add ancient scroll viewer with candles"
.
.
.

git add .kiro/specs/
git commit -m "📚 Add Kiro specs (requirements, design, tasks)"

git push origin main






Deployment to Netlify (15 minutes):

1. Connected GitHub repo to Netlify
2. Configured build settings:
   • Build command: npm run build
   • Publish directory: .next
3. Added environment variables (GEMINI_API_KEY)
4. Triggered first deployment

Testing & Verification (20 minutes):


This was crucial. I tested everything:


✅ Upload Flow:

• Drag & drop works?
• File validation catches invalid files?
• Error messages display correctly?

✅ AI Processing:

• Syllabus extraction working?
• Topic selection modal appears?
• Lesson plan generation completes?
• Loading states show properly?

✅ Scroll Viewer:

• Content renders correctly?
• Page navigation works?
• Candles flicker?
• Markdown formatting preserved?

✅ Audio System:

• All 14 sound effects load?
• Contextual triggers work?
• Volume levels appropriate?
• Mute/unmute functions?

✅ Atmospheric Effects:

• Blood trails follow cursor?
• Screen cracks on click?
• Spiders crawl correctly?
• Lightning flashes sync with thunder?

✅ Theme Switching:

• Vampire theme loads all effects?
• Theme persistence works?
• Color palettes apply correctly?

✅ Export Functionality:

• Markdown export works?
• TXT export works?
• Filenames correct?

✅ Found and Fixed Issues:

• Image upload size validation needed adjustment → Fixed in validation.ts
• Theme switching caused brief flash → Added transition smoothing
• Export filename had special characters → Sanitized filenames

✅ Final Verification:

• Tested on Chrome, Firefox, Safari
• Tested on desktop
• Verified all API routes working
• Confirmed no console errors

🎨 What I Actually Built

BloodBound Academy

Upload a syllabus image, AI extracts the course structure, select a topic, get a comprehensive lesson plan displayed on an ancient scroll with flickering candles, blood trails, crawling spiders, and 14 atmospheric audio effects.

User Experience:

1. Upload a syllabus image (drag & drop)
2. AI extracts course structure with Gemini Vision
3. Select a topic from the extracted units
4. AI generates comprehensive lesson plan
5. View on ancient scroll with flickering candles
6. Export as Markdown or TXT

🧪 The Property-Based Testing Revelation

Traditional tests: "Does this specific input work?"


Property-based tests: "Does this work for ALL possible inputs?"


Using fast-check, I wrote tests that ran 100+ iterations with random inputs:





/**
* Feature: bloodbound-academy, Property 4: Chunk division completeness
* Validates: Requirements 4.1
*/
it('should preserve complete text when chunking and merging', () => {
fc.assert(
fc.property(
fc.string({ minLength: 0, maxLength: 100000 }),
fc.integer({ min: 100, max: 50000 }),
(text, chunkSize) => {
const chunks = chunkText(text, chunkSize);
const merged = mergeChunks(chunks);
expect(merged).toBe(text);
}
),
{ numRuns: 100 }
);
});






This found bugs I would NEVER have caught manually:

• Unicode surrogate pair handling
• Chunk boundary edge cases
• Overlap region special characters
• Empty string handling

8 property-based tests. 100+ iterations each. Comprehensive coverage.



📊🔢 The Numbers

Development Metrics

• 5 minutes: Specs generation (would take 3-4 hours manually)
• 3-4 hours: MVP from empty folder (would take 2-3 days)
• 7 hours total: Idea to production (would take 2-3 weeks)

Implementation Stats

• 15 major tasks with 50+ subtasks executed systematically
• 12 requirements with 60+ acceptance criteria
• 13 correctness properties defined and tested
• 8 property-based tests with 100+ iterations each
• 14 audio effects perfectly synchronized
• 20+ CSS animations for atmospheric effects
• 100% spec coverage - every requirement implemented

Code Quality

• Full TS type safety
• Property-based testing
• No persistent data storage (privacy-first)
• Retry logic with exponential backoff
• CORS and security headers
• Accessible (WCAG AA compliant)

🎯 Why This Workflow Changes Everything

Before Kiro

Day 1: Plan architecture (3-4 hrs)


Day 2: Set up project, start coding (6-8 hrs)


Day 3: Build core features (8 hrs)


Day 4: Add UI polish (8 hrs)


Day 5: Testing and bug fixes (3-4 hrs)


Day 6: Deployment and docs (2-3 hrs)


Total: 30-35 hours over 4-5 days


Constant context switching. Forgetting edge cases. Refactoring nightmares. Documentation as an afterthought.

With Kiro

Hour 0-1: Brain dump + Specs generation


Hour 1-4: Click through tasks → MVP


Hour 4-7: Vibe code enhancements


Hour 7-8: Refine specs + Deploy


Total: 7-8 hrs in one day


Crystal clear roadmap. Systematic progress. Comprehensive testing. Living documentation.


That's 4-5x faster. And better quality.



🏆 The Three Superpowers

1. Specs Generation (5 mins)










Transform messy ideas into:

• Structured requirements (EARS-compliant)
• Complete architecture (components, APIs, data models)
• Correctness properties (property-based testing)
• Executable task list (50+ subtasks)

Saves hours of planning. Prevents implementation mistakes.

2. Click-to-Execute Tasks

The tasks.md file is an interactive implementation guide:

• Click a task → Kiro executes with full context
• No copy-pasting
• No context loss
• No "what was I building?"

This is revolutionary.

3. Living Documentation







After vibe coding, refine specs to match reality:

• Analyze all files
• Update requirements
• Refine design
• Adjust tasks

Perfect documentation that matches production code.



💡 Key Insights

Insight #1: Specs First, Code Second

Starting with specs means:

• ✅ Clear requirements before writing code
• ✅ Defined correctness properties
• ✅ Systematic implementation plan
• ✅ Comprehensive test coverage
• ✅ Living documentation

You know exactly what to build before you build it.

Insight #2: Vibe Coding + Specs = Magic

The combination is powerful:

• Specs provide structure and correctness
• Vibe coding provides creative freedom
• Specs refinement closes the loop

Fast development without sacrificing quality.

Insight #3: Property-Based Testing is Essential

Testing with random inputs finds bugs you'd never imagine:

• Edge cases
• Boundary conditions
• Unicode handling
• Empty states

8 tests with 100+ iterations each = comprehensive coverage.



🎃 The Costume Contest Angle

Haunting User Interface ✓

• Blood moon with pulsing glow
• Interactive blood trails
• Screen crack effects with sound
• Crawling spiders on edges
• Flying vampire bats
• Lightning flashes with thunder
• Flickering candles
• Gothic typography

Immersive Audio ✓

14 contextual sound effects:

• Vampire ambience (looping)
• Heartbeat during processing
• Thunder with lightning
• Glass break on clicks
• Door creaks on navigation
• Random whispers, footsteps, drips

Polished Design ✓

• Multiple themes (Gothic, Vampire)
• Smooth animations (20+ CSS keyframes)
• Ancient scroll viewer
• Ornamental decorations
• Text glitch effects
• Bleeding text animations

Every detail crafted for the best possible haunting, spooky, retro themed user experience.

🤖⚡ The Bottom Line

I built a production-ready application in 7 hours.


Not a prototype. Not a demo. A fully functional, deployed, tested application with:

• Comprehensive requirements
• Solid architecture
• Property-based testing
• Living documentation
• Production deployment

This is the future of software development.


The workflow:





Brain Dump (40 min)
↓
Kiro Specs (5 min) ← GAME CHANGER
↓
Click Tasks (3-4 hrs) ← REVOLUTIONARY
↓
Vibe Code (2-3 hrs) ← CREATIVE FREEDOM
↓
Refine Specs (30 min) ← LIVING DOCS
↓
Deploy (15 min)
↓
Production! (7 hrs total)







🎮 Experience the Dark Magic Yourself

🔗 Live Demo: bloodbound-academy.netlify.app


📱 Source Code:





Divya4879
/
SpecterScript


A haunted PDF-to-lesson-plan generator for the Kiroween hackathon's Costume Contest category.






🧛♂️ BloodBound Academy








Transform your ordinary image coursework into magical study aids with immersive vampire-themed UI and spine-chilling interactive effects.

Check it out here:- https://bloodbound-academy.netlify.app




🎃 Overview


BloodBound Academy is a Halloween-themed web application built for the Kiroween Hackathon (Costume Contest category) that combines educational technology with horror aesthetics. Upload image files of syllabi or course materials, and watch as OCR extracts the text while AI transforms it into comprehensive lesson plans surrounded by atmospheric vampire effects, interactive blood trails, and haunting audio.


🏆 Hackathon Category: Costume Contest

• Haunting User Interface: Polished vampire theme with dripping blood effects, crawling spiders, and atmospheric elements
• Interactive Horror Effects: Blood cursor trails, screen cracks, lightning flashes, and phantom notifications
• Immersive Audio: 14 layered horror sound effects including vampire ambience, heartbeats, and thunder
• Functional Application: Real Image Content Extraction with AI-powered study guides generation

✨ Features




🧛♂️ Vampire Theme Interface

…





View on GitHub





🎥 Project Video Demo:




📸 Glimpses from the Shadows

Where cursed documents meet AI magic




















🧛♂️ Dare to Enter?

Upload a syllabus image. Select a topic. Watch as ancient AI spirits summon comprehensive lesson plans from the very essence

of darkness.


But beware...

Don't blame me if you hear whispers echoing through your study sessions... or if shadows seem to move in your peripheral vision... or if you catch yourself humming haunting melodies that weren't there before... or if you feel an inexplicable presence watching over your shoulder, even in an empty room...


Some knowledge comes with a price. Are you willing to pay it?👻🌙

Ready to summon your study materials from the abyss? The blood moon awaits your courage... 🩸

More...