DEV Community

Cover image for I Built a Haunted Spreadsheet Synthesizer with Kiro (and it screams at you) 👻
Harish Kotra (he/him)
Harish Kotra (he/him)

Posted on

I Built a Haunted Spreadsheet Synthesizer with Kiro (and it screams at you) 👻

#kiro #hackathon #react #showdev

The Quarter-Life Crisis of a Spreadsheet

We’ve all been there. Staring at rows and columns of data, thinking, "This quarterly report is soul-crushing."

For the Kiroween Hackathon, I decided to take that feeling literally.

I built Franken-Sheet: a "Sonification Chimera" that stitches together the mundane interface of a spreadsheet with the chaotic power of a generative synthesizer, all controlled by a local AI. It looks like boring office software, but it sounds like an industrial techno nightmare.

And thanks to Kiro, I built the whole thing in under 24 hours. Here is how I did it.

The Concept: "Corporate Horror"

The idea was simple but technically risky (the "Frankenstein" category):

  1. The Body: A UI that looks exactly like Google Sheets in Dark Mode.
  2. The Voice: A Tone.js engine where every cell is a sequencer step.
  3. The Brain: A local Llama 3.2 model (via Gaia Node) that analyzes the data and changes the music based on the "vibe."

If you type "Q4 REVENUE" into the grid, nothing happens. If you type "DOOM," the synth distorts. If you click "Summon," the AI changes the scale to Phrygian Dominant.

How I Used Kiro to Build Fast

I didn't just use Kiro to autocomplete code. I used it as a Technical Architect. Here is the breakdown of the workflow:

1. Vibe Coding (The Aesthetic)

The hardest part of this app was making it look boring. I needed that specific, thin-bordered, dense-grid look of a spreadsheet.

I pasted a screenshot of Google Sheets into Kiro’s Vibe Chat and said:

"Refactor the UI to look EXACTLY like Google Sheets in Dark Mode, but haunted. Add a CRT scanline effect."

Kiro didn't just give me generic CSS. It scaffolded a complex HTML table structure with input mapping, applied a "Cyber-Morgue" color palette (#1f1f1f background, #00ff00 borders), and even suggested replacing the standard "Sum (Σ)" icon with a "Summon" button.

2. Spec-Driven Development (The Logic)

This is where Kiro really shined. I needed to map an 8x8 grid to musical frequencies. If you try to do this via Chat, LLMs often get confused about zero-indexing or state updates.

Instead, I wrote a Spec file (.kiro/specs/audio_logic.md):

# Audio Logic Specification
1. Mapping Strategy:
   - Rows 0-7 correspond to the C Harmonic Minor Scale.
   - Columns correspond to sequencer time steps.
2. Data Interpretation:
   - Numbers (0-1) = Velocity.
   - Strings ("DIE", "RUN") = Distortion Effect.
Enter fullscreen mode Exit fullscreen mode

I told Kiro to implement this Spec. It wrote the useSynth.js hook perfectly on the first try. No hallucinations, no logic errors. The sequencer worked instantly.

3. Steering the Ship (The Architecture)

To keep the app lightweight, I used Steering Docs to set strict constraints. I defined a "Senior Engineer" persona with a negative constraint: NO REDUX.

Kiro respected this strictly, implementing a clean Zustand store for the grid state. This saved me hours of boilerplate management and kept the app performant enough to handle real-time audio visualization.

4. The Spooky Linter (Agent Hooks)

For the final polish, I wanted to ensure the code repository itself felt "haunted." I set up a Post-Write Hook in Kiro.

The hook scans my code when I save. If it finds a generic comment like // initializing audio, it suggests a patch to rewrite it to // summoning the audio demon. It’s a small detail, but it made working on the project genuinely fun.

The "Frankenstein" Moment

The craziest part of the build was connecting the web app to my local AI. I ran a Gaia Node with Llama 3.2 on my machine.

Usually, connecting a React app to a local binary runs into CORS hell. I asked Kiro to handle the proxy configuration in vite.config.js. It set up the forwarding immediately, allowing my "Haunted Spreadsheet" to talk to the "Brain" locally without leaking data to the cloud.

Conclusion

Franken-Sheet is a silly, scary project, but it proved a serious point: Spec-Driven AI development is the future.

By separating the Vibe (UI) from the Spec (Logic), I was able to build a complex, creative application in a single day.

If you want to see the code (or summon the ghost yourself), check out the repo below. And remember: be careful what you paste into your spreadsheet. 👻

Link to GitHub Repo

Top comments (0)