Choosing your stack

Plain HTML + CSS

The simplest starting point. No dependencies, no install commands. You create an index.html file, open it in a browser, and see the result.

Good for: quick prototypes, static pages, Claude artifacts, landing pages with no business logic.

React

React is a JavaScript library for building interfaces out of reusable components. A component is a self-contained UI block: a button, a card, a modal.

Good for: interfaces with many reusable components, dynamic applications, prototypes with states and interactions.

Next.js

Next.js is a framework built on top of React. It adds page routing, deployment management, and performance optimizations.

npx create-next-app@latest project-name
cd project-name
npm run dev

Tailwind CSS

Tailwind is not a component framework but a utility class system. Instead of writing CSS in a separate file, you apply classes directly in the HTML: bg-white, text-xl, p-6, rounded-lg.

Advantage for designers: the classes map directly to design system values (spacing scale, type scale, color palette).

Shadcn/ui

Shadcn/ui is a collection of ready-to-use UI components: buttons, modals, forms, menus, tables. Built on top of Radix UI and styled with Tailwind CSS.

npx shadcn-ui@latest add button

Framer Motion

An animation library for React. Transitions, enter/exit animations, micro-interactions directly inside components.

Astro

A content-oriented framework designed for static sites and portfolios. Generates very fast pages by keeping JavaScript to a minimum.

For exploring and prototyping quickly:
HTML + CSS + Tailwind (via CDN, no installation required)

For most design projects:
Next.js + Tailwind CSS + Shadcn/ui

This combination covers the widest range of use cases. Next.js handles routing and deployment, Tailwind replaces stylesheets, and Shadcn/ui provides ready-to-use components.

For prototypes with animations:
Next.js + Tailwind + Framer Motion

For a portfolio or static site:
Astro + Tailwind

At the start of a session, give Claude Code the project context. Two ways to do it:

In your first message:

This project uses Next.js 14, Tailwind CSS, and Shadcn/ui.
Existing Shadcn components are in /components/ui.
Use the color tokens defined in tailwind.config.js.
Don't create a new component if an existing Shadcn component can do the job.

In a CLAUDE.md file at the root of the project (see chapter 7): Claude reads this file at the start of every session. The instructions apply automatically without having to repeat them.