We have a couple drawers in our coffee table with many wind-up toys and some puzzles. One puzzle has a wooden tray in the shape of a hexagonal array and 19 small hexagonal right prisms or tiles, each with an integer from 1 to 19 printed on them. The goal is to place the tiles in the tray such that each of 5 horizontal and 10 diagonal rows add to 38.
Given a choice, and space, I prefer hands-on material objects over web apps. But this wooden puzzle or game has a couple drawbacks: there are too many pieces to keep track of, and one has to mentally recompute the rows sums over and over. It looked like a good condidate for a web app.
Around this time, my subscription to the Claude AI app came to include the Code tab. The Chat tab of Claude can write prompts to generate code snippets to complete web pages, which are called artifacts. In contrast, in the Code tab, in addition to writing prompts you can also directly edit folders of files on your client computer in order to develop complex projects. Having the code on your client lets you make changes in the code directly by yourself, as well as involving multiple files in the project.
I decided to use Claude Code to develop a web app version of the hex game, the Magic Hex Game (opens in new tab). My work spanned three days of part-time work to get a web app that works and looks well. Most work with Code involves writing prompts, which are written descriptions of what I would like Code to do for me.
In the first day, Code quickly got the major components working. I was very impressed. It did have a problem in that some of its “rows” had kinks. I first tried to write prompts to solve this problem but found that it was more effective to go into the Javascript file myself and edit the arrays that defined the rows. I was helped by the comments which Code had written in the file that showed the tile layout in the hex array.
Another help was that Code created, without being asked, a new screen coordinate system with integer increments of the width of a tile. This made it easy for me to specify locations. Code then had a function to convert from these coordinates to screen pixel coordinates, which are useful for small adjustments but not intuitive for layout design.
Adding the row sum indicators was pretty straightforward, first asking for a circle with a field inside for a sum and an arrow whose angle could be specified. Most time was spent getting the indicators placed correctly.
Most of the last two days of development involved adjusting sizes and positions of elements. This took more of my time than having Code get the major elements on screen and the functionality working. For questions on issues related to the project, I switched to Chat mode.
In conclusion, I was very impressed with Claude Code! Having the ability to edit code by hand in Code is an advantage over developing a project in Chat where you can’t edit the code in a project directly during development but must keep writing prompts.





