Huashu Design: obtén un diseño HTML entregable con una frase

Para quién

Para quien quiere, en el asistente, obtener un diseño entregable con una frase. Texto oficial: escribe una frase en tu agent y recibe un diseño que puedas entregar. El título del repositorio lo sitúa como un skill de diseño nativo HTML que cubre prototipos de alta fidelidad, diapositivas y animación, más veinte filosofías de diseño, una comprobación de cinco dimensiones y exportación MP4.

Encaja mejor quien ya tiene un encargo de una frase (hacer un prototipo clicable o un juego de diapositivas presentable) y puede ejecutar npx skills add en esta máquina. No encaja si solo quieres hablarlo y no vas a comprobar si el directorio de instalación está completo.

Antes de empezar hay que poder ejecutar el comando oficial de instalación. El texto oficial dice que es común entre agents y que varios entornos pueden instalarlo; no leas esa lista como un alcance mutuamente excluyente.

Completa el primer intento en 3 minutos

Sigue solo la ruta principal de npx. La primera vez, verifica que la instalación está completa antes de decidir si generar archivos.

Requisitos previos: esta máquina ya tiene npm/npx. En el primer intento no exportes MP4 ni escribas archivos en una ruta no confirmada.

Ubicación de instalación: ejecuta en el espacio de trabajo:

npx skills add alchaincyf/huashu-design

Tras instalar, mira el directorio de instalación como dice el texto original, por ejemplo ~/.claude/skills/huashu-design/. Si solo está SKILL.md y faltan esos subdirectorios, el CLI skills es demasiado antiguo (≤1.5.15 tiene el defecto de sincronizar solo un archivo; corregido en 1.5.19). Actualiza el CLI primero y luego sigue. No completes los subdirectorios a mano.

Repositorio oficial:

https://github.com/alchaincyf/huashu-design

Disparador de bajo riesgo: cuando el directorio esté completo, pide al asistente con una frase que prepare una comprobación de prototipo interactivo, en vez de exportar vídeo primero. La entrega original de un prototipo interactivo es: HTML de un solo archivo, iPhone bezel real, clicable, verificado con Playwright, unos 10–15 minutos. Antes de generar, confirma en qué ruta caerá el HTML; después, ábrelo en local y termina la verificación con Playwright antes de tratarlo como entregable.

Señal de éxito: el directorio de instalación no contiene solo SKILL.md y aún no has escrito archivos de exportación no confirmados.

Casos de uso

Caso 1: prototipo interactivo App / Web clicable. Se entrega como HTML de un solo archivo, con iPhone bezel real, clicable y verificado con Playwright. Para quien ya tiene un flujo de una pantalla y quiere ver primero un prototipo de alta fidelidad. Confirma la ruta de salida y luego genera; no lo envíes a nadie hasta que pase la verificación.

Caso 2: diapositivas de presentación. Texto original: HTML deck (presentar en el navegador) más PPTX editable (se conservan los cuadros de texto), unos 15–25 minutos. Para quien ya tiene un esquema y necesita algo que se pueda presentar y seguir editando. El PPTX escribe un archivo; confirma la ubicación de guardado antes de generar; después ábrelo en local, revisa los cuadros de texto y luego distribuye.

Límites de uso

La animación de línea de tiempo exporta MP4 (25fps / 60fps interpolación), GIF (palette optimizado) y BGM, unos 8–12 minutos. Los archivos son más grandes; no lo uses como primer intento.

El único comando de instalación es npx skills add alchaincyf/huashu-design. Si el directorio está incompleto, el texto original solo apunta a un problema de versión del CLI; no inventes otros instaladores.

Las veinte filosofías de diseño y la comprobación de cinco dimensiones solo aparecen en el título del repositorio; el cuerpo citado en esta página no lista los ítems. No inventes nombres de filosofías ni una lista de comprobación.

No inventes rutas de skill que no aparecen, y no leas «se puede instalar en todos» como si los pasos de cada entorno ya estuvieran escritos.