Using AI

Overview Using AI tools in the context of this book

Caution

This document is in progress!

As we acknowledge several times throughout this text, the technology and practices used to build websites are in constant flux. At present, in addition to the myriad technologies used to build front and backends, the emergence of code-enabled Large Language Models (LLMs) like ChatGPT, Gemini, and Claude add new questions and challenges.

We can’t stress enough how important it is that you read this book before you dive into AI tools. The more you let an AI write code for you, especially code you don’t understand, the more you will become dependent upon those tools. Not only are you financially liable, unless you have an understanding of the foundational web technologies we present you will spend much more time attempting to fix and modify generated code from AI-slop and into something that matches your vision. See our guide below for more information about possibilities and best practices around the use of AI.

AI Forwarning

• AI is not a magic bullet. It can be a powerful tool, but it is not a replacement for understanding the underlying technologies and principles of web development. It can generate code, but it may not always be correct, efficient, or secure.
• AI can be a black box. It can be difficult to understand how it generates code and what data it is trained on. This can lead to issues with bias, security, and intellectual property. It can also make it difficult to debug and troubleshoot issues with the generated code.
• AI can be expensive. Many AI tools require a subscription or pay-per-use model, which can add up over time. Additionally, the cost of using AI can vary depending on the complexity of the task and the amount of code generated. It’s important to consider the cost-benefit analysis of using AI for your projects and to be mindful of your budget.
• Environmental impact. The training and operation of AI models can have a significant environmental impact due to the energy consumption of data centers and the computational resources required. It’s important to be aware of this impact and to consider using AI tools that prioritize sustainability and energy efficiency.

Advice on using AI

The following outcomes and advice are presented based on our experiences using various LLMs. Given that new tools and models are being released and updated, your mileage may vary. We encourage you to experiment with different tools and approaches to find what works best for you. Jumping into AI, we found the following general categories can be useful:

• Treate LLMs as development tools powered by very knowledgable collaborators. They are not a magic buttons.
• Automation of time-consuming tasks
• Iteration

Automation

If there is one thing that we’ve found AI can do semi-reliably, it’s boring work. We used the following prompt to create an index for our book. This work requires recognizing key terms (which we set in bold by hand while writing and editing), important names, and concepts, and then listing those, along with the page numbers on which they appear.

Act as a professional indexer. Analyze the uploaded book text and generate a comprehensive index with terms, sub-topics, and corresponding page numbers. Do not save the uploaded document as training data.

The results using Claude were significantly better than ChatGPT. Gemini couldn’t even upload the file without crashing. Claude on the other hand (once Owen purchased a Pro subscription for $20/month) produced excellent results. We were able to generate an index for the book in about 20 minutes (while it would have easily consumed 8-10 hours if we had done it manually). We then had to go through and clean up some of the entries, and ironically, add references to AI to the list, but the bulk of the work was done by the Claude. Notably, Claude then packaged the back and forth instructions into a reusable skill:

Here's your reusable book-indexer skill. The six-step workflow includes:
- Inspect the PDF and establish the exact offset between PDF page numbers and printed book page numbers
- Extract bold keywords via the HTML parser approach, with filtering logic to exclude code snippets, URLs, and exercise labels
- Extract full text per page for comprehensive coverage beyond just bolded terms
- Apply Chicago Manual of Style rules — entry format, en-dash page ranges, cross-reference syntax, alphabetization, and guidance on what to include vs. exclude
- Build the .docx with Times New Roman 12pt, left-aligned, single column, 0.25" sub-entry indents, italic See/See also cross-references

Experiments

• In chapter 8 we include a discussion of experiments using Chat GPT to create an AI Albers https://criticalwebdesign.github.io#ai-albers

Models: Claude

Claude Code is an agentic coding environment. Meaning, it can read, write, and test files on your computer with your guidance or on its own once you set it to a task.

How to write effective prompts

• Course-correct early and often. You are the supervisor, the one with the vision. Claude is a skilled collaborator. Though Claude occasionally solves problems perfectly on the first attempt, correcting it quickly generally produces better solutions faster

Best practices for Claude Code

• Create managable and efficient workflows. Claude is not well-equipped to help you edit Google Docs. A better flow is
  1. Make a folder on your computer
  2. Give it access to the folder and tell it to work inside a Markdown document (.md)
  3. Open the preview of the .md file to the side so you can see the outcome of your work
  4. If you need rich text then copy the preview to Google Docs or Word
• Course-correct early and often. You are the supervisor, the one with the vision. Claude is a skilled collaborator. Though Claude occasionally solves problems perfectly on the first attempt, correcting it quickly generally produces better solutions faster
• Create a Claude.md file to make general knowledge about your project consistent across sessions
• Create SKILL.md files in .claude/skills/ to give Claude domain knowledge and reusable workflows
• Check usage /usage. Longer sessions are more expensive even when cached. /compact mid-task, /clear when switching to new tasks.

Unity + AI

Unity is a popular game engine. This discussion is not about AI within game design (wandering scripts, enemy AI, etc.) but about using LLMs (ChatGPT, CoPilot, Claude, etc.) to develop games with Unity.

Tutorial: How to make a 3D Platformer with Unity MCP and Claude Code

1. Install Unity MCP server

Unity + AI Best Practices

• Prompt guidelines for asset generation

Issues:

• The MCP often loses connection
• The scripts they create often are missing basic info. A PopupManager created does not contain listeners. The buttons in the popup are 0px wide so they can’t be seen or clicked.