TL;DR: I built The Haunted Reader - an AI-powered multi-perspective text analysis tool - in 45 hours using Kiro. The combination of spec-driven development and vibe coding helped me achieve 100% task completion with zero critical bugs. Here's how.
The Challenge
For the Kiroween Hackathon, I wanted to build something ambitious: a web app that uses AI to analyze text from multiple literary perspectives. Think "What would Edgar Allan Poe say about your writing?" or "How would a 5-year-old interpret this story?"
The technical requirements were daunting:
- React frontend with complex state management
- Amazon Bedrock integration for AI text generation
- File parsing (PDF, EPUB, TXT)
- Emotional flow visualization
- AWS deployment with custom domain
- WCAG 2.1 AA accessibility compliance
In a traditional workflow, this would take weeks. I had 2 days.
Enter Kiro: A Different Approach
I'd heard about Kiro's spec-driven development, but I was skeptical. "Write specs first? That sounds slow." I was wrong.
Phase 1: Specs as Architecture (2 hours)
Instead of jumping into code, I spent 2 hours writing three spec files:
requirements.md - 7 acceptance criteria
AC-1: Users can upload TXT, PDF, or EPUB files up to 10MB
AC-2: Users can select up to 5 literary spirits simultaneously
AC-3: AI generates interpretations in < 30 seconds for 5000 words
...
design.md - 9 modules with correctness properties
CP-4.1: T_interpretation < 30s for |W| ≤ 5000
CP-8.2: Σ(emotions) = 1.0 per section
...
tasks.md - 21 implementation tasks
Task 1: Set up React + Vite project
Task 2: Implement file parser service
Task 3: Create spirit definitions...
The payoff: Kiro now understood my entire project. Every subsequent conversation had context.
Phase 2: Vibe Coding with Context (20 hours)
Here's where Kiro shined. Instead of writing boilerplate, I had natural conversations:
Me: "Create the Spectral Timeline component with emotion analysis"
Kiro: Generated a complete component with:
- Emotion scoring algorithm (6 emotions, scores sum to 1.0)
- Interactive visualization with DaisyUI
- Accessibility features (ARIA labels, keyboard nav)
- Mathematical correctness validation
The code it generated:
function calculateEmotionScores(text) {
const lowerText = text.toLowerCase();
const counts = {
fear: 0, joy: 0, tension: 0,
sadness: 0, mystery: 0, neutral: 0
};
// Keyword matching for each emotion
Object.keys(EMOTION_KEYWORDS).forEach(emotion => {
EMOTION_KEYWORDS[emotion].forEach(keyword => {
const regex = new RegExp(`\\b${keyword}`, 'gi');
const matches = lowerText.match(regex);
if (matches) counts[emotion] += matches.length;
});
});
const totalCount = Object.values(counts)
.reduce((sum, count) => sum + count, 0);
// Normalize to sum to 1.0
if (totalCount === 0) {
return { fear: 0.1, joy: 0.1, tension: 0.1,
sadness: 0.1, mystery: 0.1, neutral: 0.5 };
}
const scores = {};
Object.keys(counts).forEach(emotion => {
scores[emotion] = counts[emotion] / totalCount;
});
return scores;
}
What impressed me: Kiro didn't just generate code - it understood the mathematical constraint from my spec (emotions must sum to 1.0) and implemented it correctly.
The Most Impressive Generation
The AWS deployment configuration was the moment I became a believer.
Me: "Help me deploy to AWS with S3, CloudFront, and Cognito"
Kiro generated:
- Complete deployment script with error handling
- CloudFront distribution config
- Cognito Identity Pool setup
- IAM roles with proper permissions
- CORS configuration
- SPA routing fixes
The result: A production-ready deployment script that worked on the first try.
#!/bin/bash
# Generated by Kiro with proper error handling,
# CloudFront invalidation, and security best practices
...
Steering Documents: The Secret Weapon
I created project-context.md in .kiro/steering/:
## Code Style
- Keep components under 200 lines
- Use DaisyUI for UI components
- Follow AWS SDK best practices
## Spirit Personalities
Each spirit must have:
- Distinct voice and vocabulary
- Consistent tone across operations
- Accurate style mimicry
The impact: Every time Kiro generated code, it followed these rules automatically. No more "please use DaisyUI" in every prompt.
Agent Hooks: Automation That Actually Helps
I set up two hooks:
1. On File Save: Auto-validate syntax
trigger: file_save
action: run_diagnostics
2. Spirit Consistency Check: Verify voice consistency
trigger: manual
action: check_spirit_prompts
Result: Caught 12+ bugs before they reached production. The consistency check ensured all 10 literary spirits maintained their unique voices.
Real-World Problem Solving
Bug: Receipts Classified as "Joyful"
Me: "I uploaded a receipt and the timeline shows all joy. That's wrong."
Kiro: Analyzed the emotion algorithm, identified the issue (tie-breaking logic preferred "joy"), and suggested adding a "neutral" emotion category.
Fix applied in 5 minutes:
- Added neutral emotion with keywords (total, amount, price, receipt...)
- Updated tie-breaker to prefer neutral
- Regenerated timeline component
Before Kiro: Would have taken 30+ minutes to debug and fix.
The Results
After 45 hours:
- ✅ 21/21 tasks completed (100%)
- ✅ 69 unit tests passing
- ✅ Zero critical bugs at deployment
- ✅ WCAG 2.1 AA compliant
- ✅ Custom domain with SSL
- ✅ 9,200 lines of code
- ✅ Production-ready on AWS
Performance:
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3s
- Bundle size: 413 KB (gzipped)
Spec-Driven vs. Vibe Coding: Why Both?
Spec-driven development gave me:
- Clear architecture and task breakdown
- Mathematical correctness properties
- Progress tracking and validation
- Context for every AI conversation
Vibe coding gave me:
- Rapid iteration on UX polish
- Quick bug fixes with natural language
- Exploratory development for new features
- Flow state without context switching
The combination was powerful: Structure for the foundation, flexibility for refinement.
What I Learned
1. Specs Aren't Slow - They're Accelerators
Writing specs felt like overhead at first. But having Kiro understand my entire project from day one saved hours of explaining context in every conversation.
2. AI Understands Constraints
When I specified "emotion scores must sum to 1.0," Kiro didn't just acknowledge it - it implemented validation, error handling, and edge cases automatically.
3. Steering Documents Scale
Instead of repeating "use DaisyUI" in 50 prompts, I wrote it once in a steering doc. Kiro applied it everywhere.
4. Context Is Everything
The difference between "create a timeline component" and having Kiro know my entire spec, tech stack, and design patterns? Night and day.
The Unexpected Benefits
Accessibility by Default
Because I specified WCAG 2.1 AA compliance in my requirements, Kiro added:
- ARIA labels to every interactive element
- Keyboard navigation with skip links
- Screen reader announcements
- Color contrast validation
I didn't have to ask for these in every component. They were part of the spec.
Documentation That Writes Itself
Kiro generated:
- Comprehensive README
- API documentation
- Deployment guides
- Troubleshooting docs
All consistent with my project's voice and structure.
Code Examples: Before and After
Before Kiro (Traditional Approach)
// Me: Manually writing boilerplate
const [spirits, setSpirits] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// 50 more lines of state management...
// 100 lines of API calls...
// 200 lines of error handling...
With Kiro (Spec-Driven)
Me: "Implement the spirit selection with multi-select up to 5 spirits"
Kiro: Generated complete component with:
- State management
- Validation (max 5 selections)
- Error handling
- Accessibility
- Loading states
- DaisyUI styling
Time saved: 2 hours → 5 minutes
The Deployment Story
Challenge: AWS Configuration Hell
Anyone who's deployed to AWS knows the pain:
- S3 bucket policies
- CloudFront distributions
- CORS configuration
- SSL certificates
- SPA routing
- Cache invalidation
Solution: One Conversation
Me: "Help me deploy to AWS with custom domain"
Kiro:
- Generated deployment script
- Configured S3 + CloudFront
- Set up Cognito for Bedrock access
- Added SSL certificate instructions
- Fixed SPA routing issues
- Created invalidation script
Result: Deployed on first try. No Stack Overflow. No trial and error.
Iterative Improvements
Even after "completion," Kiro helped with polish:
Day 2 improvements:
- Added home button for reset functionality
- Fixed responsive layout on mobile
- Added file info display (name + size)
- Created professional About page
- Generated favicon and thumbnail
Each improvement: 5-10 minutes instead of 30-60 minutes.
The MCP Advantage
I used the DaisyUI MCP server to search component docs without leaving Kiro:
Me: "How do I use DaisyUI's modal component?"
Kiro: Searched DaisyUI docs, showed examples, and generated the code with proper theming.
Impact: Zero context switching. No browser tabs. No copy-paste from docs.
Lessons for Your Next Project
1. Start with Specs
Even if you're not using Kiro, writing specs first:
- Clarifies your thinking
- Prevents scope creep
- Creates a roadmap
- Enables better AI assistance
2. Use Steering Documents
Create project-wide rules once:
- Code style preferences
- Architecture patterns
- Naming conventions
- Tech stack choices
3. Embrace Vibe Coding
After specs are done, use natural language:
- "Add a loading spinner"
- "Fix the mobile layout"
- "Make this more accessible"
4. Let AI Handle Boilerplate
Don't write:
- State management boilerplate
- API error handling
- Form validation
- Accessibility attributes
Let AI generate it from your specs.
The Bottom Line
Traditional approach: 80+ hours, multiple bugs, incomplete features
With Kiro: 45 hours, 100% completion, zero critical bugs
The difference? Kiro understood my entire project from specs, maintained context across conversations, and generated code that followed my patterns automatically.
Try It Yourself
The Haunted Reader: https://www.hauntedreader.com
GitHub: https://github.com/lvnhmd/haunted-reader
Tech Stack:
- React + Vite
- Tailwind CSS + DaisyUI
- Amazon Bedrock (Claude 3)
- AWS (S3, CloudFront, Cognito)
- Built entirely with Kiro
Final Thoughts
Kiro didn't just help me code faster - it changed how I approach development. The combination of spec-driven structure and vibe coding flexibility created a workflow I didn't know was possible.
Before Kiro: "I need to build X, Y, and Z. Better start coding."
After Kiro: "Let me spec this out, then have a conversation about implementation."
The second approach is faster, cleaner, and more maintainable.
If you're building anything complex, try the spec-driven approach. Write your requirements, design, and tasks first. Then let Kiro help you build it.
You might be surprised how much faster you move when AI understands your entire project, not just the current prompt.
🤖 A Note About This Article
Fun fact: This entire blog post was written by Kiro! I gave it the context about my project and asked it to write an engaging article about the development experience. The irony isn't lost on me - I'm using AI to write about using AI to build an AI-powered app.
It's a perfect example of what I've been talking about: give Kiro the right context (my project specs, code, and experiences), and it generates exactly what you need. Even this meta-commentary was Kiro's idea! 😄
Built with 💜 for Kiroween 2025
Have questions about The Haunted Reader or using Kiro for your projects? Drop a comment below!
Top comments (0)