Ir a la guía de uso
huashu-designpor alchaincyf

Huashu Design Skill.

Un skill de Claude Code y Codex para diseño UI: prototipos HTML de alta fidelidad, presentaciones, animación y visualizaciones; comienza con tres borradores.

  • Web y UI
  • HTML
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由:一张表定入口 ## 核心原则 #0 · 事实验证先于假设(优先级最高,凌驾所有其他流程) ## 核心哲学(优先级从高到低) ## 设计方向顾问(Fallback 模式)
Encabezados de sección y metadatos leídos del archivo fuente el 14 de septiembre de 2026 · 33.602 caracteres en total

01 Qué hace

Qué hace la skill huashu-design 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

Huashu-Design convierte a un agente en un estudio de diseño basado en HTML para prototipos de alta fidelidad, presentaciones de diapositivas, demos de movimiento y visualizaciones. Antes de cualquier trabajo visual nuevo, obliga a crear tres borradores de dirección diferenciados (incluso cuando se especifica un estilo o una marca) para que el usuario elija entre opciones realmente renderizadas en lugar de una única respuesta decidida por la IA.

Ejecuta un protocolo de activos de marca (logotipos, fotos de producto, valores de color reales) en lugar de adivinar, verifica las afirmaciones factuales sobre productos mediante WebSearch antes de diseñar y aplica reglas explícitas contra el aspecto genérico de IA en color, iconos, tarjetas e imágenes. No está pensado para aplicaciones web de producción ni sistemas gestionados por backend.

Qué produce

  • Archivos de diseño HTML con nombres descriptivos, versionados cuando se revisan a fondo
  • Presentación HTML de varias páginas con un muro de resumen, exportada automáticamente a PDF y opcionalmente a PPTX editable
  • Exportaciones de animación en MP4 con BGM y SFX por defecto
  • Archivos de control como brand-spec.md y direction-approved.md que documentan los activos y la dirección elegida por el usuario
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Verificar los hechos primero

    Antes de diseñar cualquier cosa vinculada a un producto, tecnología o evento real, el agente debe usar WebSearch para comprobar su existencia, estado de lanzamiento, versión y especificaciones, en lugar de basarse en su memoria de entrenamiento.

  2. 02
    Encaminar la tarea

    Una tabla de señales asocia las pistas de la tarea (nombre de marca, diapositiva/PPT, animación/exportación, app/prototipo iOS, crítica) con el punto de entrada y el archivo de referencia correctos antes de comenzar el trabajo.

  3. 03
    Ejecutar el Fallback de tres direcciones

    Cualquier tarea que produzca nuevos elementos visuales pasa por las Fases 1-6: aclarar las necesidades, reformular el briefing, fijar una especificación de diseño, obtener imágenes reales, generar tres lógicas de diseño en paralelo y, después, esperar a que el usuario elija.

  4. 04
    Responder las cinco preguntas de forma

    Para cada página o toma, el agente debe responder el rol narrativo, la distancia de visualización, la temperatura visual, la capacidad de contenido y el motivo visual antes de construir el sistema de diseño.

  5. 05
    Exportar con verificación

    Las animaciones se renderizan en MP4 con BGM y SFX por defecto y se verifican con ffprobe para comprobar la presencia de una pista de audio; las presentaciones se exportan automáticamente a PDF y, opcionalmente, a PPTX editable.

02 Encuentra tu caso de uso

Cuándo usar la skill huashu-design

Usa el skill huashu-design en Claude Code o Codex cuando el trabajo sea diseño UI de este tipo. El alcance y los límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

  • Maquetas de producto interactivas de alta fidelidad que el usuario puede recorrer haciendo clic y sentir el flujo
  • Presentaciones de diapositivas en HTML de 1920x1080 pensadas para funcionar como un PPT
  • Motion design basado en línea de tiempo, usado como material de video o demos conceptuales
  • Infografías de calidad de impresión y visualizaciones basadas en datos
  • Comparar varias direcciones de diseño en paralelo o ajustar con Tweaks

Conozca los límites

  • Las aplicaciones o sistemas web de nivel producción que necesitan un backend quedan fuera del alcance
  • Los sitios web de SEO y los sistemas dinámicos basados en backend no pasan por este skill

Qué proporcionar

  • Checklist de activos de marcaLogo, imágenes de producto, capturas de pantalla de la UI, paleta de colores, tipografías y zonas prohibidas, solicitados en un solo lote antes de buscar en canales oficiales.
  • Referencia de estilo o marcaUna URL de un sitio web que le guste, una captura de pantalla, o un producto cuya sensación deba igualarse; si no existe ninguna, el agente continúa con un supuesto declarado.
  • Sistema de diseño o código base existenteEl agente primero comprueba si existe un sistema de diseño, un UI kit, un código base o un archivo de Figma antes de hacer cualquier diseño de alta fidelidad desde cero.

03 Dentro del skill

Reglas que el skill huashu-design le 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. La puerta de tres direcciones es 100% obligatoria

    Toda tarea que produzca nuevos elementos visuales debe mostrar tres borradores de dirección diferenciados antes de la ejecución, incluso cuando el usuario especifique un estilo o marca; solo aplican tres excepciones estrechas.

  2. El logo es un activo obligatorio

    Si un diseño muestra un producto o nombre de marca reconocible, obtener su logo oficial es obligatorio, no opcional, y se deben incluir tantos logos como productos aparezcan.

  3. Marcador de posición en lugar de una mala ejecución

    A los iconos faltantes se les asigna un bloque gris con etiqueta de texto en lugar de un SVG mal dibujado; a los datos faltantes se les añade un comentario honesto, nunca cifras inventadas.

  4. Sin contenido de relleno

    Cada elemento debe justificar su lugar; el espacio en blanco se resuelve con composición, no inventando estadísticas, iconos en cada encabezado o gradientes por todas partes.

  5. Evitar patrones identificados como AI-slop

    Los gradientes morados, los iconos con emoji, las tarjetas redondeadas con un acento de borde izquierdo de color y las personas o rostros dibujados por IA en SVG se marcan como patrones visuales de IA predeterminados que deben evitarse, salvo que la marca misma los use.

  6. Restricciones de alcance de React

    Nunca nombre un objeto de estilo const styles = {...} porque varios componentes entrarán en conflicto; los componentes deben exportarse entre etiquetas script mediante Object.assign(window, {...}).

  7. Las exportaciones de animación tienen audio por defecto

    Por defecto, el HTML de animación se entrega como un MP4 con música de fondo y efectos de sonido; una versión sin audio se considera un entregable inacabado a menos que el usuario pida explícitamente que no haya audio.

  8. Las decks usan por defecto varios archivos con un muro de resumen (Overview Wall)

    Los decks de diapositivas usan por defecto varios archivos HTML más assets/deck_index.html como resumen; la arquitectura de un solo archivo solo es válida para pitches mínimos de ≤5 páginas que explícitamente no necesitan un resumen.

04 Ponlo a trabajar

Instalar huashu-design 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 huashu-design a Claude Code, Codex o tu agente

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

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

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

Dale al skill una primera tarea de diseño de interfaz

Adapta esta instrucción con tu propio contenido y restricciones, luego ejecútala en Claude Code o Codex.

Example prompt
做个咖啡主题的 PPT

Fuente: ejemplo de SKILL.md (textual).

Revisa el primer resultado

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

  • Tomar una captura de pantalla con Playwright y revisar errores de consola antes de entregar
  • Revisar personalmente el resultado en un navegador antes de la entrega, ya que el código escrito por IA suele tener errores de interacción
  • Ejecutar tres pruebas de clic con Playwright en prototipos de app (vista de detalle, hotspot clave, cambio de pestaña) sin ningún pageerror
  • Verificar el mínimo de legibilidad: texto de cuerpo de al menos 14px, etiquetas de al menos 12px, contraste de al menos 4.5:1

En OpenDesign importe huashu-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego 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.

Archivo de skill
SKILL.md Checksum de contenido registrado en verificación; commit a790f70
License
MIT Desde LICENSE.
Estrellas del repositorio
24.121 Instantánea de GitHub tomada el 14 de septiembre de 2026 para todo el repositorio alchaincyf/huashu-design. No es una calificación ni un recuento de uso de huashu-design.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

  1. 你是谁Presenta al agente como un estudio que desempeña seis roles: director de arte, investigador de marca, diseñador visual/de movimiento, ingeniero, redactor.
  2. Requisitos previosIndica qué tipos de resultado cubre el skill y que las aplicaciones web de producción quedan excluidas.
  3. 任务路由:一张表定入口Tabla que relaciona las señales de la tarea con el punto de entrada y el archivo de referencia correctos.
  4. 核心原则 #0 · 事实验证先于假设Exige verificación con WebSearch de los datos del producto antes de iniciar cualquier trabajo de diseño.
  5. 核心哲学(优先级从高到低)Seis principios ordenados: usar el contexto existente, alinearse antes de construir, ofrecer variaciones, preferir marcadores de posición, evitar relleno, evitar el «AI slop».
  6. 设计方向顾问(Fallback 模式)Define el proceso obligatorio de siete fases que produce tres direcciones de diseño paralelas antes de la ejecución.
  7. App / iOS 原型专属守则(速查版)Reglas específicas y de mayor prioridad para prototipos de app móvil, que cubren arquitectura, imágenes, marcos de dispositivo y pruebas de clic.
  8. 工作流程Flujo de trabajo estándar numerado con puntos de control, protocolo de archivo de compuerta y plantillas de preguntas.
  9. 异常处理Acciones de respaldo predefinidas para solicitudes vagas, preguntas rechazadas, contexto en conflicto y plazos ajustados.
  10. 技术红线(必读 references/react-setup.md)Restricciones de implementación no negociables de React/Babel y Stage/Sprite.
  11. Starter Components(assets/下)Enumera los componentes prediseñados (deck_index.html, animations.jsx, ios_frame.jsx, etc.) y cuándo usar cada uno.
  12. 产出要求Convenciones de nomenclatura, control de versiones, ubicación de archivos y requisitos finales de verificación en navegador/Playwright.
La descripción propia del Skill
花叔Design: crea prototipos de alta fidelidad, diapositivas, animaciones, visualizaciones y revisiones de expertos en HTML. Para cualquier diseño nuevo, primero genera tres borradores iniciales para que el usuario elija (sin exenciones, incluso si se especifica estilo o marca); solo después ejecuta el diseño elegido. Palabras clave: prototipo, PPT, diapositivas, animación, estilo de diseño, revisión, página HTML, UI mockup, exportar MP4/GIF, hacer algo atractivo. No aplicable para Web Apps de producción o sistemas que requieren backend.

Descripción de encabezado extraída de SKILL.md. El archivo completo tiene aproximadamente 33.602 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill huashu-design

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Este skill solo funciona en Claude Code?

No, el skill se describe como independiente del agente y funciona en Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent o cualquier agente de skills basado en markdown, con un modo degradado documentado para runtimes más débiles sin generación de subagentes.

Huashu Design

Ejecuta huashu-design en una tarea de diseño de UI real.

Descarga OpenDesign, importa huashu-design desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

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