Welcome & Workshop Overview
Relevant source files
The following files were used as context for generating this wiki page:
The Vibe Coding with Claude workshop is a 2-hour session designed to introduce users to rapid software development using natural language processing. The environment is entirely browser-based, utilizing GitHub Codespaces to provide a pre-configured workspace where participants can build web applications by describing them to Claude.
The primary objective is to engage in an iterative loop of describing, viewing, and refining software. Participants start with a boilerplate environment and use specific prompts to generate functional web tools such as calculators, trackers, and study apps, which replace the initial landing page as they are developed.
Sources: README.md:3-5, index.html:18-24
Workspace Architecture & Configuration
The workshop environment relies on a cloud-based development container (DevContainer) to ensure a zero-install experience for participants. This environment is pre-loaded with necessary tooling to interface with the Claude API.
Environment Setup
The workspace is initialized via GitHub Codespaces, which builds a container based on the repository's configuration. The .devcontainer/ directory contains logic to pre-install Claude tooling and route requests through a spend-capped class proxy.
Sources: README.md:9-11, README.md:46-48
Key Components
| Component | Description |
|---|---|
| GitHub Codespaces | The hosting platform providing the browser-based IDE. |
| Claude CLI | The command-line interface used to communicate with the AI model. |
| Anthropic API Key | A temporary session key used to authenticate requests. |
| Live Preview | An automatic side tab that renders index.html updates in real-time. |
Sources: README.md:14-25, README.md:35-40
Development Workflow
The "Vibe Coding" workflow is centered on an iterative feedback loop. Users interact with the system primarily through the terminal and a live preview pane.
The Iteration Loop
The core methodology follows a three-step cycle:
- Describe: Input plain English requirements into the Claude terminal.
- Look: Observe the automatically generated or updated
index.htmlin the preview. - Refine: Request specific changes, additions, or fixes based on the observed output.
Sources: README.md:29-31, index.html:20-22
Essential Commands
Participants interact with the workspace using a limited set of terminal commands:
| Command | Purpose |
|---|---|
export ANTHROPIC_API_KEY=... | Sets the session-level environment variable for authentication. |
claude | Launches the interactive AI coding assistant. |
serve . | Manually starts the local web server for the preview (if not automatic). |
Ctrl + C | Terminates active processes in the terminal. |
Sources: README.md:35-40
Project Starters and Iteration Examples
The project provides a catalog of "Starter" prompts in PROMPTS.md to guide the creation of various application types.
Application Categories
| Category | Description | Key Features |
|---|---|---|
| Personal Page | A modern link hub/bio site. | Buttons, Bio, Social Links. |
| Calculators | Functional tools for conversion or math. | Inputs, Logic, Real-time updates. |
| Trackers | Habit or workout logs. | Browser storage (LocalStorage), Delete logic. |
| Study Tools | Interactive flashcards or quizzes. | Flip animations, Shuffle, State tracking. |
| Fun/Real | Event countdowns or games. | Timers, Confetti, Theme pickers. |
Sources: PROMPTS.md:5-55
Prompting Techniques
Effective interaction with the AI involves specific "moves" to guide the software's evolution:
- Add: For introducing new features or behaviors.
- Change: For modifying aesthetics, layout, or wording.
- Fix: For addressing bugs or unintended behaviors.
- Explain: For learning about the generated code.
- Polish: For enhancing mobile responsiveness or professional appearance.
Sources: PROMPTS.md:58-63
Summary
The Vibe Coding workshop streamlines the development process by abstracting environment configuration through Codespaces and code generation through the Claude CLI. By focusing on the Describe → Look → Refine loop, participants can transition from a basic landing page to complex, stateful web applications within a 2-hour timeframe.
Sources: README.md:42-44, index.html:23-24