Skip to the bottom if you want the conclusion of this project 😬
This may be a bit over-the-top, but to start my entry at World's Largest Hackathon by Bolt I'll actually build another entry to help me document my journey.
I've long been a fan of devlogs, videos or essays showing the work on a game, piece of art or software. The issue is I'm always a bit lazy to edit videos of my dev journey, so I never got around to creating them.
Instead, an idea has been circulating my mind for a while: what if dev logs were partially automated? I won't answer this question fully for now, but I'll take a stab at it with a first submission to the hackathon.
As I'm building with Bolt, I've started with a prompt:
Before putting it into Bolt, though, I want to refine the prompt. I want to see if I can make it into the One Shot bonus competition of the hackathon, meaning the app should be done in a single prompt.
To refine it, I'm chatting with Claude 4 Sonnet. Here's my prompt:
I'm building an app using Bolt.new and I need help refining my prompt. Here's my first draft. Questions to help me polish it:
1. what is missing from its requirements?
2. is this technically doable? I'm not very familiar with OPFS or ffmpeg in the browser
3. is this design sound? What would you modify in it for better ergonomics to document devlogs?
4. how can it be clearer for an AI to build this correctly according to spec?
Right off the bat, I realized the issue was deeper, so I took a step back and experimented a bit with OPFS and recording the user's screen. After some back-and-forth with Claude, I realized I'd probably have to let got of the one-shot prompt and would need some designing in Figma.
So, in the spirit of this AI-first competition, I've took the chance to experiment with Figma's AI features.
It impressed me at first, but soon I realized it was just applying whatever I said to a set of templates. It can't think like a designer and solve any UX problems. It does speed up connecting prototypes, and it did provide me with a good base for the brutalist design of the app.
After a couple hours, here's the Figma design I got to.
With this, I finished understanding the project and got to finish the prompt:
Now, I was ready to try out Bolt's Figma integration. I was excited, but it didn't last:
- Importing from Figma doesn't allow you to provide any prompts regarding the tech stack, so I was stuck with what was provided.
- Bolt requires too many permissions in my Figma account, I'm afraid they use it to further train AI, or that they may eventually expose something from one of my private files
- Bolt uses Anima to kickstart the code from Figma, which means another party has my data & creation
- You can only import one frame at a time
- And last but not least, the resulting code is hideous and super hard to maintain, full of dynamic Tailwind classes and unnecessary styles 😅
So I took a step back and tried starting from my prompt and screenshots instead. This is where I encountered the first big issue I'll have to face in this hackathon: iteration speeds aren't the greatest when you need to wait on these models to think, and on the Stackblitz container to boot and process changes.
I am impressed by Bolt's quality for the first 80%, but I predict the last 20% will take way longer than doing it in my code editor of choice. Let's see, hope to be proven wrong!
A big highlight is how Bolt handles errors: you can nudge it towards a specific direction with your knowledge, and it does decently well.
I got uneasy seeing the agent edit the project with no clear history of what changed, so I jumped into the Github integration immediately. As with the Figma integration, I'm uneasy giving Stackblitz/Bolt read+write access to all my repositories... but I'll just roll with it.
I dislike that every interaction & change is a commit in Git, but this is still better than no Git.
Bolt created an UI that was stylistically different from what I had designed in Figma, but the layout was correct.
💡 Lesson learned: As I disliked the Figma integration and Bolt doesn't reproduce screenshots perfectly, moving forward, I won't spend as much time tidying up the Figma file with proper components, colors, variables, typography and auto-layouts.
Functionally, the app was also misbehaving badly. I'll resist my typical engineer-minded approach to understand the code and refactor it manually, and will instead try to vibe-code the entire way through it.
As I'm vibe-coding, I'm realizing it gives me some brain-rot. I don't really want to read Bolt's explanations, and just want to click "Attempt fix" after "Attempt fix".
Also, when I do try to go deep into the issue, I'm faced with an IDE that has no Typescript support, no command palette, and overall convoluted design. Not great for a code-first experience.
Reality of vibe-coding hits
As I'm building this, I'm starting to give up on the hackathon. I'd love to participate, but building with Bolt doesn't seem to cut it for me.
- No file tabs, only one open at a time
- Hard to navigate
- Every keystroke is a commit in Github
- No clear diff of changes. I have to go into Github to see the commit to understand what the AI has done
- Every change requested rewrites the entire file
Honestly, it feels like I'm doing the worst part of coding, debugging, and the AI the fun part of coming up with solutions, except it produces spaghetti code that is hard to track 🥴
As this hackathon requires you to build fully with Bolt, I'm out. No way I'm finishing anything with it, I'd go crazy trying.
Ah... how I wish this was a Cursor or Windsurf hackathon instead!
Top comments (1)
Sadly i came up with the same conclusions!
Once they published the requirement for the submission to fully run on Bolt that was a deal breaker for me. Especially since my app was a mobile app that required some native modules which bolt doesnt support