Design Tools on KnightLi Blog

De PPT a prototipos: casos de uso de Guizang PPT Skill y Huashu Design

Sat, 09 May 2026 08:34:23 +0800

Hay dos Agent Skills de diseño creadas por desarrolladores chinos que vale la pena mirar en conjunto: guizang-ppt-skill, de Guizang, y huashu-design, de Huashu.

No son “herramientas de diseño” en el sentido tradicional. En realidad convierten un proceso de diseño, preferencias estéticas, listas de comprobación y plantillas de ingeniería en Skills que un Agent puede ejecutar. No abres una UI para arrastrar elementos poco a poco; entregas el requisito a un Agent como Claude Code, Codex o Cursor, y dejas que genere HTML, PPT, animaciones o prototipos siguiendo un flujo fijo.

El valor de estos proyectos no está en dejar que la IA improvise, sino en convertir “cómo hacer que esto no se vea mal” en un proceso.

guizang-ppt-skill: enfocado en PPT web con estilo de revista

guizang-ppt-skill, de Guizang, tiene una posición muy clara: genera PPT en HTML de archivo único con paginación horizontal, y una base visual de “revista digital x tinta electrónica”. Se parece más a un sistema de maquetación para charlas que a un framework de diseño general.

El README del repositorio enumera estas capacidades principales:

Salida HTML de archivo único, sin necesidad de build ni servidor. Se abre directamente en el navegador.
Paginación horizontal, con soporte para teclado, rueda del ratón, deslizamiento táctil, puntos inferiores e índice con ESC.
5 paletas temáticas predefinidas, incluidas Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper y Dune.
10 layouts de página, incluidos portada de apertura, separador de sección, póster de datos con número grande, texto a la izquierda e imagen a la derecha, cuadrícula de imágenes, Pipeline, pregunta de suspense, cita grande, comparación Before/After y composición mixta de texto e imagen.
Plantillas integradas, notas de componentes, esqueletos de layout, configuración de tema y listas de comprobación de calidad.

Sirve para presentaciones presenciales, charlas internas de industria, eventos privados, lanzamientos de productos de IA, demo days y decks con un estilo personal fuerte. No encaja tan bien con grandes tablas de datos, materiales de formación o edición colaborativa entre varias personas.

Este proyecto toma una buena decisión de alcance: no intenta cubrir todos los escenarios de diseño, sino que estrecha el foco a “PPT con estilo de revista”. Los colores de tema se eligen desde presets y los layouts tienen esqueletos claros. Eso reduce la probabilidad de que el Agent se desvíe.

Si a menudo necesitas convertir opiniones, observaciones de industria o contenido de lanzamiento de producto en un deck de presentación, puede ser muy práctico.

El comando de instalación también es directo:

`1`	`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill`

huashu-design: un flujo de diseño HTML-native más completo

huashu-design, de Huashu, cubre un terreno más amplio. Su objetivo no es solo hacer PPT, sino tratar HTML como un lienzo de diseño nativo y usar un Agent para generar activos de diseño entregables.

El README del repositorio enumera estas capacidades:

Prototipos clicables de App o Web.
Diapositivas HTML y exportación a PPTX editable.
Animaciones de lanzamiento de producto, MP4, GIF y versiones con música.
Comparación en paralelo de varias direcciones de diseño.
Infografías, visualización de datos y exportación a PDF, PNG y SVG.
Revisión experta en 5 dimensiones, incluidas consistencia filosófica, jerarquía visual, calidad de ejecución, funcionalidad e innovación.

La idea central es que el Agent entienda primero la marca y los materiales, y después produzca diseño de alta fidelidad. El proyecto enfatiza el Core Asset Protocol: cuando se trabaja con una marca concreta, primero hay que confirmar logo, imágenes de producto, capturas de UI, paleta de colores, tipografías y guía de marca, en lugar de adivinar de memoria.

Esto importa. Muchos diseños generados por IA parecen “diseño”, pero no parecen pertenecer a un producto o una marca real. huashu-design intenta resolver ese problema por adelantado: primero encontrar activos reales, luego diseñar.

El comando de instalación es:

`1`	`npx skills add alchaincyf/huashu-design`

Encaja mejor con quienes quieren completar una entrega de diseño más amplia desde la terminal: prototipos de producto, animaciones de lanzamiento, presentaciones, infografías y revisiones de diseño pueden procesarse dentro de un único flujo de trabajo de Agent.

La mayor diferencia entre ambos

En pocas palabras, guizang-ppt-skill es un generador de decks de presentación más estrecho y más estable; huashu-design es un sistema de diseño HTML-native más amplio y completo.

Si miramos solo PPT:

guizang-ppt-skill enfatiza más la sensación de revista, el ritmo, la maquetación y la presentación de archivo único en navegador.
huashu-design enfatiza más la capacidad de diseño general, PPTX editable, activos de marca, rutas de exportación y flujo de revisión.

Si miramos la capacidad de diseño general:

guizang-ppt-skill tiene límites más claros y sirve para crear rápido una presentación horizontal con estilo.
huashu-design es más integral y sirve para descomponer una tarea de diseño de producto o marca en prototipos, animaciones, diapositivas e infografías.

Estos dos proyectos también representan dos formas distintas de escribir Skills. El primero se parece a un conjunto muy concentrado de plantillas y restricciones estéticas; el segundo se parece al manual de trabajo de un pequeño equipo de diseño.

Por qué este tipo de Skill importa

Un problema común de los Agents es que “pueden hacerlo, pero no de forma estable”. La misma petición a veces produce una salida muy buena, y otras veces se desliza hacia gradientes morados, tarjetas redondeadas, iconos falsos y un montón de frases vacías que suenan sofisticadas.

El sentido de una Skill es añadir estabilidad. Fija cosas como:

Plantillas reutilizables.
Listas de comprobación ejecutables.
Preferencias estéticas claras.
Reglas para evitar errores comunes.
Formatos de salida y flujos de validación.
Cuándo hacer preguntas y cuándo empezar directamente.

Esto es mucho más fiable que escribir simplemente “hazlo más premium”.

Esto es especialmente cierto en tareas de diseño. La estética no se puede reproducir de forma estable con una sola frase de prompt. Lo que realmente ayuda es el proceso: confirmar materiales, definir una dirección, montar la estructura, trabajar la parte visual y revisar la salida. Cuando ese proceso se escribe como Skill, el Agent se parece más a un ejecutor colaborativo que a un generador de imágenes de una sola vez.

Recomendaciones de uso

Si solo quieres convertir un tema en una charla presencial o un deck para compartir, prueba primero guizang-ppt-skill. Su frontera de salida es estrecha, y el HTML de archivo único facilita distribuirlo y previsualizarlo.

Si quieres que un Agent asuma una tarea de diseño más completa, como prototipos de App, animaciones de lanzamiento, diapositivas con marca, PPTX exportable o infografías, mira primero huashu-design. Su flujo es más largo y encaja con tareas que necesitan varias rondas de iteración y exportación de entregables.

Si ya estás escribiendo tu propia Skill para Codex o Claude Code, ambos proyectos merecen estudio:

Para aprender “cómo estabilizar un escenario estrecho”, mira guizang-ppt-skill.
Para aprender “cómo dividir un flujo complejo en protocolos ejecutables”, mira huashu-design.

Resumen

Lo que tienen en común los proyectos de Guizang y Huashu es que ambos convierten la “capacidad de diseño” de un prompt único en un proceso repetible.

guizang-ppt-skill se centra en PPT HTML con estilo de revista y encaja con presentaciones muy estilizadas. huashu-design se centra en un sistema de diseño HTML-native que cubre prototipos, animaciones, diapositivas, infografías y revisión. El problema que resuelven no es “si la IA puede generar diseño”, sino “si la IA puede generar diseño entregable siguiendo un método estable”.

Esto podría convertirse en una categoría importante de proyectos open source dentro del ecosistema de herramientas Agent: no solo plantillas de código, sino experiencia humana, estética y métodos de trabajo empaquetados como Skills.

Enlaces de referencia:

Cómo dibujar líneas discontinuas, flechas, curvas y cambiar el tamaño del lienzo en AI

Fri, 08 May 2026 09:18:53 +0800

Aquí AI se refiere a software común de diseño vectorial, no a generación de imágenes con inteligencia artificial.

Muchas personas que empiezan con software AI buscan las mismas preguntas: cómo dibujar líneas discontinuas, cómo dibujar flechas, cómo dibujar curvas y cómo cambiar el tamaño del lienzo. Son operaciones básicas, pero sus entradas están repartidas entre trazo, herramienta pluma, herramienta de línea y herramienta de mesa de trabajo.

Este texto las organiza en un orden práctico.

Cómo dibujar una línea discontinua en AI

En software AI, una línea discontinua no suele ser una herramienta separada. Se configura desde el panel de trazo.

Pasos:

Usa la herramienta de línea, herramienta pluma o herramienta de forma para dibujar una línea o ruta.
Selecciona esa línea.
Abre Ventana -> Trazo.
Marca Línea discontinua en el panel de trazo.
Ajusta los valores de guion e intervalo.

Configuración común:

Guion: longitud de cada segmento visible.
Intervalo: espacio entre segmentos.
Grosor de trazo: controla el ancho de la línea.

Para una línea discontinua uniforme, prueba:

1
2

Guion: 8
Intervalo: 8

Para una línea de puntos, cambia el extremo del trazo a redondo y usa un guion muy pequeño:

1
2
3

Guion: 0
Intervalo: 8
Extremo: redondo

Así se verá más como una fila de puntos.

Qué hacer si la línea discontinua no aparece

Si marcas línea discontinua y no ves cambios, revisa:

Si el objeto tiene color de trazo.
Si el grosor de trazo es demasiado pequeño.
Si seleccionaste el objeto correcto.
Si los valores de guion e intervalo son demasiado bajos.
Si el objeto solo tiene relleno y no trazo.

Muchos problemas de líneas son simplemente “el objeto tiene ruta, pero no tiene trazo”.

Cómo dibujar una flecha en AI

Las flechas tampoco suelen dibujarse como un objeto separado. Se agregan como estilo de trazo sobre una ruta.

Pasos:

Dibuja una línea recta con la herramienta de línea.
Selecciona la línea.
Abre Ventana -> Trazo.
Busca Flechas en la parte inferior del panel.
Elige una flecha para el inicio o el final.
Ajusta la escala de la flecha.

Si la flecha queda al revés, puedes:

Cambiarla del inicio al final en el panel de trazo.
Usar un comando para invertir la dirección de la ruta.

Lo más simple es dibujar la línea de nuevo: arrastra desde la cola hacia la punta. El punto final será la dirección de la flecha.

Cómo dibujar una flecha de doble punta

Una flecha de doble punta solo necesita flechas tanto al inicio como al final.

Pasos:

Selecciona la línea.
Abre el panel de trazo.
Elige una flecha en la primera posición.
Elige otra flecha en la segunda posición.

Si las flechas son demasiado grandes o pequeñas, ajusta Escala.

En general, el tamaño de la flecha debe coincidir con el grosor de línea. Una línea fina con una flecha enorme se ve desequilibrada; una línea gruesa con una flecha diminuta se lee mal.

Cómo dibujar una curva en AI

La forma más común de dibujar curvas es usar la herramienta pluma.

Método básico:

Selecciona la herramienta pluma.
Haz clic una vez en el lienzo para crear el primer punto de ancla.
En la segunda posición, mantén presionado y arrastra, no hagas solo clic.
Al arrastrar aparecen manejadores de dirección, y se crea la curva.
Sigue haciendo clic y arrastrando para formar una curva continua.

La idea clave es: para líneas rectas, haz clic; para curvas, haz clic y arrastra.

Muchos principiantes no logran dibujar curvas porque solo hacen clic y nunca arrastran los manejadores.

Cómo suavizar una curva

Después de dibujar una curva, puedes ajustarla con estas herramientas:

Selección directa: selecciona puntos de ancla y mueve puntos o manejadores.
Herramienta de punto de ancla: cambia entre esquinas y puntos suaves.
Herramienta suavizar: hace la ruta más fluida.
Herramienta curvatura: crea curvas suaves de forma más simple.

Si solo quieres una curva natural, la herramienta curvatura es más amigable para principiantes que la pluma. No requiere arrastrar muchos manejadores a mano; basta con hacer clic en algunos puntos.

Dibujar curvas con la herramienta curvatura

La herramienta curvatura funciona más como “pon puntos y la curva los sigue”.

Pasos:

Selecciona la herramienta curvatura.
Haz clic en el primer punto del lienzo.
Haz clic en el segundo punto.
Haz clic en un tercer punto, y el software creará la curva automáticamente.
Arrastra puntos existentes para cambiar la forma.

Si quieres una esquina, haz doble clic en un punto para alternar entre punto suave y punto de esquina.

Para principiantes, suele ser más fácil crear la forma general con curvatura y luego ajustar con selección directa.

Cómo cambiar el tamaño del lienzo en AI

En AI, “tamaño del lienzo” normalmente significa tamaño de mesa de trabajo. Si quieres cambiar el rango de exportación, tamaño de diseño o tamaño de página, cambia la mesa de trabajo.

Pasos:

Selecciona la herramienta mesa de trabajo en la barra lateral.
Haz clic en la mesa de trabajo actual.
Escribe ancho y alto en la barra de propiedades superior.
También puedes arrastrar los bordes manualmente.

Ejemplos de tamaños comunes:

Portada WeChat: 900 x 383 px
Portada Xiaohongshu: 1242 x 1660 px
Cuadrado Instagram: 1080 x 1080 px
Papel A4: 210 x 297 mm

Si tu unidad no es px, cambia la unidad en el documento o panel de propiedades.

Cambiar tamaño desde el panel de mesas de trabajo

Además de usar la herramienta, también puedes gestionar varias mesas desde el panel correspondiente.

Pasos:

Abre Ventana -> Mesas de trabajo.
Selecciona la mesa que quieres modificar.
Abre las opciones de mesa de trabajo.
Escribe ancho, alto y posición.

Si un archivo contiene varias páginas, tamaños de póster o versiones de exportación, el panel es más claro que arrastrar a mano.

¿Cambiar la mesa de trabajo afecta los gráficos?

Cambiar solo el tamaño de la mesa normalmente no escala automáticamente los gráficos dentro.

Eso significa:

Si la mesa se agranda, los gráficos mantienen su tamaño.
Si la mesa se reduce, los gráficos también mantienen su tamaño, pero pueden quedar fuera del área.
Al exportar, normalmente solo se exporta lo que está dentro de la mesa.

Si quieres que los gráficos escalen junto con la mesa, selecciónalos y escálalos manualmente, o usa la herramienta de escala o el panel de transformación.

Entradas y atajos útiles

Entradas útiles:

Panel de trazo: Ventana -> Trazo
Panel de mesas de trabajo: Ventana -> Mesas de trabajo
Herramienta mesa de trabajo: Shift + O
Herramienta pluma: P
Selección directa: A

Distintas versiones pueden tener interfaces algo diferentes, pero la lógica central es la misma: líneas discontinuas y flechas están en trazo, curvas usan herramientas de ruta, y el tamaño del lienzo se cambia mediante mesas de trabajo.

Resumen

Para dibujar líneas discontinuas en AI: selecciona una ruta, marca Línea discontinua en el panel Trazo y ajusta guion e intervalo.

Para dibujar flechas en AI: dibuja una línea y agrega una flecha al inicio o al final desde el panel Trazo.

Para dibujar curvas en AI: usa la herramienta pluma haciendo clic y arrastrando, o usa la herramienta curvatura para curvas suaves más fáciles.

Para cambiar el tamaño del lienzo en AI: usa la herramienta mesa de trabajo o el panel Mesas de trabajo para modificar ancho y alto.

Con estas operaciones, la mayoría de líneas básicas, diagramas de flujo, gráficos de anotación y ajustes de tamaño de página se vuelven manejables.