Máster UX/UI · Preparación

Preparemos tu Mac para construir.

Antes de la primera sesión dejaremos el entorno listo. Primero instalamos las herramientas; después conectamos tu proyecto con GitHub para guardarlo en la nube. De arriba abajo: copia, pega y sigue el camino.

~20 min en total Para macOS No hace falta saber programar

01 — Preparar el Mac

Las herramientas base

Siete pasos para instalar todo lo que Claude Code necesita. Solo se hace una vez.

Instala Claude Code Desktop

Qué es: la aplicación donde trabajarás. Es Claude, pero metido dentro de tus archivos: lee tu proyecto, escribe código, lo ejecuta y corrige errores. Por qué: es el centro de todo lo que haremos; todo visual, sin pelearte con la terminal.

Descargar para macOS

Universal (Intel y Apple Silicon). Ábrela, inicia sesión y entra en la pestaña Code.

Abre el Terminal

Qué es: la app del Mac donde se escriben comandos. Por qué: los pasos siguientes instalan herramientas que no tienen botón; se ponen con una línea de texto. Lo usarás solo un momento.

Pulsa ⌘ + Espacio, escribe Terminal y dale a Enter. Se abre una ventana con texto: ahí van los comandos de abajo.

Instala las Command Line Tools de Xcode

Qué es: un paquete base de Apple con utilidades de desarrollo (entre ellas git, el historial de versiones). Por qué: muchas herramientas dan por hecho que ya están; es el cimiento sobre el que se instala el resto.

Terminal

$ xcode-select --install

Se abrirá una ventana de Apple pidiendo confirmación. Acepta y espera a que termine (puede tardar unos minutos).

Instala Homebrew

Qué es: el “gestor de paquetes” de macOS, una especie de App Store para herramientas de desarrollo, desde el Terminal. Por qué: nos deja instalar lo que falta con un comando, sin buscar webs ni instaladores.

Terminal

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Al terminar, deja Homebrew listo para siempre (lo recuerda cada vez que abras el Terminal):

Terminal

$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
$ eval "$(/opt/homebrew/bin/brew shellenv)"

La primera línea apunta Homebrew en la memoria de tu Terminal; la segunda lo activa ahora mismo. Sin esto, al reabrir la ventana el Mac diría “command not found: brew”.

Instala Git con Homebrew

Qué es: el sistema de control de versiones: guarda el historial de tu proyecto y te deja volver atrás. Por qué: es como el historial de Figma pero para código; Claude Code lo usa para seguir los cambios y no perder trabajo.

Terminal

$ brew install git

Instala Node.js con Homebrew

Qué es: el motor que ejecuta JavaScript fuera del navegador, y trae npm para arrancar proyectos. Por qué: tu landing y la mayoría de prototipos web corren sobre Node; es lo que hace funcionar el npm run dev.

Terminal

$ brew install node

Instala GitHub CLI

Qué es: la herramienta oficial de GitHub para el Terminal (se llama gh). Por qué: gestiona el inicio de sesión con GitHub de forma sencilla —sin claves SSH ni configuraciones raras— para que Claude pueda subir tu trabajo a la nube. La usarás en la sección 02.

Terminal

$ brew install gh

02 — Subir a GitHub

Guarda tu trabajo en la nube

GitHub es la copia de seguridad de tu proyecto y su historial completo, accesible desde cualquier sitio. Conectarlo una vez y Claude se encargará del resto.

Crea tu cuenta en GitHub

Qué es: GitHub es la web donde viven los repositorios (los proyectos). Por qué: es donde quedará guardada la copia en la nube de tu trabajo. La cuenta gratuita basta.

Crear cuenta en GitHub

Crea un repositorio nuevo

Qué es: un repositorio (“repo”) es la carpeta de tu proyecto en GitHub. Por qué: es el destino donde se subirá tu trabajo. Cada proyecto tiene el suyo.

Ya dentro de tu cuenta, pulsa el botón verde New (arriba a la izquierda) o ve directamente a github.com/new.

Botón New para crear un repositorio — El botón **New**, junto a la lista de repositorios.

Ponle nombre y hazlo privado

Qué es: el formulario de creación del repo. Por qué: aquí decides cómo se llama y quién puede verlo.

Escribe un nombre, marca Private (a menos que quieras que sea público) y pulsa Create repository. No marques ninguna otra casilla.

Formulario de creación del repositorio con la opción Private marcada — Nombre, **Private** seleccionado, y abajo **Create repository**.

Conéctate a GitHub desde tu Mac

Qué es: un único inicio de sesión para que tu Mac pueda subir cosas a GitHub. Por qué: sin esto, GitHub no sabe que eres tú. Tranquila: no hacen falta claves SSH ni nada técnico —gh lo gestiona abriendo el navegador.

Terminal

$ gh auth login

Te hará unas preguntas en el Terminal. Responde con las flechas y Enter:

GitHub.com
Protocolo: HTTPS
¿Autenticar Git con tus credenciales? Yes
Cómo iniciar sesión: Login with a web browser

Verás un código de un solo uso: cópialo, pulsa Enter para abrir el navegador, pégalo y autoriza. Listo, no hay que repetirlo.

Página de GitHub para introducir el código de un solo uso — Pega el código que aparece en el Terminal y pulsa **Authorize**.

Dale el repositorio a Claude

Qué es: conectar tu proyecto local con el repo de GitHub. Por qué: GitHub te enseña una lista de comandos tras crear el repo, pero no hace falta seguirla a mano. Deja que Claude lo haga.

Copia la URL de tu repo (la verás en la página, termina en .git) y pásasela a Claude en la pestaña Code:

Pídeselo a Claude

“Conecta este proyecto con mi repositorio de GitHub https://github.com/tu-usuario/tu-repo.git y haz el primer push.”

Cambia tu-usuario/tu-repo por los tuyos. Claude ejecutará los comandos por ti.

Pantalla de GitHub con las instrucciones del repositorio recién creado — La URL del repo está arriba; copia la que termina en **.git**.

Pide a Claude que lo recuerde

Qué es: el CLAUDE.md es la libreta de instrucciones de tu proyecto; Claude la lee siempre. Por qué: si le pides que guarde ahí la norma de subir cambios, lo hará solo después de cada edición, sin que tengas que recordarlo.

Pídeselo a Claude

“Actualiza el CLAUDE.md para que hagas commit y push de los cambios al repositorio después de cada modificación.”

A partir de aquí, cada cambio queda guardado en GitHub automáticamente. Tu trabajo siempre tendrá copia de seguridad.

Listo. Ya puedes construir.

Entorno preparado y proyecto en la nube. Nos vemos en clase para pasar de Figma a una web.