Taking what I’ve learned from the previous Vibe Code project, I’ll be working with those notes to see if I get better results using fewer tokens. This project may turn out less complicated than the previous one, and there’s always the chance AI will go in a different direction than what I was intending. Also, with this project, I plan to commit to Git for each step, for those who’d like to follow along.
I did some prep work in Claude for this, outside of the main Copilot vibe project. I had Claude create the word arrays for the general, animal, and holiday categories, then had it update and check over the words for anything that could be offensive. I saw this as separate from the program itself. Unlike other posts, I’m writing this one out as I go, not just working from notes to refer to at the end. For Copilot, I used the Auto setting and the free tier.
For the first step of the main program, I spent time writing out, reading, and updating the first prompt. I wanted to document everything I wanted this program to do. I used Claude to plan it out with a write-up and by having it ask me questions. Originally, I was just going to have Claude do a grammar check and see if it had any questions, but it went ahead and planned out the project.
-- Commit: ‘Code Setup’
For the next step, I had Copilot build the app from the plan.
Prompt:
Read @Word Search Puzzle — Project Plan.md and implement the steps sequentially. Start with Step 1, write the required code, test it, and ask for confirmation or proceed to the next step once finished.Copilot will work through the plan step by step, with a break where you can test it and then decide whether to continue or have it make corrections.
After the 4th step, I had to have it fix things like diagonal selection, and changed the way found words are marked for easier reading; from a circle to a highlight. This came from the gap between how I envisioned it and how it actually looked on screen; I noticed it would be easier to change the approach than to keep trying to describe exactly what I was picturing.
We had a working copy at this point. Then, in the next step, making the grid bigger, broke the selection. At this point, Copilot had no idea how to fix it — it kept saying it was fixed, found no issues, and kept ‘confirming’ it worked, but the selecting still didn’t work. At this point, over 50% of the tokens were used. I reverted to a prompt back to the working copy.
I asked it to check if any security issues were found; none were found by Copilot.
-- Commit: ‘AI Created’
At this point, I tried other ways to fix the items that Copilot couldn’t:
Congratulations screen: The fireworks looked like colorful shapes moving around, and there were extra buttons that needed to be removed. I asked Copilot to save the SVG separately for me to view, but it decided to add two extra buttons to the congratulations screen instead.
Fix: I copied the showCongratsScreen function into Claude, which I’ve used before for animated SVG with good results, and told it I needed more realistic fireworks and to remove the other two buttons. I replaced the function in the code and played the game to confirm it worked.
Diagonal selection currently requires moving the mouse fast to get it to work, so I decided to try Claude for this as well. I gave it the script.js file, told it what I wanted, and gave it a couple of ideas. It updated the code, and it’s better than before — not perfect, but I can now get it on the first try most times, second at most, whereas before it could take three to four tries before it would register. It also ‘feels’ smoother.
-- Commit: ‘Claude Fixes’
Merged this all into one file to be included in a WordPress page, since none of the code needs to be shared with other apps.
I manually did this.
I added a sort so the word-to-find list displays in alphabetical order.
Changed ‘Independence Day’ to ‘July 4th’ so it matches the one-line button names like the others.
Had Claude check the arrays and remove any duplicates from the common words array, since it’s used in Random mode, which pulls from all the arrays — they weren’t needed there and could cause duplicate words to show up.
-- Commit: ‘Final’
Lessons Learned & Thoughts:
- When Copilot goes wrong, revert first — don’t have it try to fix the new issue. Try a different prompt instead and see if that fixes it.
- If one AI can’t figure it out, try a different AI or a different model (if available with your AI).
- For any graphics you need, don’t have Copilot try to create them.
Links:
Word Search: https://www.lynnamacher.com/word-search/
