cargando la guía…
Curso Roco × Alfredo · Club de la IA · 2026
Guía interactiva, visual y sin tecnicismos. Cada tema es una tarjeta — toca cualquiera y se abre el detalle a la derecha. Pensada para diseñadores, creadores de contenido, agencias y profesionales del audio y video.
Capítulo 01
Claude Desktop.
La app de escritorio. Aquí vive el chat, los conectores con tus apps (Cowork), las habilidades (Skills), Artifacts y Claude Code. Toca cualquier tarjeta para ver el detalle.
8 temas · toca cualquier tarjeta
→
1.1
La aplicación
los 3 tabs
los 3 tabs
Chat · Cowork · Code. Qué hace cada modo.
🖥→1.2
Chat & Proyectos
Memoria · estilos · ChatGPT → Claude
💬→1.3
Artifacts
Apps vivas dentro del chat
✦→1.4
Skills
habilidades reutilizables
habilidades reutilizables
Crea, empaqueta, comparte. Skill-Creator oficial.
⚡→1.5
Cowork
tu computadora
tu computadora
Conectores · tareas largas · Scheduled · Live artifacts · Dispatch desde el celular
🔌→1.6
Claude Code
Actúa sobre tus archivos
⟨/⟩→1.7
HiggsField
Imagen + video + audio IA
🎬→1.8
Render & edición
HyperFrames (HTML→MP4) · Video Use
🎞️Capítulo 02 · Ejercicio en vivo
Tu portafolio web.
Construyes tu sitio personal con Claude Code, optimizas con Cloudinary y publicas en internet con Netlify u Hostinger. Al final tienes una URL propia para compartir.
6 pasos · ejercicio paso a paso
→
2.1
El plan
8 pasos
8 pasos
El roadmap completo del ejercicio.
🗺→2.2
Identidad visual
Paletas · tipografía · hero
🎨→2.3
Prompt maestro
Plantilla con URLs reales
✍️→2.4
Componentes con nombre
Botones · animaciones · hovers · fondos — todo nombrado para que sepas cómo pedírselo.
🧩→2.5
Cloudinary
Optimizar + API
☁️→2.6
Publicar
Netlify · Hostinger
🚀Capítulo 03
Claude Design.
El lienzo visual: reels, carruseles, landings, brand books y hasta render a 4K, todo conversando. Lo más nuevo del ecosistema.
Mini manual · sistema de marca · método · proyectos del curso
→
3.1
Mini manual
cómo se usa
cómo se usa
Interfaz · funciones · flujo de proyecto · exportación · planes.
📖→3.2
Sistema de marca · paso a paso
Subir assets, que Claude extraiga tu identidad y la reutilice en cada proyecto.
🎨→3.3
El método · no partas de un solo prompt
Primero planea conversando con Claude · al final pide el prompt para crear.
💬→3.4
Qué es · sí es / no es
Para qué brilla y para qué no
✨→3.5
Proyectos hechos en vivo en el curso
Reel · carrusel · landing · dashboard · brand book · render MP4 4K.
🛠04 · Sin tecnicismos sueltos
Glosario visual.
Cada término técnico que aparece en el curso, explicado en lenguaje cotidiano. Cada tarjeta abre con buscador para encontrar rápido.
4 categorías · ~50 términos
→
Claude
Skill · Artifact · Plugin · MCP · Project · Routine…
🤖→
Web & archivos
HTML · CSS · SVG · MP4 · ZIP…
📄→
Internet & herramientas
URL · DNS · CDN · Hosting · API…
🌐→
IA visual
HiggsField · Seedance · HyperFrames…
🎬05 · Todo en un solo lugar
Recursos oficiales.
Todos los enlaces del curso agrupados por tema. Esta sección crece — conforme aparezcan nuevas herramientas relevantes las iremos añadiendo aquí mismo.
4 grupos · +50 enlaces
→
Claude oficial
Descarga · soporte · docs · móvil · Chrome ext.
🔵→
MCPs & Skills
HiggsField · Blender · Playwright · Zapier · directorios
🔌→
Publicación web
Netlify · Hostinger · Cloudinary · Squoosh · TinyPNG
🌐→
Imagen & video
HiggsField · HyperFrames · Video Use · Vimeo · YouTube
🎞️06 · Cheat sheet
Comandos de Claude.
Atajos de teclado, slash commands y comandos de terminal que aparecen en el curso. Tu chuleta para tenerla a la mano y trabajar más rápido.
5 categorías · todos los comandos del curso
→
Trucos para no programadores
El cheat sheet más útil si eres creativo · enfoque de "asistente de trabajo", no de código.
✨→
Slash commands
/schedule, /clear, /voice…
/→
Top 5 esenciales
Los que más vas a usar
⭐→
Atajos de teclado · tab Code
⌘N · ⌘⇧D · ⌘⇧P · ⌃` · ⌘\ — Mac y Windows.
⌨️→
@ menciones
Para archivos y carpetas
@→
Trucos de prompt
Frases que cambian la calidad de las respuestas. Combinables con los slash commands.
✍️La aplicación · los 3 tabs
Claude Desktop es la app para Mac y Windows. Es la entrada principal a todo el universo Claude. Al abrirla verás tres pestañas arriba: Chat, Cowork y Code.
Los 3 modos lado a lado
💬 Chat≡ Cowork⟨/⟩ Code
+ New chat📁 Projects✦ Artifacts⚙️ Customize
Conversar · crear
💬 Chat≡ Cowork⟨/⟩ Code
+ New task📁 Projects⏱ Scheduled⚡ Live artifacts📱 DispatchBeta⚙️ Customize
Conectar · automatizar
💬 Chat≡ Cowork⟨/⟩ Code
+ New session🔁 Routines⚙️ Customize⌄ Más
Actuar · archivos
Empieza en 3 pasos
1
Descarga Claude Desktop
claude.ai/download — Mac o Windows. Gratis instalar.
2
Inicia sesión
Misma cuenta de claude.ai. Para Cowork necesitas Pro o Max.
3
Háblale en español
Sin comandos raros. Como a un asistente humano.
💡Tip de oroSube siempre archivos de referencia al principio: brief, brand book, fotos. Mientras más contexto, mejor responde.
Chat & Proyectos
El centro de mando. Tres superpoderes que cambian tu forma de usarlo: Proyectos, Estilos e Importar memoria.
Importar memoria desde otro modelo de IA
Claude tiene un proceso oficial para traer todo lo que ChatGPT, Gemini u otra IA aprendió de ti.
1
Settings → Capabilities → Memory → Start import
También aparece en la home como "Import memory to Claude".
2
Copia el prompt oficial
Claude te muestra un prompt prefabricado en inglés ("Export all of my stored memories…").
3
Pégalo en ChatGPT/Gemini
El otro modelo te devuelve un resumen completo de lo que sabe de ti.
4
Pega la respuesta de regreso
En Claude, dale "Agregar a la memoria". Extrae los datos y los guarda como memorias individuales.
⚗️ExperimentalEl importador está en desarrollo activo. La memoria de Claude prioriza contexto de trabajo, no detalles personales.
📱App móvil · DispatchDescarga la app de Claude en tu celular. Te sirve para mandar tareas a tu Cowork desde donde estés.
🌐Extensión Chrome oficialInstálala desde Chrome o desde Claude Desktop. Resume páginas, redacta correos en Gmail, y trabaja con contenido web sin cambiar de pestaña.
Artifacts · apps vivas en el chat
Un Artifact es un documento o aplicación que Claude crea en un panel aparte del chat. Puede ser texto, código, HTML, SVG, dashboard… y lo mágico: lo editas conversando.
⚡Live Artifacts · solo en CoworkLos Live Artifacts (los que leen datos reales de tus apps: Calendar, Notion, Drive) solo funcionan en modo Cowork, no en el chat normal. Necesitan conectores activos.
Prompt de ejemplo
Pídeselo así
Hazme un dashboard interactivo como Artifact con: contador de proyectos activos, lista de tareas pendientes, calendario de la semana y notas rápidas. Dark mode, paleta cyan/azul. Que sea editable y guarde cambios en localStorage.Skills · habilidades reutilizables
Un Skill es una receta con instrucciones, ejemplos y archivos que le enseñas a Claude para que ejecute un flujo completo cada vez que lo invocas por su nombre.
Antes vs después
Sin skill
Con skill
Setup
5 min explicando formato, tono, ejemplos cada vez.
0 segundos · "usa reel-roco" y arranca.
Consistencia
Varía entre conversaciones.
Idéntica siempre.
Compartir
Hay que copiar prompts a mano.
Empaquetas y lo distribuyes con un click.
Skill-Creator oficial de Anthropic
Dentro de la app de Claude, en la sección Habilidades, encuentras el Skill-Creator. Un asistente que te guía paso a paso para construir tu propio skill conversando. Tú describes qué quieres, él arma toda la estructura.
Cómo arrancar con el Skill-Creator
Quiero crear un skill que se llame reel-30s. Dado un tema, genera un guion de Reel de 30 segundos: hook en 3s, 3 beats de desarrollo y CTA. Por cada beat: texto en pantalla, voz en off, indicación visual, duración. Tono casual mexicano sin emojis. Guíame para construirlo.Compartir tus skills
Cuando creas un skill, puedes compartirlo con tu equipo o tu comunidad. Hay directorios de la comunidad (skills.sh, awesome-agent-skills, 63 Design Skills) donde se publican y descargan — ver Recursos.
⚙️Plugins · Skill + ConnectorUn plugin es un paquete que combina skills con conectores. Útil cuando un flujo necesita ambas cosas (ej: plugin "Generador de Reels" con skill reel-30s + conector HiggsField + Cloudinary).
Cowork · Claude trabaja con tu compu
Cowork es el segundo tab. Aquí Claude deja de ser "el que conversa" para convertirse en el que ejecuta tareas largas y complejas por su cuenta. Le describes un objetivo, revisas su plan, lo dejas trabajar. Vuelves más tarde y está listo.
Chat vs Cowork
Aspecto
Chat
Cowork
Ejecución
Pregunta puntual
Tareas multi-paso sin que estés encima
Archivos
Lo que arrastras
Acceso directo a carpetas
Salidas
Texto · código
Excel con fórmulas · PowerPoint · docs
Programar
No
Sí — corren a la hora que tú digas
Móvil
Versión normal
Dispatch — manda tareas a tu compu
Plan
Incluso gratis
Pro · Max · Team · Enterprise
Las 6 opciones del menú Cowork
Modos de permiso
Preguntar antes Seguro
Pausa en cada paso importante. Recomendado para empezar.
Auto-aceptar Rápido
Acepta ediciones · avisa antes de comandos.
Sin preguntar Riesgo
Cero pausas. Solo con supervisión activa.
Conectores (MCPs) recomendados
📁
Filesystem
Tus carpetas
📝
Notion
Páginas y DBs
☁️
Drive
Archivos Google
📧
Gmail
Correo
📅
Calendar
Agenda
🎵
Spotify
Playlists
🎬
HiggsField
Imagen + video
🎨
Blender
3D / motion
⚡
Zapier
Automatizar
🌐
Playwright
Navegador
📷
Cloudinary
CDN imágenes
+
Muchos más
Ver Recursos
🔌Cómo conectar un MCPConfiguración → Conectores → Agregar URL (ej.
https://mcp.higgsfield.ai/mcp).Ejemplos reales de tareas Cowork
Organizar carpeta
Organiza mi carpeta de Descargas: mueve cada archivo a subcarpetas según tipo (imágenes, PDFs, videos, docs) y dentro por mes. Antes de mover, muéstrame el plan.RocoNews diaria · programada
Tarea programada cada día a las 9 am: busca las 5 noticias más relevantes de IA del día, redáctame un resumen en español casual, y guárdalo como roconews-[fecha].md en mi Notion.Playlist Spotify
Conecta con Spotify y créame una playlist "Trabajo profundo · junio" con 30 canciones instrumentales (post-rock, ambient, neoclásico). ~2 horas, ritmo bajo al inicio.Dashboard "mi día"
Live artifact tipo "mi día": calendario de hoy, tareas pendientes de Notion, correos sin leer (cantidad), clima. Diseño minimalista oscuro acentos cyan.⚠️Limitaciones1) La app debe estar abierta durante la ejecución. 2) La memoria solo persiste en Projects. 3) Cowork consume más uso que el Chat normal. 4) No se pueden compartir sesiones aún.
💡Tip de uso eficientePara tareas rápidas (responder un correo, copy corto) usa Chat. Reserva Cowork para trabajos largos que vale la pena automatizar.
Claude Code · dentro de Desktop
El tab Code vive dentro de Claude Desktop. No necesitas terminal ni instalar nada por separado. Solo le das click, eliges una carpeta, y Claude trabaja sobre los archivos reales.
🎨Para creativos · no solo para programadoresAunque oficialmente Claude Code es un agente de programación, para un creativo es muchísimo más. Lo vas a usar para:
- Crear páginas web y portafolios (es lo que haremos en el Cap 02).
- Modificar archivos locales de tu computadora: renombrar fotos, organizar carpetas, transcribir audios.
- Crear aplicaciones locales sencillas: dashboards, mockups funcionales, calculadoras.
- Prototipos rápidos de landings, micrositios, presentaciones interactivas.
- Automatizar tareas creativas: subtítulos en lote, exportar variantes, optimizar imágenes.
- Trabajar con archivos masivos: 500 fotos de un shooting, 20 videos, una carpeta entera de un proyecto.
✨Buenas noticiasEs un tab más de la app que ya tienes. Sin npm install, sin línea de comandos. Solo haces click, eliges una carpeta y empiezas a conversar.
Cómo abrir Claude Code
1
Abre Claude Desktop
Inicia sesión si no lo has hecho.
2
Click en el tab
CodeEn la barra superior verás los 3 tabs: Chat · Cowork · Code.
3
Elige la carpeta de trabajo
Donde Claude leerá y escribirá archivos. Crea una carpeta nueva por proyecto.
4
Háblale en español
Verás diffs visuales verde/rojo antes de aceptar cada cambio.
📱Dispatch desde el celularDesde la app móvil mandas una tarea, tu Desktop la ejecuta. Llegas a casa y la sesión te espera con el trabajo avanzado.
Funciones que hacen Code especial
Modos de permiso
Ask permissions Seguro
Pregunta antes de editar o ejecutar. Para empezar.
Auto accept edits Rápido
Acepta ediciones · avisa antes de comandos.
Plan mode Pro
Solo planea · no toca hasta aprobar.
Bypass all Riesgo
Cero pausas. Para usuarios experimentados.
Ejemplos creativos
Renombrar fotos
Renómbrame las fotos de /Shooting-Mayo así: Cliente_Fecha_Numero.jpg. Antes de renombrar, muéstrame 5 ejemplos.Subtítulos en lote
Toma los .mp4 de /Episodios. Para cada uno: transcríbelo, genera .srt en español e inglés con timing, guárdalos junto al video.30 variantes de copy
Crea copy-variantes.json con 30 versiones de "Tu marca, en menos tiempo". 3 grupos de 10: emocional, racional, urgente.Auditar carpeta
Revisa la carpeta actual. Reporte: archivos por extensión, carpetas con más peso, duplicados, propuesta de estructura. No muevas nada — solo propón.⚠️Cuidado con acciones destructivasAntes de borrar o sobrescribir, pide siempre "muéstrame qué vas a hacer sin hacerlo".
HiggsField · imagen + video + audio IA
HiggsField es una plataforma de generación de imagen, video y audio con IA que se conecta a Claude vía MCP. La pieza clave para producir contenido visual directo desde el chat.
Conectar HiggsField a Claude
1
Cuenta en HiggsField
higgsfield.ai · plan gratuito de prueba.
2
Agrega el conector MCP
Configuración → Conectores → Agregar URL:
https://mcp.higgsfield.ai/mcp3
Explora los skills oficiales
En higgsfield.ai/skills hay flujos creativos optimizados listos para usar con Claude.
Lo que hicimos en vivo con HiggsField
En el curso conectamos HiggsField a Claude y probamos dos cosas:
Prueba 1 · 3 infografías consistentes
Con Nano Banana, genera 3 infografías sobre [tema] manteniendo entre ellas el mismo estilo visual, paleta y tipografía. Cada nueva imagen debe referenciarse a la anterior para conservar consistencia.Prueba 2 · Video con Seedance 2.0
Con Seedance 2.0, genera un video corto de [escena que quieres]. Duración hasta 15 segundos, encuadre cinematográfico, paleta consistente con las infografías anteriores.🎨Truco · consistenciaPara que varias imágenes mantengan el mismo estilo visual, genera la primera y luego pide: "manteniendo exactamente el mismo estilo, tipografía y paleta de la imagen anterior, ahora crea la siguiente sobre…".
Render & edición de video · desde Claude
Dos herramientas que cierran el flujo audiovisual: HyperFrames (convierte páginas HTML animadas en MP4) y Video Use (edita videos conversando).
Lo que hicimos en vivo · comercial de Rocoburguesas
En el curso armamos un anuncio completo con HyperFrames. Le pasamos imágenes de las hamburguesas y le pedimos que armara una infografía en video animado con música y narración. Todo en HTML, renderizado a MP4 listo para publicar.
Prompt real · anuncio Rocoburguesas
Analiza estas imágenes y, basado en los colores, etcétera, quiero que armes una infografía en video animado con música y narración. La idea es promocionar estas hamburguesas y quiero ofrecer un nuevo costo: ahora van a costar $2.99 este combo que trae hamburguesa, papas y refresco.📸Cómo se hizoAdjuntas las imágenes de tu producto al prompt en HyperFrames y él analiza la paleta, el lenguaje visual y el mood para mantener coherencia en la animación. No necesitas decirle los colores — los extrae de las imágenes que le subes.
💡Pipeline combinadoSi no tienes las fotos del producto, genéralas primero con Nano Banana (en HiggsField) y luego pásaselas a HyperFrames para que las anime y las renderice a video.
Enlaces
🎯Cuándo usar cada unoUsa HyperFrames para crear video desde cero con animaciones diseñadas (motion graphics). Usa Video Use para editar video que ya tienes (cortes, subtítulos, exports). Combínalos: HyperFrames crea → Video Use termina.
El plan · 8 pasos
El roadmap del ejercicio que hicimos en vivo. Antes de tocar Claude Code, ten listo TODO el contenido. Si construyes sin contenido, Claude inventa placeholders y luego rehaces.
1
Reúne todos tus textos
Bio, descripción de servicios, copy de cada proyecto, testimonios. Todo en un documento.
2
Reúne todas tus imágenes
Fotos de proyectos, retratos, capturas. En una carpeta, alta resolución.
3
Optimízalas (Squoosh / TinyPNG)
Reduce ~10×. Una imagen de 5 MB queda en ~400 KB.
4
Súbelas a Cloudinary por carpetas
/proyectos, /about, /hero. Orden = menos dolor.5
Conecta Cloudinary vía API
Para que Claude baje automáticamente las URLs e las inserte en tu HTML.
6
Sube videos a Vimeo / YouTube
Para piezas largas. Copia los links de embed.
7
Arma el prompt maestro
Tus textos + URLs Cloudinary + URLs video + identidad. Lo pegas en el tab Code.
8
Publica
Netlify (drag & drop) o Hostinger (con asistente IA para DNS).
📋Regla de oroCarga primero · construye después.
Identidad visual
Antes de pedirle a Claude que construya, define cómo se ve y se siente tu sitio. Aquí 4 paletas, 4 estilos tipográficos y 4 heroes para que copies el que más te llame.
4 paletas listas
Cyan oscuro · #000 / #4a90ff / #00d4ff
Editorial cálido · #faf7f2 / #d97757
Energético · #0d0d0d / #f9b94e / #ff6b3d
Salvia natural · #1a3a1d / #5dd39e
Estilos tipográficos
Alfredo Arévalo
Display + italic editorial
Roco Studio
Gradient
CREATIVE
Outline / hueco
// portfolio_2026
Mono · técnico
Ideas de hero
ALFREDO
DIRECTOR · 2026
Centrado con glow
Roco
Studio.
Studio.
Italic editorial · esquina
ALFREDO
Nombre + tipografía fantasma
creative
director
director
Mayúsculas finas
Tipografía oficial del curso
Montserrat para texto y títulos + Fraunces italic para acentos editoriales (palabras en cursiva, números decorativos).
Prompt maestro · para Claude Code
En Claude Desktop → tab Code → elige la carpeta de tu portafolio → pega este prompt. Adapta los corchetes y URLs.
Prompt maestro
Crea un archivo index.html con mi portafolio personal de una sola página. Datos:NOMBRE: Alfredo Arévalo
PROFESIÓN: Director creativo y editor de video
TONO: editorial minimalista oscuro con acentos cyan
PALETA: #000000 / #0a0d18 / #00d4ff / #4a90ff / #ffffff
TIPOGRAFÍA: Montserrat + Fraunces italic para títulos editoriales
HERO IMAGE:
https://res.cloudinary.com/tucuenta/image/upload/f_auto,q_auto/hero/retrato.jpg
PROYECTOS (6):
1. Comercial Nike · https://res.cloudinary.com/tucuenta/.../proyectos/nike.jpg
2. Branding Roco · https://res.cloudinary.com/tucuenta/.../proyectos/roco.jpg
3. Documental SOMA · https://res.cloudinary.com/tucuenta/.../proyectos/soma.jpg
4. Editorial Vogue · https://res.cloudinary.com/tucuenta/.../proyectos/vogue.jpg
5. Campaña Coca · https://res.cloudinary.com/tucuenta/.../proyectos/coca.jpg
6. Reel Verano · https://res.cloudinary.com/tucuenta/.../proyectos/verano.jpg
SHOWREEL en hero: https://vimeo.com/123456789 · modal al darle play
CASE STUDY: https://www.youtube.com/watch?v=XXX · embed 16:9
SECCIONES (en orden):
1. Hero con mi nombre, tagline, CTA "Ver showreel"
2. Sobre mí (3 párrafos + 4 chips de skills)
3. Proyectos (grid de 6 con las imágenes, hover-lift)
4. Case study destacado con video YouTube
5. Servicios (3 columnas con icono SVG)
6. Testimonios (3 en grid)
7. Contacto (formulario + redes: @_ialfredo_)
8. Footer con copyright
FUNCIONALIDADES:
- Navegación fija con scroll suave
- Animaciones AOS al hacer scroll
- Modo oscuro por default
- Responsive perfecto en móvil
- Un solo archivo HTML autocontenido
Antes de empezar, hazme 3 preguntas para afinar el diseño.
🔗Sobre las URLsLas URLs del ejemplo son placeholders. Reemplaza
tucuenta con tu Cloud Name de Cloudinary y las rutas con tus carpetas/archivos reales.🔄Itera, no pidas perfectoEl primer resultado nunca es el final. Pide ajustes específicos: "sube 20% el tamaño del hero", "más editorial menos comercial", "grid asimétrico tipo masonry".
Componentes con nombre
Cada componente tiene su nombre técnico y la frase exacta para pedírselo a Claude. Copia el estilo del que te gusta y dile la frase.
Botones
Solid · Sólido
"botones tipo solid con color sólido"
Outline · Borde
"botones outline con borde transparente"
Ghost · Fantasma
"botones ghost translúcidos con blur"
Gradient
"botones gradient cyan a azul"
Pill · Píldora
"botones pill blancos totalmente redondeados"
Neon
"botones neon con glow al hover"
Animaciones
Fade Up
"aparecer con fade-up al hacer scroll"
Pulse Ring
"pulse con anillo expandiéndose"
Spinner
"loader circular giratorio"
✨
Float
"que flote arriba y abajo"
Wave Bars
"barras de equalizer animadas"
Morph Blob
"forma orgánica que se transforma"
_typing
Typewriter
"efecto máquina de escribir con cursor"
Scroll Indicator
"indicador de scroll vertical con luz"
Hovers en tarjetas
↑
Lift · Levantar
"hover-lift: levantarse con sombra cyan"
✦
Glow · Brillo
"hover-glow: brillar al pasar el cursor"
3D
Tilt 3D
"hover-tilt: inclinación 3D con perspectiva"
Fondos
Mesh Gradient
"fondo mesh gradient con blobs"
Grid Retro
"fondo de grid con vignette central"
Starfield
"fondo de estrellas tipo campo estelar"
Aurora
"fondo tipo aurora boreal con luces"
🎨Cómo combinarlosPuedes pedir varios al mismo tiempo: "en proyectos usa hover-lift en tarjetas, animación de aparición fade-up con delay incremental, y fondo aurora detrás del grid".
Cloudinary · optimizar + API
Las imágenes pesadas matan tu sitio. Dos pasos: primero optimizar con Squoosh o TinyPNG (~10× más ligero), después subir a Cloudinary para servirlas adaptadas a cada dispositivo.
Paso A · Optimizar antes de subir
Paso B · Subir a Cloudinary organizado
1
Cuenta gratis
cloudinary.com · 25 GB free.
2
Crea carpetas por sección
Media Library → New folder →
/proyectos, /about, /hero, /clientes.3
Sube cada imagen a su carpeta
Drag & drop. Cada una recibe una URL única.
4
Activa transformaciones automáticas
Añade
/f_auto,q_auto/ a cada URL. Cloudinary entrega WebP/AVIF + calidad ideal.Paso C · Conectar Cloudinary a Claude vía API
El truco del curso: en lugar de copiar URL por URL, conectas tu cuenta de Cloudinary con sus API Keys a Claude Code y le dices "trae todas las URLs de /proyectos".
1
Saca tus API Keys
En Cloudinary → Settings → API Keys. Copia Cloud Name, API Key y API Secret.
2
Conecta vía MCP o pásalas a Code
Hay conector MCP para Cloudinary, o se las das al iniciar tu sesión en Code.
3
Pídele que las baje
"Trae todas las URLs de
/proyectos con f_auto,q_auto e insértalas como <img> en mi HTML."⚡Truco · Tamaños responsivosAñade
w_auto a la URL: Cloudinary sirve el tamaño correcto según el dispositivo (móvil → pequeño, 4K → grande). Tu sitio vuela.Publicar · Netlify o Hostinger
Dos caminos. Netlify es el más rápido (arrastras la carpeta). Hostinger es el que usamos en el video — dominio + hosting + un asistente IA que configura los DNS por ti.
Opción A · Netlify (drag & drop)
1
Crea cuenta
app.netlify.com · gratis con correo o GitHub.
2
Arrastra tu carpeta
Suelta la carpeta (con
index.html) en el cuadro "Drag and drop your site folder".3
Recibe tu URL pública
tunombre.netlify.app. Cambia el subdominio en Site settings.Opción B · Hostinger (la del video del curso)
Ofrece hosting + dominio en un mismo lugar y su asistente IA integrado configura los DNS solo (sin que entiendas qué son).
1
Contrata plan + dominio
En hostinger.com. Suelen incluir el dominio gratis el primer año.
2
Sube tu carpeta vía File Manager
Panel Hostinger → File Manager →
public_html → sube ahí tus archivos.3
Pide al asistente IA que apunte los DNS
"Quiero apuntar mi dominio al sitio que subí" → lo hace solo. Sin tocar registros A o CNAME.
4
Espera a que propague
5–60 min. Luego entras a
tudominio.com y ahí está.🔄Actualizar tu sitioEn Netlify: arrastras de nuevo la carpeta. En Hostinger: reemplazas en
public_html.🎉¡Listo!Tu portafolio en internet. Compártelo en Instagram, LinkedIn, firma de correo, tarjeta de presentación.
Mini manual · cómo se usa Claude Design
Claude Design es una herramienta de Anthropic Labs que te permite crear diseños, prototipos interactivos, presentaciones y más, todo conversando. Funciona con un chat que genera diseños en tiempo real en un lienzo visual.
🔑AccesoEstá en vista previa de investigación para planes Pro, Max, Team y Enterprise. En Enterprise viene desactivado por defecto (el admin lo activa).
🖼️ Cómo se ve la interfaz
🛠️ Funciones que tienes
- Mensajes de chat — para cambios grandes ("haz el hero más editorial").
- Comentarios en línea — clickeas un elemento del lienzo y le dices algo puntual ("este botón más grande").
- Gestión de versiones — guarda iteraciones anteriores. Si una versión nueva no convence, vuelves a la previa.
- Hereda tu sistema de marca — si lo configuraste, los proyectos arrancan con tu paleta y tipografía.
📦 Qué puedes crear
📊 Dashboards
📱 Onboarding móvil
🌐 Landings
📝 Formularios
🛠 Herramientas internas
🎯 Presentaciones
🚀 Flujo para iniciar un proyecto
1
Crear proyecto
Hereda automáticamente el sistema de diseño de tu marca si lo configuraste.
2
Añadir contexto
Capturas de pantalla, archivos de diseño, código, referencias.
3
Escribir indicaciones específicas
Más precisión = mejor resultado. Ver tarjeta "El método".
4
Revisar generación en el lienzo
El diseño aparece en tiempo real. Lo ves crecer.
5
Iterar
Con chat (cambios grandes) o comentarios en línea (ajustes puntuales).
📤 Opciones de exportación
📦 ZIP descargable
📄 PDF
🎯 PPTX
🌐 HTML independiente
🎨 Canva
⟨/⟩ Enviar a Claude Code
🔗 Enlaces compartibles
⚠️Limitaciones actualesEstá en preview de investigación: los comentarios en línea a veces desaparecen, hay errores ocasionales de guardado en modo compacto, repositorios muy grandes causan retrasos, y a veces errores intermitentes de chat. Es esperado mientras maduran la herramienta.
El método · no partas de un solo prompt
El error más común con Claude Design (y con cualquier herramienta de IA visual) es tirarle un mega-prompt de golpe esperando el resultado final. No funciona así.
❌Lo que no hacerAbrir Claude Design y escribir: "Hazme una landing con 6 secciones, paleta cyan/azul, tipografía Montserrat, hero con video, animaciones, formulario, footer con redes…". Resultado: algo genérico que no se parece a lo que tenías en la cabeza.
✅Lo que SÍ funciona · el método de 3 pasosConversa primero · planea · pide el prompt al final.
🗣️ Paso 1 · Conversa primero (en Claude normal)
Antes de abrir Claude Design, ve al chat normal de Claude Desktop y platica sobre tu proyecto. Trátalo como una sesión de descubrimiento con un director creativo.
Cómo arrancar la plática
Voy a crear [una landing / un brand book / un dashboard] para [contexto]. Antes de que te pida el diseño, ayúdame a pensarlo. Hazme preguntas sobre objetivos, audiencia, tono, referencias, contenido. Quiero que entendamos bien qué necesitamos antes de generar nada.🧠 Paso 2 · Planea con él
En esa misma conversación, deja que Claude te lleve a definir:
- Objetivo claro — qué tiene que lograr el diseño.
- Audiencia — quién lo va a ver.
- Tono y mood — editorial, energético, minimalista, etc.
- Secciones / pantallas — lista concreta.
- Referencias visuales — sitios o estilos que te gustan.
- Contenido real — textos, imágenes, datos. No placeholders.
- Restricciones — paleta, tipografía, longitud, formato final.
✍️ Paso 3 · Pídele EL prompt
Cuando ya tengan todo el plan claro, dile a Claude:
Cierre de la planeación
Perfecto. Con todo lo que platicamos, escríbeme el prompt completo que voy a usar en Claude Design para crear este proyecto. Incluye todo el contexto, las decisiones que tomamos, el contenido real, las restricciones y el formato final esperado. Que sea un prompt listo para pegar.🎯 Paso 4 · Pega y genera
Tomas ese prompt detallado, lo pegas en Claude Design, y el resultado va a estar 10× mejor que si hubieras tirado un prompt random. Después iteras con comentarios en línea y mensajes específicos.
⭐Por qué este método funcionaConvertir una idea en diseño tiene dos partes: 1) pensar qué hacer y 2) ejecutarlo. La mayoría intenta hacer las dos al mismo tiempo con un solo prompt. Claude Design es excelente ejecutando, pero necesita un input claro. La conversación previa con Claude normal es donde haces el pensar. Separa las dos fases y te ahorras horas de iteración.
📂BonusGuarda esa conversación previa como Project en Claude Desktop. La próxima vez que hagas un proyecto similar para el mismo cliente, todo el contexto ya está ahí.
Claude Design · qué es
El lienzo visual de Claude. Aquí generas reels, carruseles, landings, brand books y hasta renderizas a video 4K — todo conversando. Lo más nuevo y lo más impactante para creativos visuales.
✅ Sí es
❌ No es
Velocidad
Del brief al mockup en minutos
Reemplazo del software pro pixel-perfect
Edición
Editable conversando
Para entregables finales especializados
Uso
Acelerador del proceso visual
Generador de assets de marca como logos
Para qué brilla en flujo creativo
- Prototipos rápidos de app — 3 pantallas principales en 30 segundos.
- Landing pages presentables para validar concepto antes de Figma.
- Sistemas visuales mini-design-system: paletas, tipografías, botones.
- Reportes y presentaciones visuales tipo mini-site.
- Key visuals de campaña aplicados a banner, email, redes.
- Mockups para pitch — llegas con la idea visualizada.
🎯Pro tip · iteraEl primer resultado rara vez es el final. "baja la densidad", "más serif y editorial", "layout asimétrico".
Sistema de marca · paso a paso
Antes de crear proyectos sueltos, lo más poderoso de Claude Design es configurar tu sistema de marca una vez y que cada proyecto nuevo arranque con tu paleta, tipografía, componentes y voz. Resultado: consistencia automática y horas de tiempo recuperadas.
🎯Cómo funcionaSubes assets que reflejan tu marca · Claude los analiza · extrae un sistema de diseño reutilizable (colores, tipografía, componentes, espaciado) · lo guarda · cada proyecto nuevo lo hereda.
📦 Qué puedes subir
Con uno solo basta, pero mientras más tipos le des, más rico será el sistema:
💡El consejo claveSube ejemplos reales, no solo specs en abstracto. Ver un banner real, una landing real, un slide real le enseña a Claude muchísimo más que leer "el color primario es #d97757".
🚀 Pasos exactos
1
Crea u organiza tu cuenta
Abre Claude Design, selecciona o crea tu organización y completa el onboarding.
2
Sube tus assets
Arrastra cualquiera de los 4 tipos de arriba. Cuantos más, mejor — pero con uno arrancas.
3
Claude analiza y extrae
Automáticamente identifica:
- Paleta de colores (primarios, secundarios, acentos)
- Tipografía (familias, tamaños, pesos)
- Componentes (botones, tarjetas, navegación)
- Patrones de espaciado y grillas
4
Revisa el sistema generado
Crea proyectos de prueba rápidos. Mira si el resultado se siente como tu marca. Si no, agrega más assets o ajusta.
5
Publica
Activa el toggle
Published. A partir de ahí, todo tu equipo accede al sistema automáticamente en cada proyecto.🔄 Cómo actualizarlo cuando tu marca evoluciona
Si rediseñas tu marca o le agregas elementos, en configuración usas el botón Remix para que Claude actualice el sistema con los nuevos assets. No necesitas empezar de cero.
📤 Bonus · empaquetar como Skill
Cuando tu sistema esté maduro, puedes empaquetarlo como Skill y compartirlo con tu equipo o usarlo en otras herramientas de Claude (Cowork, Chat). Así la voz y el look de tu marca te siguen donde uses Claude.
⭐Por qué empezar por aquíConfigurar el sistema te toma 1-2 horas la primera vez. Pero cada proyecto posterior arranca con tu identidad ya cargada. Si vas a usar Claude Design en serio, este es el setup que multiplica todo lo demás.
Proyectos hechos en vivo en el curso
Lista de los proyectos que armamos en clase con Claude Design. Si viste el curso, ya tienes los pasos en video. Aquí están listados para que recuerdes qué se cubrió y los puedas replicar.
📱 Reel animado para Instagram
Video vertical 9:16 con tipografía animada, transiciones, música y voz en off. Exportado a MP4 listo para subir.
📄 Carrusel informativo en PDF
10 slides cuadradas con tipografía editorial y paleta consistente. Listo para LinkedIn, Carrd o impresión.
🌐 Landing page visual
Pantalla web completa con hero, beneficios, testimonios y formulario. Para validar conceptos con cliente antes de pasar a producción real.
📊 Dashboard visual
Interfaz tipo aplicación SaaS con KPI cards, gráficos, tablas y panel lateral. Para presentar resultados o mockear un producto digital.
🎯 App "Zero Bloqueo" · brand book + mockups + landing
Caso completo: brand book de la app ficticia (logo, paleta, tipografías, voz) + mockups de 4 pantallas + landing de lanzamiento. Todo coherente bajo la misma identidad.
✨ Animaciones estilo Meta
Tipografía kinética con timing desfasado, escalas elegantes, ease cubic-bezier suave. El "look" que Meta y Anthropic usan en sus videos.
🎞️ Render HTML → MP4 4K (con HyperFrames)
Cualquier diseño animado que hagas en Claude Design lo puedes pasar a HyperFrames para renderizarlo a video MP4 en 4K. Mini-suite de producción audiovisual completa.
💬RecordatorioPara cada uno de estos proyectos usamos el método de la tarjeta 3.3: primero conversamos con Claude para planear, después le pedimos el prompt, y solo entonces fuimos a Claude Design a generar. No partas de un solo prompt.
Glosario · Claude
Skill
Una habilidad reutilizable. Receta con instrucciones, ejemplos y archivos.
Artifact
Documento o aplicación que Claude crea en panel aparte. Editable conversando.
Plugin
Paquete que combina skills + conectores. Listo para instalar de un jalón.
Connector / Conector
Puente entre Claude y otra app (Notion, Drive, Spotify…).
MCP
Model Context Protocol. Estándar con el que se construyen los conectores.
Project / Proyecto
Espacio con memoria propia. Sube ahí archivos de un cliente y todas las conversaciones tienen ese contexto.
Style / Estilo
Perfil de tono guardado para clonar la voz de una marca.
Memoria
Lo que Claude recuerda de ti entre conversaciones.
Dispatch
Mandar tareas a Cowork desde la app móvil. Pro y Max.
Routine / Rutina
Tarea que se repite automáticamente (cada lunes, cada noche).
Scheduled task
Tarea programada en Cowork.
/schedule en cualquier tarea.Live artifact
Mini-app que vive en Cowork y se conecta a datos en vivo (Calendar, Notion, Drive).
Diff visual
Vista que muestra en verde lo agregado y en rojo lo quitado.
Plan mode
Modo donde Claude solo te presenta el plan y no ejecuta hasta aprobar.
Token
Unidad mínima con la que Claude mide texto. ~1 palabra = 1.3 tokens en español.
Modelo (Opus / Sonnet / Haiku)
Versiones del cerebro. Opus el más capaz · Sonnet balance · Haiku más rápido.
Glosario · Web & archivos
HTML
El lenguaje de las páginas web. Texto con etiquetas que dicen "esto es un título", "esto es una imagen".
CSS
Reglas visuales: colores, tamaños, posiciones, animaciones. La piel.
JavaScript
Lo que hace que una página reaccione: botones, menús, scroll suave.
SVG
Imagen vectorial (matemática, no pixeles). No pierde calidad al agrandar. Para íconos y logos.
PNG / JPG
Formatos de imagen tradicionales. PNG con transparencias, JPG más comprimido.
WebP
Formato moderno que pesa menos que JPG sin perder calidad. El recomendado para web.
MP4
Formato de video más universal. Se reproduce en cualquier dispositivo.
GIF
Imagen animada en bucle. Pesado y baja calidad — mejor MP4 corto.
PDF
Documento que se ve igual en cualquier dispositivo.
ZIP
Archivo que empaqueta y comprime varios archivos en uno.
Carpeta / Archivo
Carpeta = caja. Archivo = cada cosa adentro.
Ruta / Path
"Dirección" de un archivo.
~/Documentos/Portafolio/index.htmlResponsive
Que un sitio se ve bien en cualquier pantalla.
Aspect ratio
Proporción ancho/alto. 16:9 video · 9:16 reel · 1:1 cuadrado.
Hex (color)
Forma de escribir colores:
#00d4ff. Cada par = rojo, verde, azul.Glosario · Internet
URL
Dirección de una página en internet.
https://roco.comDominio
El nombre legible de un sitio (
roco.com). Se compra anualmente (~$10/año).DNS
Domain Name System. La "guía telefónica" de internet: traduce el dominio a la dirección donde vive tu sitio.
Hosting
El servidor donde "vive" tu sitio. Netlify, Hostinger son hostings populares.
CDN
Content Delivery Network. Servidores repartidos por el mundo que entregan tus archivos rápido en cualquier país.
Netlify
Servicio gratuito para publicar sitios. Arrastras y listo.
Hostinger
Hosting + dominio + asistente IA para configurar los DNS. La del video del curso.
Cloudinary
CDN gratuito de imágenes. Las optimiza automáticamente.
Squoosh
App web gratuita de Google para optimizar imágenes (reducir peso sin perder calidad).
TinyPNG
Servicio para optimizar PNG y JPG en lote (hasta 20 a la vez).
Drag & drop
"Arrastrar y soltar". Tomar algo con el mouse y dejarlo en otro lado.
GitHub
Plataforma para guardar y compartir código. Como Drive pero para programadores.
Repositorio
Carpeta en GitHub con un proyecto y su historial.
Terminal
Ventana negra donde se escriben comandos en texto.
API
"Menú" que una app le ofrece a otras para conectarse. Detrás de cada conector hay una API.
API Key
"Contraseña" que identifica que eres tú quien usa una API. Nunca la compartas.
npm
Gestor que instala herramientas en tu computadora desde la terminal.
Open Source
Software de código abierto. Gratis casi siempre.
IA / LLM
Inteligencia Artificial / Large Language Model. El tipo de IA en que está Claude.
Glosario · IA visual
HiggsField
Plataforma de IA para generar imagen, video y audio. Conector MCP.
Nano Banana
Modelo de imagen dentro de HiggsField. Rápido y consistente.
Seedance 2.0
Modelo de video hasta 15s con calidad cinematográfica.
HyperFrames
Convierte HTML animado en MP4 hasta 4K.
Video Use
Editar videos conversando: cortes, subtítulos, color, exports.
Render
Generar el archivo final (video, imagen 3D). "Cocinar" el resultado.
4K
Resolución 3840×2160 px. El estándar premium hoy.
Frame
Cada imagen individual que compone un video.
Keyframe
Frame "clave" que marca dónde empieza o termina una animación.
TTS (Text-to-Speech)
"Texto a voz". Convertir texto escrito en voz hablada natural.
STT (Speech-to-Text)
"Voz a texto". Transcribe audio a texto.
Consistencia
Que varias imágenes/videos mantengan el mismo estilo o personaje.
Recursos · Claude oficial
Plataforma
Claude (chat web)
claude.ai
App escritorio
Claude Desktop
claude.ai/download
iOS
App móvil · iPhone
App Store
Android
App móvil · Android
Google Play
Navegador
Extensión Chrome (oficial)
Chrome Web Store
Empresa
Anthropic
anthropic.com
Recursos · MCPs & Skills
MCPs (conectores)
Imagen + video + audio
HiggsField MCP (oficial)
higgsfield.ai/mcp
Skills
HiggsField Skills
higgsfield.ai/skills
3D · motion
Blender MCP (comunidad)
github.com/ahujasid/blender-mcp
3D · alt
Blender MCP (alternativa)
github.com/pranav-deshmukh/blender-mcp
Navegador
Playwright MCP
github.com/flyingwongco/playwright-mcp-server
Automatización
Zapier MCP
zapier.com/mcp
Directorios de Skills
Directorio general
skills.sh
skills.sh
Lista curada
awesome-agent-skills
github.com/VoltAgent/awesome-agent-skills
Diseño · 63 skills
63 Design Skills
github.com/Owl-Listener/designer-skills
Diseño · 48 skills
48 Design Skill Files
typeui.sh/design-skills
Recursos · Publicación web
Hosting · drag & drop
Netlify
netlify.com
Hosting · con asistente IA
Hostinger (la del video)
hostinger.com
CDN imágenes
Cloudinary (plan gratuito)
cloudinary.com
Optimizar imágenes
Squoosh (Google)
squoosh.app
Optimizar (lote)
TinyPNG
tinypng.com
Dominios
Namecheap
namecheap.com
Dominios
Cloudflare Registrar
cloudflare.com/registrar
Recursos · Imagen & video
Plataforma
HiggsField
higgsfield.ai
Render
HyperFrames (GitHub)
github.com/heygen-com/hyperframes
Docs
HyperFrames Quickstart
hyperframes.mintlify.app/quickstart
Edición
Video Use (GitHub)
github.com/browser-use/video-use
Hosting de video
Vimeo
vimeo.com
Hosting de video
YouTube
youtube.com
Atajos de teclado · tab Code
Los atajos oficiales del tab Code de Claude Desktop (también funcionan en Cowork donde aplica). Pulsa ⌘+/ dentro de la app para ver todos los disponibles.
Ayuda y descubrimiento
⌘+/
Ver todos los atajos disponibles en el tab actual.
Code · sesiones
⌘+N
New session · abre una nueva sesión paralela.
⌃+Tab
Cambiar a la siguiente sesión en el sidebar.
⌃+⇧+Tab
Cambiar a la sesión anterior.
⌘+Click
Abrir una sesión en panel adjunto (ver dos a la vez).
Code · paneles
⌘+⇧+D
Alternar panel de diferencias (diff). Verde/rojo.
⌘+⇧+P
Alternar panel de vista previa de la app.
⌃+`
Alternar panel de terminal integrada.
⌘+\
Cerrar el panel actualmente enfocado.
⌃+O
Ciclar entre modos de vista del chat (transcript).
💻En WindowsReemplaza ⌘ por Ctrl en los atajos. Los que ya usan ⌃ (Ctrl) son iguales en Mac y Windows.
Trucos para no programadores
Si eres creativo y no programas, este es el cheat sheet más útil de toda la guía. Olvídate de hooks, CLI y automatizaciones complejas. La clave es usar Claude como asistente de trabajo: que organice, resuma, compare, redacte y revise. No le "programes" cosas — pídele cosas.
🎯 Enfoque general
En Claude Desktop, lo más útil para ti es trabajar con archivos y carpetas concretas, darle contexto claro y usar el modo de Cowork para tareas prácticas. Nada más.
✨ Hacks que de verdad funcionan
🔌 Truco específico de Cowork
💼Lo que Cowork hace mejorDale una carpeta o conjunto de archivos con una meta concreta: organizar documentos, clasificar materiales, preparar un borrador. Ese flujo está hecho para trabajo asistido sin programar. No intentes hacer cosas raras — esto es lo que brilla.
🎙️ Hábitos simples que cambian todo
Reescribe en el mismo hilo
Cuando quieras corregir algo, no abras una conversación nueva. Sigue en el mismo hilo, Claude tiene el contexto fresco.
"solo bullets" / "solo lo esencial"
Si una respuesta sale demasiado larga, pídelo así. Recortas el ruido al instante.
"revísalo como editor exigente"
Para mejorar calidad, añade una instrucción de revisión. Claude se pone más crítico y detecta lo que se va a colar.
Guarda tus prompts favoritos
Para tareas repetitivas, conserva tu forma de pedirlas y reutilízala. Eso sustituye la mayoría de los "cheats" técnicos.
❌ Lo que SÍ conviene evitar
⚠️No te metas en lo que no necesitasSi tu uso principal es chat y Cowork ligero, NO entres a hooks, worktrees, CLI, sandboxes ni automatizaciones avanzadas. Son potentes, sí, pero para creativos añaden complejidad sin aportar valor real al día a día. Mejor domina los hacks de arriba.
💡 Ejemplo práctico · ordenar ideas para un video
Cópialo y adáptalo
Te voy a subir notas sueltas. Ordénalas en: 1) idea principal, 2) puntos clave, 3) cierre. Luego dame una versión corta y una versión larga.🎯Por qué funcionaEste prompt aprovecha Claude Desktop sin requerir conocimiento técnico: le das un input (notas), le das una estructura (3 partes) y le pides dos outputs (corta/larga). Ese patrón —input, estructura, outputs— sirve para casi cualquier tarea creativa.
⭐La regla de oroTrata a Claude como un colaborador inteligente que no sabe nada de tu proyecto: dale el contexto, dile qué hacer, pídele algo concreto. Si lo haces así, todo lo demás de esta guía se vuelve opcional.
Slash commands · los esenciales
Comandos que escribes dentro de Claude empezando con /. Disparan acciones especiales sin tener que explicarlas.
📍Importante · dónde funcionanCasi todos los slash commands viven dentro del tab Code. En Cowork el único oficial es /schedule. En el Chat normal de Claude estos comandos no funcionan — el chat acepta arrastrar archivos y conversación libre, no slash commands de la app.
📋Cómo ver todos en cualquier momentoEn el tab Code, escribe / en el campo de texto y se abre un menú desplegable. Navega con ↑↓, Enter para seleccionar.
⚡Tus skills también se invocan con /Cuando creas un skill (por ejemplo reel-30s), lo llamas como cualquier otro slash command: /reel-30s. Aparecerá en el mismo menú.
Esenciales · día a día (tab Code)
/help
Muestra todos los comandos disponibles. Cuándo: cuando no recuerdas qué existe.
/clear
Borra el historial y reinicia el contexto. Cuándo: cambias de tarea o empezar de cero.
/compact
Comprime el historial resumiendo lo anterior. Cuándo: cada 10-15 mensajes o cuando Claude empieza a "olvidar".
/context
Vista visual de cuánto contexto estás usando. Cuándo: para monitorear si te acercas al límite.
Automatización y voz
/schedule
Único oficial en Cowork. Convierte una tarea de Cowork en programada (ej: "revisar archivos cada lunes 9am"). Cuándo: automatizar trabajo repetitivo.
/voice [hold|tap|off]
Activa dictado por voz en uno de 3 modos: hold (mantén tecla), tap (un toque), off. Más de 20 idiomas. Cuándo: hablar en lugar de escribir.
/model
Cambia entre modelos: Opus (complejo) · Sonnet (día a día) · Haiku (rápido). Cuándo: según el peso de la tarea.
/mobile
Genera un código QR para continuar la sesión en tu celular. Cuándo: te alejas del escritorio.
Control y recuperación
/add-dir <ruta>
Añade otra carpeta al proyecto para que Claude pueda verla. Cuándo: necesitas trabajar en múltiples carpetas.
/rewind
Deshace cambios como una "máquina del tiempo". Cuándo: Claude tomó un camino equivocado.
/config
Abre el panel de configuración. Cuándo: ajustar opciones generales.
/cost
Alias de /usage — muestra costo de sesión + límites del plan + estadísticas de actividad. Cuándo: revisar uso.
Avanzados (solo tab Code)
/init
Crea un
CLAUDE.md en la carpeta actual (memoria de proyecto)./plan
Modo solo-lectura: Claude planea sin ejecutar.
/batch
Cambios masivos en muchos archivos a la vez.
/simplify
Revisión y simplificación del código generado.
/stats
Alias de /usage · abre directo en la pestaña de estadísticas.
/insights
Reporte mensual de uso.
/debug
Diagnostica errores del entorno.
/hooks
Crea automatizaciones que se disparan ante eventos.
/loop
Repite un prompt en intervalos (útil para monitorear).
/remote-control
Controlar la sesión desde tu celular.
⭐Ver "Top 5 esenciales"En esta misma sección hay una tarjeta con los 5 que más vas a usar como creativo, con ejemplos concretos.
Top 5 que más vas a usar
De los 20+ comandos que existen, estos son los 5 que un creativo de verdad usa todos los días. Memorízalos y todo lo demás es bonus.
1️⃣ /schedule Cowork
Programa tareas automáticas. Es el poder real de Cowork.
Ejemplos
"Revisar mi carpeta de Descargas cada lunes 9am y organizar archivos""Generar un resumen de mis facturas cada fin de mes"
"Crear backup de documentos importantes cada viernes"
"Mandarme un resumen del calendario de hoy cada mañana a las 8am"
2️⃣ /clear Code
Limpia el contexto cuando:
- Cambias de proyecto o cliente.
- Claude empieza a confundirse o repetirse.
- Quieres una conversación nueva sin perder la sesión completa.
3️⃣ /compact Code
Comprime el historial resumiéndolo. Útil para:
- Liberar espacio de contexto.
- Mantener a Claude "enfocado" en la tarea actual.
- Evitar que olvide lo importante en conversaciones largas.
4️⃣ /voice [hold|tap|off] Code
Dictado por voz en 3 modos: hold (mantén tecla mientras hablas), tap (un toque), off. Sirve cuando:
- Quieres ir más rápido hablando.
- Estás en movimiento.
- Prefieres hablar en español (o cualquiera de los 20+ idiomas soportados).
5️⃣ /model Code · útil en Cowork
Cambia de modelo según el peso de la tarea:
- Opus — análisis pesado, generación creativa compleja, código difícil.
- Sonnet — día a día, balance velocidad/calidad. El default.
- Haiku — tareas rápidas, respuestas cortas, automatización barata.
💡Pro tipEmpieza con Sonnet por default. Si una respuesta no te convence, sube a Opus. Para tareas masivas y simples, baja a Haiku — gastas menos.
@-menciones · traer archivos al chat
El símbolo @ sirve solo para incluir archivos y carpetas de tu proyecto en la conversación. Es la forma rápida de decirle a Claude "lee esto antes de actuar".
@archivo
Agrega un archivo del proyecto al contexto. Ejemplo: @brief.pdf
@carpeta
Trae el contenido de una carpeta completa. Ejemplo: @assets/
⚠️Aclaración importanteLos skills y los conectores (MCPs) NO se invocan con @. Se invocan con / (son slash commands). Por ejemplo:
/reel-30s o /review-pr.📎AlternativaSi te da pereza escribir @, también puedes arrastrar archivos directamente al cuadro de prompt y Claude los carga automáticamente.
🌐LimitaciónLas @-menciones de archivos no funcionan en sesiones remotas/nube. Solo en sesiones locales (en tu compu) o SSH.
Resumen · cuándo usar cada símbolo
@
Archivos y carpetas de tu proyecto.
/
Comandos de Claude (/help, /clear, /schedule…) y tus skills (/nombre-del-skill).
Trucos de prompt · frases que cambian todo
No son comandos técnicos, pero son frases que mejoran drásticamente la calidad de lo que Claude te entrega. Funcionan en Chat, Cowork y Code. Combínalas con los slash commands para potenciar.
Antes de ejecutar algo grande
"muéstrame el plan antes de ejecutar"
Claude te presenta los pasos y espera tu visto bueno. Indispensable antes de borrar, mover o sobrescribir.
"sin hacer cambios todavía, dime…"
Garantiza que solo planifica, no toca archivos.
"hazme 3 preguntas antes de empezar"
Fuerza a aclarar dudas. Mejor calidad final, menos correcciones después.
"muéstrame solo 5 ejemplos para confirmar"
Antes de procesar 500 archivos en lote.
Iterar con precisión
"hazlo 30% más corto"
Iterar con números es más preciso que "hazlo más corto".
"súbele un punto de energía"
Ajustes graduales en tono y mood.
"más editorial, menos comercial"
Dirección estilística clara en una frase.
"genera 5 variantes y dime cuál es tu favorita y por qué"
Multiplica opciones + criterio + aprendizaje.
"haz lo opuesto"
Cuando una respuesta no convence, este pivot suele desbloquear ideas.
Combinar con slash commands
"usa /compact y resume lo importante"
Comprime el contexto antes de seguir con una conversación larga. Evita que Claude "olvide".
"cambia con /model a Opus para esto"
Para tareas creativas o análisis complejos, sube de modelo solo cuando lo necesitas.
"haz /rewind y probemos de otra forma"
Cuando Claude tomó un camino equivocado, vuelves atrás sin perder la sesión.
"prográmalo con /schedule para cada lunes"
Convierte cualquier tarea de Cowork en rutina automática.
"actívame /voice para dictar"
Más rápido que escribir cuando tienes una idea fresca.
Memoria y contexto
"guarda esto en memoria del proyecto"
Pídele que recuerde una preferencia para futuras sesiones.
"olvida lo anterior, empezamos de cero"
Equivalente conversacional a /clear.
"lee primero @brief.pdf y luego…"
Fuerza a leer un archivo antes de actuar.
"recuerda que prefiero tono X, paleta Y"
Memoria de marca/proyecto.
Rol y tono
"eres director creativo con 15 años de experiencia"
Asignar rol mejora notablemente la calidad.
"justifica cada decisión que tomes"
Aprendes mientras Claude trabaja.
"explícalo como a un principiante creativo"
Reduce la jerga técnica.
"escríbelo con la voz de [marca/persona]"
Para clonar un tono específico.
Auditoría y control
"revisa con /cost antes de continuar"
Conciencia de uso antes de tareas pesadas.
"usa /context y dime cuánto llevamos"
Saber si te acercas al límite de contexto.
"valida que lo que hiciste cumple X, Y, Z"
Checklist final antes de cerrar tarea.
"dime 3 cosas que podrían salir mal"
Análisis de riesgos previo.
Creatividad y exploración
"dame 10 ideas malas a propósito"
Desbloquea la lluvia. Después: "ahora las 3 mejores".
"¿qué haría [referencia/persona] aquí?"
Cambia el ángulo creativo de un golpe.
"explícalo en 3 niveles: niño, adolescente, experto"
Útil para encontrar el tono correcto.
"hazme un brief inverso de esto"
Te devuelve cuál habría sido la pregunta perfecta.
💡El método BRIEFAntes de cualquier prompt creativo, dale 5 puntos: Buyer (audiencia) · Resultado · Inspiración · Evitar · Formato.
⚡Truco maestroEncadena: "hazme 3 preguntas, luego muestra el plan, ejecuta, y al final usa /compact para resumir lo que hicimos". Un solo mensaje que cubre todo el ciclo.
