This week’s Works on My Machine demo video walks through the idea of vibe coding where I explore a way to utilize some of the magical concepts from it and combine them with a more traditional product process. Basically using “vibes” to kickstart a project, and then bringing in a bit more structure.
What It Does
In this demo, we walk through the process of “Vibe Coding” to create a prototype for a Community CRM app to help me with the work we’re doing with Artificial Ruby.
The workflow does like this:
Design Doc with Grok: I started by giving Grok 3 Thinking a prompt outlining the features I wanted for a simple Community CRM and had Grok generate a basic design document in Markdown format.
Prototype with Bolt.new: I then took that design document and pasted it into Bolt.new, an AI application building tool. I asked bolt to treat this like a prototype and use placeholder data.
Have Bolt generate Cucumber feature files: Once the prototype was in a good place, I had Bolt generate Cucumber feature files that outline all the pieces of functionality for the prototype.
Generate user stories in Asana: I then created a script to take those feature files and have Gemini generate titles, descriptions, and acceptance criteria to create user stories in Asana.
Why It Matters
These AI app building tools aren’t perfect yet. They can’t build everything, and definitely not always in the way you want (like in Rails…). But it’s a mistake to completely dismiss them. There are aspects of them that are absolutely magical.
For example, I’d probably be able to hack my way through putting a similar prototype together in Figma, but it wouldn’t be nearly as high-fidelity and would still have taken me at least a full day if not more. The most time I spent on this prototype was thinking through what features I wanted it to design, and after that we’re talking minutes to getting something I can interact with and share with my team. That’s huge.
But there’s also a higher-level concept at play here that I find really interesting: AI is great at converting between different representations of concepts. In this demo, think of the initial prompt, the design doc, the prototype, the cucumber features, and the user stories as all being different ways of representing the same core idea: this Community CRM app. Or, if you want to get a little more formal:f(prompt) → design doc
f(design doc) → prototype
f(prototype) → cucumber features
f(cucumber features) → user stories
I’ve found this “representation conversion” technique super powerful when working with LLMs. If you can figure out a representation that makes it easy for AI to generate something useful, all you need to do is find a way to turn your idea into that representation and you’re off to the races.
How To Get It
The code from the demo is available at sublayerapp/cukes_to_stories with the Sublayer Generator to generate the list of stories from the feature file at cukes_to_stories/generators/story_generator_from_feature_file.rb.
My fork of the vibe_coding guide can be found at swerner/vibe_coding
In the video I also used:
Definitely check them out!
If this experiment sparked any thoughts or questions or you think I should delve a little deeper, definitely reach out or leave a comment below!
Share this post