The four tools you will use all the way through. Get comfortable with them.
Claude
Research, Documents, Code
Claude is the AI assistant you will use in 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, research, and building the site
Claude Skills for Interactive
ac-web-discovery
Turns the client's completed intake into a Web Discovery summary: what success looks like, who the site is for, and what content it needs.
ac-web-strategy
Writes the Website Strategy. This is the gate: it sets the measurable goal, the audiences, and a first cut at the site structure. It needs an approved Brand Strategy underneath it.
ac-web-design-brief
Bridges the approved strategy and sitemap into direction you can design from.
ac-web-sitemap
Maps every page of the site and what goes on it, section by section, with a diagram of the structure.
ac-web-content-collection
Works out what content already exists and asks the client only for the genuine gaps, page by page.
ac-web-copywriting
Writes the final page copy, delivered as one document with a section per page.
ac-web-design-review
Walks the client through your Figma designs asynchronously, with a recorded walkthrough.
ac-web-build
Builds the real site in Next.js with you, then deploys it to Vercel through GitHub.
ac-web-qa
Runs the QA checklist against your Figma and takes you through the launch.
Building the site with Claude
Claude also writes the code for your site: HTML, CSS, JavaScript, and the framework work. It builds from the Figma design you describe to it. You are not learning to be a software engineer. You are learning to direct the work with precision. Describe what you want, check the result against your Figma, and keep directing 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 takes the code from GitHub and puts it on the internet. 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 code and keeps a record of every change. It connects to Vercel, so pushing a change publishes it. Every engagement gets its own repository. Claude 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