The four tools you will use throughout the interactive cohort. Learn these well.
Claude
Research, Code, Documents
Claude by Anthropic is the AI assistant integrated into every phase of the interactive process. It handles experience strategy synthesis, content structure analysis, discovery research, documentation, and code generation. You direct it with precision. Vague prompts produce vague output.
Core Uses
Experience strategy, information architecture, content review, documentation, strategic research, website build (via Claude Code)
Claude Plugins for Interactive
interactive-discovery
Analyzes client discovery inputs and generates research synthesis for experience strategy development.
interactive-experience-strategy
Generates the experience strategy document: user flows, content hierarchy, interaction principles, and information architecture.
interactive-wireframing
Produces wireframe specifications and content structures that bridge strategy to visual design in Figma.
interactive-visual-design
Supports visual design decisions with design system documentation, component specifications, and responsive guidelines.
Claude Code is Anthropic's AI coding tool. It writes HTML, CSS, JavaScript, and front-end framework code based on the Figma design you describe to it. You are not learning to be a software engineer. You are learning to direct a development tool with precision. Describe what you want, review the output against your Figma, and direct revisions until the built site matches the design.
Figma
The Design Surface
Figma is where every interactive deliverable gets designed before a single line of code is written. Full-fidelity mockups with real content, real type sizes, real spacing, and real interaction states. Every layout, typography decision, color application, and responsive breakpoint is resolved in Figma first. If it is not in the Figma file, it is not in the site.
Used For
Wireframes, full-fidelity mockups, responsive design, interaction states, design system documentation
Vercel
The Deployment Platform
Vercel handles deployment from a Git repository to a live URL. Every engagement ends with a site deployed to Vercel at a clean URL the client can share. It handles HTTPS, responsive hosting, preview deployments, and continuous deployment automatically. Push code to GitHub, Vercel builds and deploys.
Used For
Production deployment, staging URLs, continuous deployment, preview builds
GitHub
Version Control and Project Storage
GitHub stores your project code, tracks every change, and syncs with Vercel for continuous deployment. Every engagement gets its own repository. Claude Code works directly against a GitHub repo, which means your build history is captured automatically.
Used For
Version control, project storage, continuous deployment integration, code review