Tools

JavaScript runtime that everything else needs to run. Install once and forget about it.

Mac package manager — used to install other tools like pnpm and gh.

Where your code lives in the cloud. Every push = a restore point.

Lets Claude Code push to GitHub for you instead of doing it manually.

Package manager (alternative to npm). Needed for Vercel CLI install.

Hosts your live site. Auto-deploys whenever you push to GitHub. Each branch gets a preview URL.

Julian: 'Easier than Webflow or Framer for connecting domains.' Note: env vars from .env.local must be added manually in Vercel dashboard.

Command-line tool to deploy from your terminal and manage env vars.

The AI coding agent — the main tool you'll use. Cannot be used on a free Claude account.

Julian uses Max plan ($200/mo) — says it's worth $2,000/mo of token usage. Pro plan is fine for light use; default to Sonnet, only switch to Opus if Sonnet really gets stuck.

React framework. Use it for everything — landing pages, web apps, anything browser-based.

Julian: 'Killing a mosquito with a rocket launcher for simple sites — but the rocket launcher works. Lets you pivot from website to web app without restarting.'

Terminal app Julian uses. Lets you Cmd+Click links to open them.

Design tool. Sprint uses paid plan to access Figma MCP, but the free plan still works for the manual workflow.

Julian: 'Still use Figma for logos and assets, even if I design directly in code now.'

Lets Claude Code read your Figma designs directly via URL. Massive time-saver if you have Figma Pro.

Not required — manual screenshot + asset workflow gets you the same output, just slower.

Figma plugin for the no-paid-Figma workflow. Exports all assets as a zip in one click.

OpenAI's coding agent. Drop-in alternative to Claude Code — just type 'codex' instead of 'claude'.

Julian: 'Their $20 plan has way more generous usage limits than Claude's $20 plan. Use it if Claude is down or you're hitting limits.'

Model-agnostic coding agent — you can plug in Claude, OpenAI, Kimi, or others.

Julian: 'Cool, but quality not quite as good as Claude Code or Codex in my experience.'

AI-powered code editor where you can see your code constantly.

Julian: 'Built for developers who like watching code. For me, code is noise — terminal feels cleaner.'

AI website builders aimed at beginners.

Julian: 'Cool for beginners but limiting for professional work — feels too predefined.'

Local desktop app that wraps the AI dev workflow visually — branches, GitHub status, Vercel URL all visible. Built 99% with Claude Code.

Julian builds it. Goal: keep it free forever — monetize through client features (form submissions, click-to-edit). 20-seat free plan.

Modern terminal app.

Another modern terminal. Mentioned briefly.

Microsoft's code editor. Can run Claude Code as an extension.

Julian: 'I open it maybe once a week for small things. Otherwise stick to terminal.'

Analytics + heatmaps. Replaces Google Analytics.

Julian: 'GA4 makes me want to throw my computer out the window. PostHog is beautiful.'

Google's analytics product.

Julian: 'Difficult to use. Switch to PostHog.'

Google's AI design tool. Generates UI designs from prompts.

Julian: 'Useful for getting initial design ideas to bring into Figma.'

Anthropic's AI design tool — generates multiple design variations.

Julian: 'Cool product. Step in the right direction for AI design — leans into multi-variation thinking.'

Another AI design tool mentioned.

Tool for designing in CSS visually.

Open-source icon library. Use for icons in any project.

Cheap domain TLD — perfect for portfolios and side projects.

Julian: '$2 for the first year, ~$14 after.'

Headless CMS the sprint uses. Has its own CDN, MCP integration with Claude, and inline editor.

Julian: 'Always free for portfolios and small clients. Only need paid plans for big traffic sites.'

Popular alternative headless CMS. Self-hostable.

Julian: 'Great option — research what fits your project rather than defaulting to Sanity.'

Stores images and assets that the client will edit (blog post images, etc.).

Use Sanity CDN for client-edited content. Use /public folder for static homepage images.

Database + auth backend. Use when your project needs a real database.

Julian: 'Great example of when NOT to build it yourself.'

Lets Claude Code interact with your Sanity instance directly — diagnose sync issues, edit content, etc.

Tool that creates a custom 'design skill' scoped to your project. Helps Claude design directly in code without generic AI-slop output.

Not needed for Figma-to-code workflow. Useful when designing from scratch with AI.

Framework for building desktop apps with web tech.

Used to build Ship Studio. Only relevant if you're building a desktop app.

Older framework for desktop apps.

Heavier than Tauri.

Static site framework built for marketing sites.

Julian: 'Good but Next.js is recommended — gives you the option to pivot to web app later.'

Component library — works with Webflow, also React/Next.js with adjustments.

Julian primarily uses with Webflow. Conversion to Next.js feasible.

Utility-class CSS framework. The default Claude uses when building Next.js projects.

Replaces design frameworks like Client First/Lumos/Mast (those are Webflow-specific).

Lets Claude open a browser, navigate, and take screenshots of live sites.

Useful for migrating sites — Claude can visit a URL and rebuild from what it sees.

Animation library used throughout Day 4. Powers parallax, scrubbing text fills, hover effects, sticky footer reveals.

Julian's pick. Tell Claude to use GSAP explicitly in animation prompts — otherwise it might reach for Framer Motion or CSS-only animations.

Form submission handler. Connects your contact form to email delivery without needing a backend server.

Julian's pick. One-time $25 payment, no subscription. Better bot protection than Webflow's default. Get a URL from formspark.io and tell Claude to wire it into the form.