I Tried Kiro for a Hackathon - Here’s What Happened

Elvin Ali — Mon, 01 Dec 2025 18:40:20 +0000

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!

DEV Community: Elvin Ali