$ day-2 --am · guided walkthrough
Walkthrough: Agentic Code with Claude Code for Web
The capstone of Day 1, picked up to open Day 2—and this time we work through it together as a group. The Day 1 PM demos walked from a prompt-built Artifact to an AI-powered app to a deployed GitHub Pages site; now, step by step, we use Claude Code for Web to plan, build, and deploy an ambitious public-facing website, watching where the agent helps and where it needs our direction. Follow along on your own repository as we go.
$ exercise --setup [+][-]
Create a new public GitHub repository. Then open Claude Code for Web at code.claude.ai, select your repository, and type /init to initialize the project structure.
$ exercise --plan [+][-]
Put the agent into plan mode before it writes any code:
Enter plan mode. Do not exit plan mode until I confirm the plan is ready. Ask clarifying questions until you understand the plan.
Describe your vision—an educational site, a portfolio, a humanities project—and let the agent ask clarifying questions. Only approve the plan once it genuinely reflects what you want.
$ exercise --build [+][-]
Work iteratively with Claude Code to develop the site. Choose the technologies that fit your idea—D3.js, p5.js, or others—while keeping everything compatible with GitHub Pages by staying with native web technologies (HTML, CSS, JavaScript).
$ exercise --images [+][-]
Upload images directly to your GitHub repository, then ask Claude Code to integrate them. For example:
I’ve uploaded an image called [filename]. Please incorporate it into the homepage with appropriate styling.
$ exercise --deploy [+][-]
Enable GitHub Pages through the repository’s Settings, deploy the site, and test it at:
https://[username].github.io/[repository-name]
$ exercise --reflect [+][-]
Share your deployed site and reflect on the agentic process:
- Your sense of control—where did you steer, and where did the agent run ahead?
- Points of frustration—what did the agent get wrong, and how did you recover?
- Future applicability—where would this approach help your own prototyping or project management?
- Human–computer collaboration—what shifted in your role as you moved from writing code to directing an agent?
$ source — adapted from Week Twelve: Agentic Code, Humanities & AI. $ cd .. — back to the course packet