Plugin, skill o MCP: qué es cada cosa
Les digo "plugins" a los cinco porque es como se conocen, pero por dentro no son todos iguales. Saber qué es cada uno te ayuda a entender por qué se instalan de formas distintas. Todos se usan desde Claude Code, la versión de Claude que trabaja con los archivos de tu computadora, ya sea en la pestaña Code de la app o en la terminal.
Cómo se suman a Claude
Skill o plugin
Instrucciones y archivos que Claude lee cuando hacen falta. Le enseñan a hacer algo mejor, como diseñar. Frontend Design es uno.
Servidor MCP
Un programa que le da a Claude herramientas nuevas, como abrir un navegador o buscar en tu memoria. Playwright es uno.
Programa aparte
Algo que corre en tu computadora junto a Claude Code y le cambia el comportamiento. OmniRoute y Headroom funcionan así.
No necesitas los cinco a la vez. Cada capítulo es independiente: instala primero el que resuelva tu problema de hoy y suma los demás cuando los necesites.
Qué resuelve cada uno, en una línea
Playwright MCP
Le da ojos a Claude. Abre un navegador de verdad, entra a páginas, hace clic, completa formularios y revisa que lo que programó funcione. Es de Microsoft.
OmniRoute
Cuando se acaban los tokens de un modelo, pasa solo al siguiente. Conecta más de 375 proveedores de IA, muchos gratis.
Headroom
Comprime lo que Claude lee, como registros y resultados de comandos, para no gastar tokens en información que no sirve.
MemPalace
El palacio mental: memoria permanente que guarda tus conversaciones tal cual y las encuentra cuando hacen falta.
Frontend Design
El plugin oficial de Anthropic para que tus páginas y apps no tengan cara de IA: tipografía elegida a propósito, una paleta propia y nada de diseños genéricos.
Se prepara una vez y sirve para los cinco
Los cinco necesitan Claude Code con un plan Pro o Max. Además, algunos necesitan dos programas gratis que hacen el trabajo de fondo:
Tres programas de base
- 1Claude Code en la terminal: el comando
claude, que se usa para instalar los plugins. - 2Node.js LTS: lo usan Playwright, OmniRoute y el instalador de MemPalace.
- 3uv: instala programas hechos en Python sin que tengas que pelear con Python. Lo usan Headroom y MemPalace.
No todos necesitan todo
- PPlaywright: Node.js 18 o más nuevo.
- OOmniRoute: Node.js 22.22.2 o más nuevo, mejor el 24.
- HHeadroom: uv, que baja Python 3.13 por su cuenta.
- MMemPalace: Node.js y uv, y unos 300 MB libres.
- FFrontend Design: solo Claude Code.
- Descarga la app de Claude para Windows o Mac desde claude.ai/download, instálala e inicia sesión con tu cuenta Pro o Max.
- Entra a la pestaña Code y elige cualquier carpeta, por ejemplo Documentos.
- Copia este pedido, pégalo en el chat y envíalo:
Prepara esta computadora para instalar plugins de Claude Code. Revisa qué tengo y suma solo lo que falte: 1. Node.js LTS, versión 24 o más nueva. 2. uv, el instalador de Python de Astral. 3. Claude Code en la terminal, con el comando claude disponible en el PATH. En Windows usa winget y en Mac usa Homebrew; si no tengo Homebrew, dime cómo instalarlo. Al final muéstrame la versión de cada uno y explícame cada paso en simple.
- Claude te va a pedir permiso antes de cada instalación: acepta. Si te dice que reinicies la app, ciérrala, ábrela y escríbele "sigue".
- Cuando termine, ve al capítulo del plugin que quieras: cada uno tiene su pestaña Sin terminal con el pedido para instalarlo.
✳ Por dentro, Claude corre los mismos comandos que están en las pestañas de Windows y Mac. Es la opción más cómoda si nunca abriste una terminal.
- Abre el menú Inicio, busca PowerShell y ábrelo normal, no hace falta "como administrador".
- Copia el bloque con el botón Copiar, pégalo con clic derecho y presiona Enter. Acepta si te pide permiso. Si ya tienes alguno, winget te avisa y sigue con el siguiente.
$ winget install OpenJS.NodeJS.LTS $ winget install astral-sh.uv
- Instala Claude Code en la terminal. La primera línea lo instala y la segunda le dice a Windows dónde quedó. Sin la segunda, PowerShell responde
"claude" no se reconoce. No muestra ningún mensaje, es normal.
$ irm https://claude.ai/install.ps1 | iex $ [Environment]::SetEnvironmentVariable('Path', [Environment]::GetEnvironmentVariable('Path','User') + ";$env:USERPROFILE\.local\bin", 'User')
- Cierra PowerShell y ábrelo de nuevo para que reconozca todo lo nuevo, y revisa las versiones:
$ node -v $ uv --version $ claude --version
- Node tiene que decir
v24o más. Si nunca iniciaste sesión en la terminal, escribeclaude, inicia sesión en el navegador y sal con/exit.
✳ Si winget no existe en tu computadora, actualiza "Instalador de aplicación" desde Microsoft Store.
- Abre la app Terminal: presiona Cmd + Espacio, escribe "Terminal" y presiona Enter.
- Si no tienes Homebrew, instálalo desde brew.sh: copias una línea y la pegas. Después pega esto:
$ brew install node uv
- Instala Claude Code en la terminal. La segunda línea le dice a la Terminal dónde quedó: sin eso responde
command not found: claude.
$ curl -fsSL https://claude.ai/install.sh | bash $ echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc
- Revisa las versiones. Node tiene que decir
v24o más:
$ node -v && uv --version && claude --version
✳ Si nunca iniciaste sesión en la terminal, escribe claude, inicia sesión en el navegador y sal con /exit.
Le da ojos a tu Claude
Sin Playwright, Claude programa tu web a ciegas: escribe el código y te pide que tú revises si funciona. Con Playwright MCP, el servidor oficial de Microsoft, Claude abre un navegador de verdad, entra a la página, hace clic, escribe en los formularios, lee los errores de la consola y comprueba su propio trabajo. No mira capturas de pantalla: lee la estructura de la página, que es más rápido y gasta menos tokens.
Lo que vas a usar más
- 1Probar tu web después de cada cambio, sin hacerlo tú.
- 2Encontrar errores que solo aparecen al hacer clic.
- 3Completar formularios y tareas repetitivas en páginas.
- 4Leer información de una página para usarla en tu proyecto.
Un navegador que ves
Por defecto abre una ventana de Chrome visible, así que puedes mirar lo que hace. Guarda su propio perfil, por lo que si inicias sesión en un sitio, la próxima vez sigue con la sesión abierta.
- Abre la pestaña Code de la app de Claude y envía este pedido:
Instala el servidor MCP oficial de Playwright de Microsoft en Claude Code para todos mis proyectos, con scope user. En Windows usa: claude mcp add --scope user playwright -- cmd /c npx -y @playwright/mcp@latest. En Mac usa: claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest. Después confírmame con claude mcp list que quedó conectado.
- Cierra la app, ábrela de nuevo y escribe
/mcpen un chat nuevo: tiene que aparecer playwright.
- Abre PowerShell y pega esto. En Windows hace falta el
cmd /cdel medio, si no, el servidor no arranca:
$ claude mcp add --scope user playwright -- cmd /c npx -y @playwright/mcp@latest
- Revisa que quedó. Tiene que decir playwright y Connected:
$ claude mcp list
✳ --scope user lo deja disponible en todas tus carpetas. Sin eso, queda solo en la carpeta donde estabas.
- Abre la Terminal y pega esto:
$ claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest $ claude mcp list
✳ La segunda línea tiene que mostrar playwright y Connected. --scope user lo deja disponible en todas tus carpetas.
Cómo usarlo
No hace falta nombrarlo. Pídele a Claude algo que necesite un navegador y lo usa solo. La primera vez te pide permiso para cada acción: puedes aceptar una por una o permitirlas todas.
Abre localhost:3000 con Playwright, recorre todas las páginas, prueba cada botón y formulario, y hazme una lista de lo que falla con los errores de la consola. Después corrígelos y vuelve a probar.
Abre mi página en un tamaño de celular de 390 de ancho y dime qué se ve mal o qué queda tapado. Corrige el CSS y compruébalo de nuevo.
Entra a [link] y pásame en una tabla los nombres, precios y links de cada producto. Guárdala como productos.csv en esta carpeta.
Para usar tu propio Chrome con tus sesiones abiertas, Playwright tiene una extensión para Chrome y Edge. Se activa agregando --extension al final del comando de instalación. Otras opciones útiles: --headless para que trabaje sin abrir ventana y --browser msedge para usar Edge.
Se acabaron los tokens, sigue con otro modelo
OmniRoute es una puerta de entrada gratis que se pone entre Claude Code y los modelos de IA. Conectas tus cuentas y claves, y cuando un modelo llega a su límite, falla o se pone caro, pasa solo al siguiente de la lista sin cortar tu trabajo. Soporta más de 375 proveedores y más de 150 tienen planes gratis.
Combos
Un combo es una cadena de modelos en orden. Por ejemplo: primero tu suscripción, si se acaba una API barata y al final un modelo gratis. Si no quieres armar nada, elige el modelo auto y OmniRoute arma la cadena con lo que tengas conectado.
Un panel en tu navegador
Corre en tu computadora y se maneja desde localhost:20128: ahí conectas proveedores, armas combos y ves cuánto gastas. Tus claves quedan guardadas cifradas en tu máquina.
- En la pestaña Code de la app de Claude, envía este pedido:
Instala OmniRoute de github.com/diegosouzapw/OmniRoute siguiendo su README. Revisa que tenga Node.js 22.22.2 o más nuevo, instálalo con npm install -g omniroute y arráncalo con el comando omniroute. Cuando esté corriendo, dime cómo entrar al panel y explícame en simple cómo conectar un proveedor gratis.
- Abre localhost:20128 en tu navegador y sigue desde el paso "Conectar proveedores" de las otras pestañas.
- Abre PowerShell, instala OmniRoute y arráncalo:
$ npm install -g omniroute $ omniroute
- Deja esa ventana abierta: mientras esté abierta, OmniRoute funciona. Abre localhost:20128 en tu navegador.
- Conecta proveedores: en el panel, entra a Providers y agrega tus cuentas o claves. Empieza por uno o dos.
- Arma un combo en la sección Combos con los modelos en el orden que quieras, o usa el modelo
auto. - Abre otra ventana de PowerShell y lanza Claude Code a través de OmniRoute:
$ omniroute launch
✳ Si npm 11 frena la instalación por los "install scripts", usa esta versión del comando: npm install -g --allow-scripts=omniroute,keytar,onnxruntime-node,@parcel/watcher,@swc/core,protobufjs,esbuild omniroute
- Abre la Terminal, instala OmniRoute y arráncalo:
$ npm install -g omniroute $ omniroute
- Deja esa ventana abierta y entra a localhost:20128 en tu navegador.
- Conecta proveedores en Providers y arma un combo en Combos, o usa el modelo
auto. - En otra ventana de la Terminal, lanza Claude Code a través de OmniRoute:
$ omniroute launch
✳ En Mac también existe una app para la barra de menú que lo prende y apaga con un clic: brew install --cask zoispag/tap/omniroute-tray
Cómo usarlo
Una vez conectado, trabajas en Claude Code como siempre. La diferencia es que cuando un modelo se queda sin cupo, OmniRoute pasa al siguiente y tú sigues trabajando. Algunos comandos útiles:
$ omniroute setup-claude $ omniroute run claude --model proveedor/modelo $ omniroute launch --profile mi-perfil
✳ La primera línea guarda perfiles con distintos modelos para Claude Code. La segunda lanza Claude Code con un modelo concreto. La tercera arranca con un perfil guardado.
Menos relleno, menos tokens gastados
Gran parte de los tokens que gasta Claude Code no se van en pensar, sino en leer: resultados de comandos, registros larguísimos, archivos JSON enormes. Headroom se pone en el medio y comprime todo eso antes de que llegue al modelo, dejando solo lo importante. Según su repositorio, ahorra alrededor de un 20% en agentes de código y entre un 60% y un 95% en datos JSON.
Lo que ahorra en la práctica
- 1Arreglar una caída de un servidor: de 55.957 a 24.340 tokens, un 57% menos.
- 2Buscar en el código: un 21% menos.
- 3Datos JSON: entre un 60% y un 95% menos.
Envuelve a Claude Code
En lugar de abrir Claude Code con claude, lo abres con headroom wrap claude. Headroom prende un intermediario en tu computadora, abre Claude Code conectado a él y comprime todo lo que pasa por ahí.
- En la pestaña Code de la app de Claude, envía este pedido:
Instala Headroom de github.com/headroomlabs-ai/headroom con uv: uv tool install --python 3.13 "headroom-ai[all]". Si el comando headroom no aparece, corre uv tool update-shell. Después corre headroom doctor y dime si quedó todo bien. Explícame cómo abrir Claude Code con headroom wrap claude.
- Headroom se usa desde una terminal. Cuando quieras ahorrar tokens, abre una y escribe
headroom wrap claude.
- Abre PowerShell e instala Headroom con uv. Tarda un rato porque baja todo lo que necesita:
$ uv tool install --python 3.13 "headroom-ai[all]" $ uv tool update-shell
- Cierra PowerShell y ábrelo de nuevo. Entra a la carpeta de tu proyecto y abre Claude Code a través de Headroom:
$ cd $env:USERPROFILE\Documents\mi-proyecto $ headroom wrap claude
✳ Cambia mi-proyecto por el nombre de tu carpeta. Si la instalación falla con un error de certificado, instala Rust con winget install Rustlang.Rustup y prueba otra vez.
- Abre la Terminal e instala Headroom con uv:
$ uv tool install --python 3.13 "headroom-ai[all]" $ uv tool update-shell
- Cierra la Terminal y ábrela de nuevo. Entra a tu proyecto y abre Claude Code a través de Headroom:
$ cd ~/Documents/mi-proyecto $ headroom wrap claude
✳ El --python 3.13 está a propósito: evita problemas si tu Mac tiene un Python más nuevo que el que soporta Headroom.
Cómo usarlo
Una vez dentro, trabajas como siempre: Headroom comprime en silencio. Estos comandos te sirven para revisar y medir:
$ headroom doctor $ headroom dashboard $ headroom learn $ headroom unwrap claude
✳ doctor revisa que todo funcione. dashboard muestra en vivo cuánto ahorras, con Claude Code abierto en otra ventana. learn lee tus sesiones que salieron mal y anota correcciones en CLAUDE.local.md para que Claude no repita errores. unwrap deshace todo.
El palacio mental: memoria que no se borra
Cada chat nuevo de Claude empieza sin acordarse de nada. MemPalace guarda tus conversaciones y archivos tal cual, sin resumirlos, y los encuentra por significado cuando hacen falta. Todo queda en tu computadora: no usa servicios externos ni manda nada a internet. En la prueba LongMemEval encuentra la respuesta correcta entre sus primeros 5 resultados el 96,6% de las veces.
Cómo ordena tus recuerdos
Alas
Una por cada persona o proyecto. Tu web en un ala, tu cliente en otra.
Habitaciones
Los temas dentro de cada ala, como el diseño, los pagos o los errores.
Cajones
El contenido original, palabra por palabra, para que nada se pierda al resumir.
- Es la forma que recomienda el propio repositorio. En la pestaña Code de la app de Claude, envía este pedido:
Instala las skills de MemPalace con npx skills add MemPalace/mempalace. Después configura MemPalace siguiendo su skill de instalación: instala el programa con uv, conecta su servidor MCP a Claude Code y activa los hooks de guardado automático. Pregúntame qué modo prefiero antes de cada paso importante.
- Se instalan tres skills: mempalace para configurarlo, mempalace-recall para buscar en tu memoria antes de responder y mempalace-task para delegar tareas.
- Cierra la app, ábrela de nuevo y pregúntale "¿qué recuerdas de mi proyecto?".
- Abre PowerShell e instala el programa y las skills:
$ uv tool install mempalace $ uv tool update-shell $ npx skills add MemPalace/mempalace
- Cierra PowerShell y ábrelo de nuevo. Crea el palacio para un proyecto y guarda en él tus archivos y tus conversaciones viejas de Claude Code:
$ mempalace init $env:USERPROFILE\Documents\mi-proyecto $ mempalace mine $env:USERPROFILE\Documents\mi-proyecto $ mempalace mine $env:USERPROFILE\.claude\projects --mode convos
- Abre Claude Code y pídele: "configura MemPalace: conecta su MCP y activa los hooks de guardado automático". La skill que instalaste hace el resto.
✳ La primera vez baja un modelo de búsqueda de unos 300 MB. Elige embeddinggemma si te lo pregunta: entiende español.
- Abre la Terminal e instala el programa y las skills:
$ uv tool install mempalace $ uv tool update-shell $ npx skills add MemPalace/mempalace
- Cierra la Terminal y ábrela de nuevo. Crea el palacio y llénalo:
$ mempalace init ~/Documents/mi-proyecto $ mempalace mine ~/Documents/mi-proyecto $ mempalace mine ~/.claude/projects/ --mode convos
- Abre Claude Code y pídele: "configura MemPalace: conecta su MCP y activa los hooks de guardado automático".
✳ Si prefieres pipx, funciona igual: pipx install mempalace.
Cómo usarlo
Con el MCP conectado, Claude busca en tu palacio solo cuando hace falta. También puedes buscar tú desde la terminal con mempalace search "por qué cambiamos el diseño del inicio".
Busca en MemPalace lo que hablamos sobre mi-proyecto la última semana y dime en qué quedamos y qué faltaba hacer.
¿Por qué habíamos decidido usar Stripe en lugar de Mercado Pago? Busca la conversación original y cítamela.
mempalace mine de las conversaciones apenas lo instales.
Que no se note que lo hizo una IA
Todas las webs hechas con IA se parecen: el mismo degradé violeta, las mismas tarjetas, la misma letra. Frontend Design es el plugin oficial de Anthropic que le enseña a Claude a diseñar con criterio propio: elegir una dirección estética antes de programar, combinar tipografías a propósito, armar una paleta con personalidad y cuidar los detalles. Claude lo usa solo cada vez que le pides una página, una app o un componente.
Diseños con intención
- 1Una dirección clara: minimalista, editorial, brutalista o la que pida el proyecto.
- 2Tipografías elegidas a propósito, no las de siempre.
- 3Una paleta propia con un color dominante.
- 4Animaciones y fondos con sentido.
Los clichés de IA
- 1Resaltar una sola palabra del título con otro color.
- 2Etiquetas en mayúsculas arriba de cada sección.
- 3Numerar todo con 01, 02 y 03 sin motivo.
- 4Diseños que podrían ser de cualquier marca.
- En la app de Claude, entra a Plugins, abre Descubrir, busca frontend-design y presiona Añadir.
- O escribe esto en un chat de la pestaña Code:
$ /plugin install frontend-design@claude-plugins-official
- Abre PowerShell y pega esto:
$ claude plugin install frontend-design@claude-plugins-official
✳ Si responde que no encuentra el marketplace, agrégalo primero con claude plugin marketplace add anthropics/claude-plugins-official y repite el comando.
- Abre la Terminal y pega esto:
$ claude plugin install frontend-design@claude-plugins-official
✳ Si responde que no encuentra el marketplace, agrégalo primero con claude plugin marketplace add anthropics/claude-plugins-official y repite el comando.
Cómo usarlo
No hace falta nombrarlo: se activa solo cuando pides algo visual. Cuanto más le cuentes sobre la marca y el público, mejor sale.
Diseña la landing de mi cafetería de especialidad en Córdoba. Público: gente joven que trabaja desde el café. Quiero algo cálido y editorial, nada genérico. Elige tú la tipografía y la paleta y explícame por qué.
Esta página parece hecha por una IA. Rediséñala con una dirección estética clara, cambia la tipografía y la paleta, y saca todo lo que se vea genérico. Mantén el contenido.
También viene en el repositorio de skills de Anthropic, junto con otros ejemplos oficiales: /plugin marketplace add anthropics/skills y después /plugin install example-skills@anthropic-agent-skills. No hace falta instalarlo dos veces: con una alcanza.
Problemas comunes y cómo salir
"claude", "omniroute" o "headroom" no se reconoce +
Playwright aparece como "Failed" en Windows +
Playwright dice que no encuentra Chrome +
OmniRoute no instala por la versión de Node +
No veo el panel de OmniRoute +
Instalé Headroom con npm y no funciona +
Claude no usa el plugin que instalé +
Los links que necesitas
Los cinco son proyectos de código abierto de sus autores: Playwright MCP de Microsoft y Headroom con licencia Apache 2.0, OmniRoute y MemPalace con licencia MIT, y Frontend Design de Anthropic. Los datos de esta guía salen de sus repositorios oficiales, revisados en noviembre de 2026.