Vés al contingut principal

Com munto una web d'agència amb Claude Code (el meu stack real)

7 min de lectura
Monitor en una sala fosca mostrant codi de programació

No escrius la web. La dirigeixes. Aquesta és la idea que ho canvia tot. La trampa de principiant és pensar que has de teclejar cada línia: no. Tu decideixes l'arquitectura i les regles; Claude Code escriu el codi al teu ritme. Amb la documentació ben feta, una persona produeix com un estudi petit. Aquest és l'stack exacte amb què ho faig i el mètode perquè no se't desmunti a mig camí.

Quin stack faig servir per muntar una web amb Claude Code?

Quatre peces, ni una més per començar: Next.js, Tailwind, Supabase i Vercel. És la combinació amb què estan fetes webs com les d'OpenAI o Notion, tot open source o amb pla gratuït, i encaixa perfecte amb el flux de dirigir la IA.

  • Next.js — la base. El framework de React amb què es construeix pràcticament tot el frontend seriós avui. Open source.
  • Tailwind — el disseny. Dones estil des del mateix codi, sense barallar-te amb fulls de CSS solts.
  • Supabase — les dades. PostgreSQL de veritat, amb sistema de login (Auth) ja inclòs.
  • Vercel — la publicació. Connectes GitHub i en segons la web és online.

Tu ets l'arquitecte; la IA és l'equip que escriu el codi. Aquesta és l'única jerarquia que importa.

Quant costa de veritat aquest stack?

Gairebé tot és gratis per començar, però hi ha un «gairebé» que convé dir de cara: l'eina que t'accelera, Claude Code, és de pagament des del primer dia.

| Eina | Gratis per començar | Comences a pagar quan… | | --- | --- | --- | | Next.js | Sempre. Open source. | Mai. | | Tailwind | Sempre. Open source. | Mai. | | Supabase | Pla gratis: aguanta un projecte sencer. | Molt trànsit o molta base de dades. | | Vercel | Pla hobby: perfecte per arrencar. | Ús comercial o trànsit alt. | | Claude Code | No és gratis. | Des del primer dia (compte Claude de pagament). |

L'stack no costa res per arrencar; l'acceleració sí. Honestedat per davant: per a un negoci petit els plans gratis de Supabase i Vercel sobren de llarg, però tingues-ho clar abans de prometre res.

Quin és el mètode perquè la IA no es desmunti?

Documentació primer, fase a fase. Una sessió = una fase. L'error de principiant és demanar-li tot de cop a la IA: el context s'embruta, s'inventa coses i el resultat cau. El mètode que funciona és just el contrari: divideixes el projecte en fases petites i li'n dones una per sessió.

  1. Escrius el CLAUDE.md — un document que li dóna context permanent: stack, regles i arquitectura.
  2. Claude Code el llegeix i executa — comença cada sessió llegint aquest context abans de tocar una línia.
  3. Verifiques obrint arxius — no et refiïs del resum. Obre 1 o 2 arxius clau i comprova que existeix el que diu.
  4. /clear i a la fase següent — neteges el context entre fases. Memòria fresca, millors resultats.

La regla d'or: Claude Code sol sobrevendre el que ha fet als seus resums. Tant és com de convincent soni. Obre els arxius i verifica. Confia en el codi, no en el resum.

Com ho connecto tot, pas a pas?

De terminal buida a web online, en ordre.

0. Instal·la Claude Code

# macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash

# alternativa amb npm (necessita Node 18+)
npm install -g @anthropic-ai/claude-code

Necessites un compte Claude de pagament (Pro, Max, Team…). El pla gratis no inclou Claude Code.

1. Crea el projecte i el cervell

npx create-next-app@latest la-meva-web   # tria TypeScript + Tailwind
cd la-meva-web
claude                                   # obre Claude Code
> /init                                 # genera un CLAUDE.md base; l'afines tu

2. Connecta Supabase

npm install @supabase/supabase-js
# 1) Crea un projecte a supabase.com i copia URL + anon key
# 2) A .env.local (MAI el pugis a Git):
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

3. Publica a Vercel

Puja el repo a GitHub, entra a vercel.com, importa el repo, enganxa les mateixes variables d'entorn i prem Deploy. En segons tens una URL pública.

4. Itera per fases

Hero, formularis, blog, panell d'admin… una fase per sessió, /clear entre cadascuna, verifica sempre.

Com és un CLAUDE.md que funciona?

Com més clares les regles, menys es desvia la IA. Aquest és l'esquelet que faig servir. El guardes a l'arrel del projecte: és el primer que Claude Code llegeix cada sessió.

# CLAUDE.md — Context del projecte

## Què construïm
Web professional per a [client/marca]. Qualitat d'agència.

## Stack (no canviar sense avisar)
- Next.js (App Router) + TypeScript
- Tailwind CSS
- Supabase (PostgreSQL + Auth)
- Deploy a Vercel

## Regles inviolables
- TypeScript estricte. Res de "any".
- Mobile-first. Accessible (contrast AA mínim).
- Seguretat: mai pujar .env a Git. Validar dades al servidor.
- Sense llibreries d'UI prefabricades: components propis.
- Disseny dark, net, estil Linear/Raycast.

## Com treballem
- 1 sessió = 1 fase. /clear entre fases.
- Abans de tocar codi, llegeix aquest arxiu sencer.
- En acabar, llista els arxius que has creat o canviat.

Conclusió: tres veritats sense fum

Perquè no et venguin la moto, tres coses que gairebé ningú t'explica:

  1. La IA accelera, no regala. Claude Code multiplica la teva velocitat, però és de pagament i no decideix per tu. Sense saber què vols construir, no serveix de res. El cap el poses tu.
  2. Els plans gratis tenen sostre. Supabase i Vercel són gratis per arrencar; quan creixen el trànsit, els correus o les dades, toca pagar. Per començar et sobra, però tingues-ho clar.
  3. Verifica, no et creguis. La IA sobreven la seva feina. Obre els arxius, comprova que existeix el que diu haver fet, prova la web. El «ja està llest» no és llei fins que ho veus tu.

Aquesta no és l'única manera de fer webs —hi ha mil stacks i mil camins—, però si comences, és de les més senzilles i sòlides. Ara et toca a tu.

Necessites una web o una automatització a mida? Calcula el teu pressupost orientatiu o escriu-me directament.

Calcula el teu pressupost →