Prototyping Websites Using LLMs
I recently had an idea for a website I wanted to build.
The website would help Electric Vehicle owners work out the best time to charge their car if they’re on a particular time-of-use tariff here in the UK.
However, I’m my own worst enemy when getting started on projects like this. I feel I spent a good chunk of time just working out how to center a <div> on the damn page which usually saps all the joy out of everything. Even with just some hand rolled HTML it’s easily a 15 minute job of bootstrapping.
So this time round I decided to skip the frustration and use Large Language Models to help me get started on my project! Heck, if it’s still frustrating, at least you can tell the model off for getting it wrong!
It started with a sketch
So I whipped up a quick sketch of what I wanted my website to look like.
On the left would be the inputs e.g. how much battery is in your car, how powerful your charger is and how much you want to charge to.
On the right would be a summary of the cheapest time to charge, with some stats about prices in a table.
Below is a summary of how I got on. I might be misremembering some bits as it was a while ago.
Asking my mate Claude
I asked Claude 3 Opus to write me the HTML for this structure.
Not the most detailed prompt, but lets see what we got.
► Expand
OK. It kind of got sidetracked about the cloudflare worker thing and the output HTML is basic. The model nonchalantly disregarded writing the CSS and it ignored the input names by just calling them Input1 and Input2 and the output side is empty.
Not the best start.
Get back to work
I asked lazy ass Claude to get off his backside and write me the damn CSS. Those <div>s are not going to center themselves.
► Expand
Which it did, and it worked!
It even decided to add fancy drop shadows which I didn’t request but flair is flair I suppose.
Adding some logic
I’m not really a web developer so I’m not up to date on the latest trends but I’ve dabbled with Vue.js in the past, but I can never remember the syntax and structures you need to get started. So I got Claude to figure that bit out.
► Expand
Great, that’s saved 1-2 minutes of googling around, thanks Claude, have a cracker (although interesting to see that it’s reverted to not rendering the CSS again)
Tweaking
One thing I didn’t like was how the “Input” labels were sitting on top of the input boxes instead of at the side. So I asked Claude to fix that
► Expand
Assistants
If you squint hard enough, the website looks almost how I’d pictured it in the sketch at the top, at least in terms of layout.
Obviously all the detail is missing, it ignored the inputs, outputs and text I’d requested. Maybe I could have written better prompts to make it generate the whole thing. However, all the necessary pieces were in place for me to take over and start building to my liking, adding the controls and wiring up the logic.
As ever when doing web development, alignment issues creep in quickly, but Claude helped me out 😅
After prototyping for a while I ended up not using the HTML the model had generated and switched my design to use Bootstrap instead, but I don’t see that as a waste, it was a jumping off point and allowed me to prototype quicker. In hindsight I probably could have asked the model to generate me the HTML using Bootstrap.
Overall I was quite impressed with using these models as an assistant/tool for development, I regularly found myself asking the LLM for some advice on Vue.js concepts/syntax/functions I wasn’t sure about and it often provided reasonable answers, although I did often resort to Google/StackOverflow and the Vue.js docs to make sure the model wasn’t fooling around.
Oh and the website? Can be found at https://chargewiser.uk
Cheers xxxx
