Coding web pages by hand is time-consuming. I’ve tried a few AI-based coding tools like Claude.ai, Ninja AI, and Bolt. Bolt seemed to produce the best results. It’s not perfect, but it definitely can serve as a good starting point. To demonstrate, let’s see how each of these AI tools generate code for this simple section.
For each tool, I’ll upload the same screenshot of the section and provide the same prompt, namely:
Write plain HTML and Tailwind CSS code to create the uploaded screenshot exactly.
Claude.ai (using Claude 3.5 Sonnet)
Here’s the output.
Claude can’t show a preview, so I copied and pasted the code into Codepen. Here’s how it looked.
That’s actually not bad. The image is missing because it’s a placeholder image to a relative path that doesn’t exist.
Ninja AI
For the models, I chose Claude 3.5 Sonnet for the external model. Ninja AI will combine it with its own internal models. Here’s the input.
And here’s the output.
Like Claude, Ninja AI can’t show me a preview, so I copied and pasted the code into CodePen. Here’s what it showed.
Not bad, but it’s not as good as Claude even though I chose Claude as the external model. The main issue is the vertical spacing between the elements on the right.
Bolt.new
Here’s the input.
Bolt can show a visual of what the code would produce. Here’s the code output.
Note that Bold will install a Vite and a bunch of dependencies like Tailwind CSS, Autoprefixer, PostCSS, etc. Here’s the visual preview output.
Conclusion
I’ve run a bunch of other tests comparing all 3 AI tools. Bolt is better than the other tool for code generation.
Bolt.diy
The problem with all of the above AI coding tools is they can become expensive. Luckily, there’s an open-source version of Bolt called Bolt.diy. It can be used with any LLM, including the free, experimental version of Google Gemini Pro 2.0 and DeepSeek. You can install bolt.diy by following the simple instructions at https://github.com/stackblitz-labs/bolt.diy. When you run bolt.diy, it will open in a local browser.
Let’s try a couple of LLMs with bolt.diy to code the same section above.
Google Gemini Pro 2.0 Experimental
To use Google Gemini Pro 2.0 Experimental, you’ll need to get an API key. Go to OpenRouter.ai, search for the LLM, and get a free API key.
Here’s the input.
While writing the code, bolt.diy returned an error.
I clicked “Ask Bolt”, it Bolt self-corrected. Here’s the code output.
And here’s the visual preview.
This does not look good at all. Let’s try DeepSeek Coder.
DeepSeek Coder
We’ll need an API key. Go to the DeepSeek platform, sign up, and get a key.
Here’s the input in bolt.diy with DeepSeek selected.
And here’s the output.