When I started building Ghostly Tales, a minimal, atmospheric ghost-story generator with a cinematic horror UI, I expected the biggest challenge to be the visuals. Horror is all about vibe, pacing, and subtle cues — and bringing that into code usually means hours of tweaking borders, animations, lighting, and interactions.
This time, though, everything changed.
I had Kiro.
And for the first time, I felt like I wasn’t coding alone — I was coding with a creative partner.
The Shift: From Writing Code → Describing Feelings
What surprised me most was how natural it felt to collaborate with Kiro.
I didn’t have to explain implementation details. I didn’t have to plan out the CSS or animation layers.
Instead, I described intentions:
- “Make the border feel alive.”
- “Give this component a haunted glow.”
- “I want this UI to feel like it’s breathing.”
- “Make the storytelling container cinematic and quiet.”
Kiro didn’t just understand the words — it understood the tone.
It generated structured, meaningful code that matched the emotional aesthetic I had in my head.
This wasn’t prompt engineering.
This was vibe coding.
And it changed everything.
Building Ghostly Tales With Kiro
Ghostly Tales is a tiny project built in a single day, but it feels like something bigger because its personality shines through. A supernatural typing animation reveals stories one character at a time. A distorted, glowing frame makes the UI feel alive. The whole experience is eerie, minimal, and oddly beautiful.
Kiro helped me accelerate the parts that typically slow me down:
1. Complex UI Layers
The ghostly card wrapper — a component with turbulence filters, glow layers, overlays, and distortions — came together in minutes with Kiro’s help.
It handled:
- animated SVG turbulence filters
- layered masking and glows
- border distortion logic
- performance-safe structuring
This would’ve taken hours (or more) to handcraft.
2. Animation Logic
Kiro helped refine the typing animation, which reveals stories at an adjustable pace with a flickering cursor. It suggested improvements for:
- batching character updates
- preventing jank on long stories
- separating cursor timing from text rendering
The result?
An animation that feels eerily alive — with clean, maintainable code.
3. Faster UI Iteration
Every time I wanted to try a new glow intensity, radius, or turbulence amount, I didn’t have to manually adjust 20 values. I simply told Kiro:
“Make the orange glow feel warmer and more cinematic.”
And it regenerated the component with a new, balanced palette — no copy-pasting, no juggling hex codes.
Agent Hooks: Reducing the Repetitive
I also experimented with Kiro’s agent hooks to automate repetitive workflow tasks:
- UI regeneration hooks that updated component variants while retaining structural consistency
- Prompt-validation hooks to ensure story inputs were always valid
These small automations saved countless micro-decisions and kept the flow uninterrupted.
Spec-Driven Development Meets Vibe Coding
Before writing the first line of code, I created a short spec describing:
- UI hierarchy
- component boundaries
- animation states
- styling philosophy (“haunted minimalism”)
- input/output schema for the story generator
Kiro used this as a north star, ensuring consistency across every iteration and regeneration.
Spec-driven development gave the project structure.
Vibe coding gave it soul.
And together, they allowed me to build faster and more creatively than ever before.
How Kiro Changed My Development Mindset
Using Kiro didn’t just accelerate development — it changed the way I start projects.
Before Kiro:
I’d open a blank file, sketch the architecture, fight with styling, and chip away until something resembled my idea.
After Kiro:
I begin with intention. Mood. Emotion. Aesthetic.
And Kiro helps me grow that into code.
Development feels less like constructing and more like co-creating.
That’s the magic.
Looking Ahead
Ghostly Tales is just a small example, but it revealed something huge:
Kiro unlocks a style of building that blends creativity with engineering in a way traditional coding doesn’t.
I’m excited to explore:
- automated design-to-code workflows
- style-driven UI engines
- project scaffolding through vibes and specs
- agent-driven animation systems
Kiro didn’t just change my workflow.
It changed my starting point.
And once you experience that shift, you don’t want to build any other way.
Top comments (0)