So in today's test of AI, I thought that I would step things up. Normally, I ask GitHub Copilot to do specific tasks, changes, etc. But this time, I wanted to see how easy it might be to create a "Functional Specification" and get the AI to build it. I usually build experimentally, starting from a basic idea and adding features as I go. But using a functional specification, you need to do it the other way around. You should try to be as specific as possible when describing what you want.
I had already previously created a "countdown" page which you may have seen: Fun little countdown page - track key dates/times. But that was purely a stand-alone web thing, while I did add something to notify Node-RED when something expired, everything else was pure browser-only.
So I wrote my spec using Markdown (around 120 lines). Then firstly asked Claude Sonnet 4.5 to review the spec and suggest improvements. Which it did and I mostly incorporated them.
Then I threw the spec at Claude Opus 4.5 (which is much stronger than Sonnet but also more expensive) and asked it to build the page.
Somewhat to my surprise, it did actually build a working page in fairly short order - first try. You can see the results below. You can also see that some tweaks will be needed but the basics including all of the uibuilder comms all work just fine.
The edit dialog leaves a little to be desired. Learning for next time is that you need to be quite specific when describing UI features. But fairly easy to tidy up.
I also asked it to build test scripts and documentation which, for some reason it didn't even try to do. Odd because it will often do so without being asked - possibly because it isn't picking up my usual overarching AI instruction file.
More impressive was that I started with 35% of my allowance of chargeable models used for the month and ended with 37% used. So just 2%. Nice. Note that I pay for the basic GitHub Copilot license at around ÂŁ100 per year. That gives you access to a certain amount of otherwise charged models each month.
Next will be to write some flows in Node-RED to manage the data including the data-cache for page load.
Further enhancements should include:
- Allowing Node-RED to process the timers instead of the browser so the page doesn't have to be online all the time.
- Adding a linked timer feature that would be well suited to pill timers. E.g. first pill at 9am, then 3 more spread evenly until midnight. With smart adjustments if you take one late or early.
Anyway, a bit of fun on a lazy Sunday.
Let me know if you want to see the code and/or the spec. The code, BTW, is just shy of 1600 lines but it has lots of comments added by the AI, just as I like things. The page file is actually an HTML fragment file for use with the UIBUILDER front-end router. Easily turned into a stand-alone page though.
