01 Qué es Huashu Design
Es una skill: una carpeta con instrucciones, plantillas y scripts que Claude Code carga cuando le pides algo de diseño. En lugar de explicarle cada vez cómo debe ser un prototipo o una presentación, la skill ya trae el método, componentes de partida (marcos de iPhone y Android, ventanas de navegador, motor de diapositivas, motor de animación) y las herramientas para exportar el resultado.
La creó un desarrollador chino conocido como Huashu y desde mayo de 2026 tiene licencia MIT, así que puedes usarla también en trabajos para clientes. Las instrucciones internas están en chino, pero el agente trabaja sin problema si le hablas en español.
| Qué le pides | Qué te entrega | Tiempo orientativo |
|---|---|---|
| Prototipo de app o web | Un HTML con marco de móvil y pantallas navegables | 10-15 min |
| Presentación | Diapositivas en HTML y exportación a PPTX con texto editable | 15-25 min |
| Animación | MP4 y GIF, con música de fondo opcional | 8-12 min |
| Variantes | Tres o más propuestas lado a lado con parámetros ajustables | 10 min |
| Infografía | Pieza con tipografía cuidada exportable a PDF, PNG o SVG | 10 min |
| Dirección de diseño | Tres estilos distintos para elegir cuando el encargo es vago | 5 min |
| Crítica de un diseño | Puntuación en cinco dimensiones y lista de mejoras | 3 min |
02 Instalación
-
1
Comprueba que tienes Node.js
Ejecuta node --version en la terminal. La instalación usa npx, que viene con Node.
-
2
Instala la skill con la CLI skills
Sin opciones se instala en el proyecto actual; con -g queda disponible en todos tus proyectos. La CLI te preguntará en qué agentes instalarla.
-
3
Verifica que se copió completa
Abre la carpeta de la skill (por ejemplo ~/.claude/skills/huashu-design/). Debe tener SKILL.md y las subcarpetas references, assets, scripts y demos. Si solo ves SKILL.md, tu versión de la CLI es antigua: actualízala y repite.
-
4
Abre Claude Code y pide algo
No hay que activarla: Claude la carga cuando tu petición encaja con lo que hace la skill.
# Instalación global para todos tus proyectos
npx skills add alchaincyf/huashu-design -g
# Si la carpeta quedó incompleta, actualiza la CLI y repite
npm i -g skills@latest
# Alternativa: clonar el repositorio directamente
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design03 Cómo trabaja la skill
Como un diseñador júnior
No intenta acertar a la primera. Te hace todas las preguntas de golpe, enseña pronto una versión con huecos y supuestos, y va rellenando contenido real, variantes y ajustes por etapas.
Protocolo de marca
Si el encargo es para una marca concreta, busca y descarga logotipo, fotos de producto, capturas y colores reales, y los fija en un archivo brand-spec.md en lugar de inventarlos.
Comprobar antes de afirmar
Cuando mencionas un producto o una tecnología, primero lo busca en la web para confirmar que existe y cómo es.
Reglas anti «estética IA»
Evita los tópicos de los diseños generados: degradados morados, iconos de emoji, siluetas en lugar de fotos de producto, la misma tipografía para todo.
Verificación con navegador
En los prototipos hace clic en las pantallas con Playwright y revisa errores de consola antes de entregarte nada.
04 Prompts para empezar
Diseña un prototipo de app móvil para iPhone de una clínica de fisioterapia. Pantallas: inicio con próxima cita, reservar cita (elegir fisio, día y hora), historial de sesiones y perfil. La navegación tiene que funcionar de verdad. Usa los colores y el logotipo de la carpeta marca/. Textos en español de España. Antes de empezar, hazme todas las preguntas que necesites en un solo mensaje.Crea una presentación de 10 diapositivas para presentar nuestro servicio de mantenimiento web a pymes: problema, solución, cómo trabajamos, tres casos de éxito, planes y precios, siguientes pasos. Propón primero tres direcciones visuales distintas para que elija una. Al final expórtala a PPTX con los textos editables.Convierte este mensaje en una animación de 20 segundos en formato vertical 9:16: «Tu web tarda 6 segundos en cargar. Tus clientes se van a los 3». Muestra el contador de tiempo, la caída de visitas y cierra con el logotipo de marca/. Exporta MP4 y GIF.Haz una revisión experta de la captura landing.png en cinco dimensiones y puntúa cada una de 0 a 10. Después dame tres listas: qué mantener, qué arreglar y mejoras rápidas que pueda aplicar hoy. Sé concreto y señala zonas de la imagen.05 Límites y cuándo elegir otra opción
- ✓No sustituye a Figma: el resultado es HTML, no capas editables para un equipo de diseño.
- ✓Las animaciones avanzadas (3D, físicas, partículas) quedan fuera de su alcance.
- ✓Consume bastante uso: cada pieza implica varias iteraciones, búsquedas y verificaciones.
- ✓Los recursos de marca que descarga de la web deben tener licencia para el uso que vayas a darles.
- ✓Las funciones opcionales en la nube (narración por voz, revisión de vídeo) usan servicios externos con tus propias claves y piden confirmación explícita.
Si prefieres una interfaz visual en la que arrastrar y editar, la herramienta oficial de diseño de Claude encaja mejor. Huashu Design tiene sentido cuando ya trabajas en Claude Code, quieres entregables en archivos (HTML, MP4, PPTX, PDF) y te sientes cómodo iterando por conversación.
Preguntas frecuentes
Sí. Desde mayo de 2026 la skill tiene licencia MIT, que permite el uso comercial. Revisa aparte los derechos de las imágenes, fuentes y músicas que incorpores.
Sí. El autor indica que funciona con Cursor, Codex y otros agentes que admiten skills en Markdown. Al instalar con la CLI skills puedes elegir en qué agentes copiarla.
El flujo principal de diseño, renderizado y exportación es local y no necesita claves de API. Solo las funciones opcionales en la nube envían datos fuera, con tus propias claves y tras pedirte confirmación.
Con npx skills remove huashu-design, o borrando la carpeta de la skill dentro del directorio de skills de tu agente.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.