5 herramientas gratis para que Claude trabaje como todo un equipo

Lo que necesita

• Claude Code, el asistente de Anthropic que trabaja en su computadora, con plan Pro o Max o con una API key de la Console (el plan gratis de claude.ai no lo incluye).
• Una carpeta para su proyecto: la de su sitio web o una nueva.
• Para las herramientas 02 y 04: Node.js 22 o más reciente, que se descarga en nodejs.org.
• Para la 03: una cuenta de n8n, o Docker si prefiere instalarlo gratis en su computadora.

Para instalar Claude Code, abra la terminal (en Mac, la app Terminal; en Windows, PowerShell) y pegue el comando de su sistema. En Mac:

curl -fsSL https://claude.ai/install.sh | bash

En Windows (PowerShell):

irm https://claude.ai/install.ps1 | iex

Cuando termine, abra una terminal nueva, entre a la carpeta de su proyecto (con cd y el nombre de la carpeta) y escriba claude. La primera vez le pide iniciar sesión en el navegador.

01 · El diseñador ($3,000): frontend-design

Es una skill (un manual que Claude lee antes de trabajar) hecha por Anthropic. Le enseña a diseñar como el jefe de diseño de un estudio: elige colores, letras y estructura pensados para su negocio, y evita el look de plantilla que delata a una página hecha con IA. Es gratis y abierta.

1

Paso 1: Instale la skill de diseño

Abra Claude Code y escriba:

En Claude CodeCopiar

/plugin install frontend-design@claude-plugins-official

Se abre un panel con los detalles. Elija Install for you (user scope) para tenerla en todos sus proyectos. Si queda pendiente de recargar, escriba /reload-plugins.

Usa la skill frontend-design para diseñar la página de inicio de mi negocio: [qué vende] para [a quién le vende], en [ciudad]. Quiero que se vea única, no como plantilla. Antes de programar, muéstrame el plan: colores, letras y estructura. Espera mi visto bueno y después constrúyela, que se vea bien en celular.

02 · El animador ($2,000): HyperFrames de HeyGen

HyperFrames convierte una página web en video. Claude escribe el reel en HTML (el lenguaje de las páginas web), con textos, imágenes, música y animaciones, y HyperFrames lo exporta como un video MP4 listo para publicar. Es gratis, de código abierto y no cobra por video.

3

Paso 3: Instale FFmpeg

FFmpeg es el programa que arma el video final. También necesita Node.js 22 o más reciente. En Mac (con Homebrew instalado):

TerminalCopiar

brew install ffmpeg

En Windows:

TerminalCopiar

winget install --id Gyan.FFmpeg -e

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Usando /hyperframes:hyperframes, haz un reel vertical de 15 segundos para mi negocio, [nombre], que anuncie [la promoción]. Usa mi logo (logo.png en esta carpeta), mis colores, textos grandes que se entiendan sin sonido y música suave. Muéstrame la vista previa antes de exportar el MP4.

03 · El integrador ($3,000): n8n

n8n conecta sus herramientas entre sí. Por ejemplo: cuando alguien llena el formulario de su sitio, guarda el contacto en su CRM (su lista de clientes), le avisa a usted por WhatsApp y le manda un correo al cliente. Claude diseña y arma el flujo; n8n lo ejecuta solo, cada vez que pasa.

5

Paso 5: Tenga su n8n

Lo más fácil es crear una cuenta en n8n.io. Para probarlo gratis en su computadora necesita Docker (un programa que corre aplicaciones empaquetadas) y estos dos comandos:

TerminalCopiar

docker volume create n8n_data
docker run -it --rm --name n8n -p 5678:5678 -v n8n_data:/home/node/.n8n docker.n8n.io/n8nio/n8n

Después abra http://localhost:5678 en su navegador.

claude mcp add --transport http n8n https://SU-DOMINIO-DE-N8N/mcp-server/http

Con n8n, crea un flujo para mi sitio: cuando alguien llene el formulario de contacto, guarda sus datos en mi CRM, mándame un aviso por WhatsApp y envíale al cliente un correo de bienvenida. Antes de activarlo, explícame cada paso y dime qué cuentas tengo que conectar en n8n.

04 · El QA ($1,000): Playwright MCP de Microsoft

QA es quien prueba que todo funcione antes de que lo vean sus clientes. Playwright MCP le da a Claude un navegador de verdad: abre su sitio, hace clic, llena formularios y le dice qué está roto. Es gratis y de código abierto.

8

Paso 8: Conecte el navegador a Claude Code

Necesita Node.js 18 o más reciente. En la terminal, dentro de la carpeta de su proyecto, pegue:

TerminalCopiar

claude mcp add playwright npx @playwright/mcp@latest

Abra Claude Code y escriba /mcp para confirmar que aparece conectado. Queda disponible en esa carpeta. Luego pídale la revisión:

PromptCopiar

Usa Playwright para abrir https://misitio.com como si fueras un cliente nuevo. Revisa la página en tamaño celular y en computadora, prueba cada botón y cada enlace, y llena el formulario de contacto con datos de prueba. Dame una lista de lo que falla, de lo más grave a lo menos grave, y cómo arreglarlo.

Ver Playwright MCP ↗

05 · El maquetador ($1,500): 21st.dev

21st.dev es una biblioteca con miles de componentes listos para su sitio (menús, tablas de precios, testimonios, formularios), hechos en React y Tailwind, dos tecnologías muy usadas en sitios modernos. Claude los busca y los pone en su proyecto. Ojo: Magic ahora se llama 21st MCP y las claves viejas de Magic ya no funcionan.

9

Paso 9: Saque su clave gratis

Cree su cuenta y su clave (API key) en 21st.dev/mcp. Guárdela como una contraseña.

claude mcp add --transport http 21st https://21st.dev/api/mcp --header "x-api-key: SU_CLAVE"

Busca en 21st una sección de precios con tres planes y una de testimonios que combinen con el estilo de mi sitio. Muéstrame las opciones antes de copiar el código (tengo 2 copias gratis al día) y después adáptalas con los textos y precios de mi negocio.

Cómo combinarlas

Juntas trabajan como un equipo: el diseñador define el estilo, el maquetador trae las piezas, el QA prueba, el integrador conecta el formulario y el animador hace el video del lanzamiento. Puede pedirlo todo en orden:

Vamos a renovar mi sitio paso por paso: 1) con frontend-design propón un estilo único para [mi negocio]; 2) busca en 21st secciones de precios y testimonios que combinen; 3) prueba todo con Playwright en celular y en computadora; 4) con n8n conecta el formulario de contacto a mi CRM y a WhatsApp; 5) con /hyperframes:hyperframes haz un reel vertical de 15 segundos para anunciarlo. Al terminar cada paso, muéstrame el resultado y espera mi aprobación.