Franken Sheet

Inspiration

The inspiration for Franken-Sheet came from the soul-crushing boredom of corporate data entry: "What if the mundane rows and columns of a quarterly financial report were actually a summoning circle?"

I wanted to embody the "Frankenstein" category by stitching together two things that have no business existing together: the rigid, grid-based world of Spreadsheets and the chaotic, expressive world of Generative Synthesizers. I wanted to turn "Q4 Revenue Projections" into Industrial Techno.

What it does

Franken-Sheet is a "Haunted Spreadsheet" that functions as a musical sequencer. It looks exactly like a standard spreadsheet tool in dark mode, but every cell controls a synthesizer.

• The Grid: The 8x8 grid acts as a sequencer. Rows represent musical pitch (C Scale), and columns represent time.
• Data Sonification: Users can type numbers (0.1 - 1.0) to control note velocity, or type words like "DIE", "RUN", or "DROP" to trigger heavy distortion effects.
• Corporate Compatibility: You can copy actual data from Microsoft Excel or Google Sheets and paste it directly into Franken-Sheet to hear what your data sounds like.
• The Ghost in the Machine: Clicking the "Summon (Σ)" button sends the grid data to a local Llama 3.2 AI (via Gaia Node). The AI analyzes the "vibes" of the text and numbers, then procedurally generates a new BPM, musical scale, and mood for the track.

How I built it

I built this in under 24 hours by leveraging Kiro as our technical architect, not just a code generator. I used a "Spec-First" approach to ensure the disparate technologies stitched together perfectly.

1. Vibe Coding for UI: Started by pasting a screenshot of Google Sheets into Kiro and using Vibe Coding to generate the "Cyber-Morgue" aesthetic. Kiro handled the complex CSS to make HTML inputs look like a cohesive grid with scanline effects.
2. Spec-Driven Logic: For the audio engine, I didn't just chat; I wrote a /.kiro/specs/audio_logic.md file. I defined the mathematical relationship between grid coordinates and audio frequencies. Kiro read this spec and implemented the useSynth.js hook perfectly on the first try, preventing the logic errors common in LLM chat generation.
3. MCP (Model Context Protocol): I used Kiro’s filesystem access to configure a Vite Proxy, allowing our frontend to talk to a local Gaia Node (Llama 3.2) without CORS errors—effectively stitching a web app to a local binary.
4. Steering & Hooks: I used Kiro's Steering to enforce a strict "No Redux, Zustand Only" rule to keep the code lightweight. I also wrote a custom Agent Hook that acts as a "Spooky Linter," automatically refactoring generic code comments into ominous warnings.

Challenges I ran into

• The Frankenstein Stitch: Connecting a browser-based React app to a local LLM (Gaia Node) presented significant CORS and networking challenges. Solved this by having Kiro write a custom proxy configuration for Vite.
• UI Performance: Rendering 64 interactive inputs that flash in real-time caused initial lag. I had to refactor the grid state management from simple React State to a transient update model to keep the audio timing tight.
• Prompt Engineering the Music: Getting a text-based LLM to understand "music" was hard. I had to iterate on the System Prompt to ensure Llama 3.2 returned valid JSON parameters for the synthesizer instead of conversational text.

Accomplishments that I'm proud of

• The "Paste" Feature: I'm happy that I got the clipboard API working. Being able to Ctrl+V from a real Excel sheet into our app creates a magical moment of "Digital Resurrection."
• The Aesthetic: It genuinely looks like software you'd find on a computer in a haunted abandoned office. The "Summon" button replacing the "Sum" function is a favorite detail.
• Zero-Shot Audio Engine: Thanks to Kiro's Spec-driven development, the core Tone.js loop worked on the very first run without debugging.

What I learned

• Structure > Chat: I learned that for complex logic (like a sequencer loop), providing Kiro with a written Spec file is infinitely more powerful than conversational "Vibe Coding."
• Web Audio is Deep: I learned how to map string data (text) to audio parameters (distortion), effectively turning language into texture.
• Local AI is Fast: Using a local SLM (Small Language Model) like Llama 3.2 3B provided a snappy, private experience that feels much more responsive than calling out to a cloud API.

What's next for Franken-Sheet

• MIDI Export: Allowing users to export their "Spreadsheet Songs" to Ableton or Logic Pro.
• Multiplayer Ouija: A real-time collaboration mode where multiple users can edit the sheet simultaneously.
• Voice From Beyond: Using a TTS (Text-to-Speech) model to have the AI literally read the cell contents over the beat in a ghostly voice.

Built With

• gaia
• tone.js
• vite
• vuejs