Ir a la guía de uso
guizang-ppt-skillpor op7418

Guizang PPT Skill Skill.

Una skill de Claude Code y Codex para PPT y presentaciones: decks HTML horizontales de un solo archivo en estilo magazine o suizo, con vista de orador y sincronización.

  • Presentations
  • Diapositivas HTML
op7418/guizang-ppt-skill · SKILL.mdSKILL.md
--- name: guizang-ppt-skill description: 生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格:① "电子杂志 × 电子墨水"(衬线 + 流体背景 + 暖色) ② "瑞士国际主义"(无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮)。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。 --- ## 这个 Skill 做什么 ## 何时使用 ## 工作流 ## 资源文件导览 ## 核心设计原则(哲学) ## 参考作品
Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 25.146 caracteres en total

01 Qué hace

Qué hace el Skill guizang-ppt-skill en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Genera un mazo de páginas web con desplazamiento horizontal como un único archivo HTML autocontenido, con fondos hero WebGL, vista de presentador, sincronización con la pantalla del público, notas del ponente, divisores de capítulo, páginas de datos con números grandes y cuadrículas de imágenes. Dos direcciones visuales mutuamente excluyentes: A, Revista Electrónica x E-ink (títulos serif, fondo fluido, tonos cálidos) y B, Estilo Suizo Internacional (todo sans-serif, cuadrícula de 12 columnas, fondos de puntos de cuadrícula, un acento de alto contraste elegido entre IKB, amarillo limón, verde limón o naranja de seguridad).

Las páginas de cuerpo del estilo B deben usar uno de los 22 layouts registrados, S01-S22, etiquetados con data-layout. Para diseñadores y desarrolladores que producen charlas, lanzamientos y demo days y quieren tener el mazo terminado en una sola pasada, sin herramienta de diapositivas.

Qué produce

  • Un mazo HTML de un solo archivo con paso de página horizontal, entregado como un documento autocontenido con CSS, shader WebGL, JS de paginación y modo presentador ya conectados.
  • Un registro SPEAKER_NOTES generado en el mismo orden que los valores data-slide-id de las diapositivas, que contiene los campos propósito, discurso, transición y, opcionalmente, puesta en escena.
  • El esquema, guardado como un archivo markdown junto al mazo para que las iteraciones posteriores tengan algo sobre lo que construir.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Comprobar Primero las Actualizaciones Upstream

    El skill obtiene el repositorio y calcula cuánto está atrasado HEAD respecto a upstream, y luego pregunta al usuario antes de traer cualquier cambio.

  2. 02
    Acordar Siete Preguntas Antes de Escribir

    Primero se decide el estilo A o B, luego audiencia y entorno, duración, material fuente, imágenes o capturas de pantalla, paleta del tema y restricciones estrictas.

  3. 03
    Copiar la Plantilla Elegida

    Copiar assets/template.html para el estilo A o assets/template-swiss.html para el estilo B a la ubicación del mazo y crear la carpeta de imágenes hermana.

  4. 04
    Revisar los Nombres de Clase Antes de Empezar

    Leer el bloque de estilos de la plantilla antes de escribir cualquier marcado de diapositiva y verificar que cada clase usada esté definida allí.

  5. 05
    Planificar el Ritmo del Tema Antes de Elegir los Layouts

    Anotar la clase de tema de cada página (hero dark, hero light, light, dark) y alinearla antes de elegir los layouts.

  6. 06
    Autoverificar con la Lista de Comprobación

    Después de la generación, abrir references/checklist.md y revisarlo elemento por elemento, luego ejecutar los validadores y la vista previa en el navegador.

02 Encuentra tu caso de uso

Cuándo usar el Skill guizang-ppt-skill

Use el skill guizang-ppt-skill en Claude Code o Codex cuando el trabajo sea PPT y presentaciones de este tipo. La idoneidad y los límites a continuación se toman del propio archivo del skill.

Buen caso de uso

  • Sesiones de difusión offline, charlas internas del sector y salones privados donde el ponente quiere un mazo con presencia en una pantalla grande.
  • Lanzamientos de productos de IA y demo days que necesitan un mazo terminado y listo para presentar de inmediato.
  • Diapositivas web que deben quedar terminadas en una sola pasada, sin una herramienta separada de paginación o presentación.
  • Contenido construido a partir de grandes cantidades de números KPI, hojas de ruta y procesos, donde el layout Data Hero del estilo B es la opción natural.

Conozca los límites

  • Las páginas con tablas de datos extensas o gráficos apilados se envían en su lugar a una herramienta de diapositivas convencional.
  • Material didáctico de formación, porque la densidad de información de este formato es demasiado baja.
  • Trabajo que varias personas necesitan editar juntas, ya que el resultado es HTML estático.
  • Inventar nuevas estructuras de cuerpo más allá de los 22 layouts registrados, como P23/P24, Swiss Image Split o Evidence Grid, salvo que el usuario pida explícitamente un layout experimental.

Qué proporcionar

  • Un tema, o material de origenDocumentos, datos, una presentación antigua o enlaces a artículos permiten que el skill trabaje sobre material real; con solo una idea vaga, ayuda a construir el esquema mediante la plantilla de arco narrativo.
  • La elección de estilo, pedida primeroEl estilo A o B decide qué plantilla, layouts y archivo de temas se usa, por lo que es la primera pregunta de aclaración obligatoria.
  • Audiencia y contextoSi se trata de una charla interna del sector, un lanzamiento comercial, un demo day o un salón privado, esto determina el registro del lenguaje y la profundidad del contenido.
  • Imágenes y capturas de pantalla, con nomenclatura y especificacionesLas imágenes van en la carpeta images/ junto a index.html y siguen la convención de nomenclatura de número de página más semántica, de modo que el orden de las páginas siga siendo legible.
  • Restricciones estrictasTodo lo que deba incluirse, como datos concretos, o que nunca deba aparecer, se recopila de antemano para evitar retrabajo.

03 Dentro del skill

Reglas que el skill guizang-ppt-skill Da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Nunca Mezclar los Dos Estilos

    Una presentación usa solo un estilo. El mismo nombre de clase se renderiza de forma completamente distinta en las dos plantillas, por lo que las clases de layout solo existen en su archivo de plantilla correspondiente.

  2. Paletas de Tema Fijas, Sin Hex Personalizado

    Solo se permiten los cinco presets ajustados a mano, elegidos de themes.md, y una misma presentación mantiene un único tema en todo momento.

  3. Cada Página Declara Su Tema

    Cada sección debe llevar uno de light, dark, hero light o hero dark, y un hero sin más no es suficiente.

  4. Las Páginas de Estilo B Deben Declarar un ID de Layout

    Las presentaciones de estilo suizo funcionan en modo bloqueado: las páginas de contenido usan únicamente los 22 diseños registrados y cada sección de diapositiva escribe data-layout="Sxx".

  5. Los Iconos Provienen de Lucide, No de SVG Dibujados a Mano

    Se usa el conjunto angular de Lucide mediante mark-up más lucide.createIcons(), en lugar de dibujar formas, y se evitan los emoji; el estilo B además mantiene todas las etiquetas de texto fuera del SVG y dentro de grids o leyendas HTML.

  6. Las Cuadrículas de Imágenes Usan Alturas de Viewport Fijas

    En las cuadrículas de imágenes del estilo A, use height:Nvh en lugar de aspect-ratio, lo cual descompone el layout.

  7. En las cuadrículas de imágenes del estilo A, se establece height:Nvh en lugar de aspect-ratio, que descompone el layout.

    Las Notas del Orador Se Basan en IDs de Página Estables

  8. Cada sección obtiene un data-slide-id único y estable, y el registro de notas se genera en el mismo orden. Las notas se almacenan por ID de página, nunca por índice de array o número de página.

    La Duración Determina el Número de Páginas

04 Ponlo a trabajar

Instalar guizang-ppt-skill en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar guizang-ppt-skill a Claude Code, Codex o su agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

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

Forma genérica de la CLI de skills para SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de PPT y presentaciones

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
帮我做一份 30 分钟左右的分享 deck,受众是公司内部的产品和工程同学,风格选 B 瑞士国际主义。素材是这份 [产品发布文档] 和 [几张 dashboard 截图],截图想保真放进 S22 的主图和 S15 的图片格。主题色用克莱因蓝 IKB,另外需要 20 页左右的页面计划和每页的讲稿备注。

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Ejecute el validador de decks Swiss antes de la entrega; realiza la comprobación estática de la estructura y, cuando Playwright se resuelve, mide los límites visibles renderizados, el espacio en blanco inferior, la línea de seguridad de navegación y el espaciado del título.

En OpenDesign guizang-ppt-skill viene integrado: Plugins → Skills, selecciónelo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
op7418
Archivo de skill
SKILL.md Suma de verificación del contenido registrada en la verificación; commit c91369c
License
AGPL-3.0 De LICENSE.
Estrellas del repositorio
26.246 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio op7418/guizang-ppt-skill. No es una calificación ni un recuento de uso de guizang-ppt-skill.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.
La descripción propia del Skill
"生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格:① "电子杂志 × 电子墨水"(衬线 + 流体背景 + 暖色) ② "瑞士国际主义"(无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮)。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。"

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 25.146 caracteres. Lea el archivo completo en GitHub.

Guizang PPT Skill

Ejecute guizang-ppt-skill en una tarea real de PPT y presentaciones de diapositivas.

El skill guizang-ppt-skill viene incluido en OpenDesign. Descargue la aplicación, seleccione el skill en Plugins → Skills, pegue el prompt anterior y lea el plan antes del resultado.

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

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows