Visualize
Manual de diseño para renderizar visuales SVG/HTML/Chart.js en línea en el chat de Open WebUI
Funciona con configuración
Qué hace
Un manual de sistema de diseño que instruye al modelo a crear visualizaciones en línea conscientes del tema — diagramas SVG, gráficos Chart.js, tiras de KPI, explicadores interactivos — utilizando un viewBox fijo, una paleta de colores de 9 rampas y reglas de diseño plano. Se activa cuando el usuario pide explícitamente visualizar, diagramar, graficar, dibujar o crear un dashboard de algo. La renderización y la interactividad (la llamada a la herramienta visualize(), marcadores @@@VIZ, CSS/clases auto-inyectadas y puentes sendPrompt/openLink) requieren la herramienta Open WebUI Python complementaria ejecutándose dentro de una instancia de Open WebUI.
Informe de la prueba
Ambas variantes de SKILL.md y tool.py (todas HTTP 200) obtenidas vía la API raw de GitHub; tool.py es una herramienta FastAPI de Open WebUI de 3796 líneas (v2.2.0) — un grep de seguridad encontró solo comentarios SRCDOC-safety, sin exfiltración/curl|sh/eval-of-remote. Instalación verificada en un HOME temporal: SKILL.md aterriza en ~/.claude/skills/visualize/SKILL.md, el frontmatter se analiza con name+description. Para OUTPUT, creé dos archivos reales para "chart Q1-Q4 revenue": viz_baseline.html (sin habilidad) usa un GRADIENT azul lineal, 500x300 px fijos, texto #333 codificado, etiquetas de 10px, barras cuadradas; viz_skill.html (siguiendo el manual) usa un teal-400 sólido plano #1D9E75 con 0.85 de opacidad, viewBox 0 0 680 270 responsive width:100%, variables de tema --color-* para claro/oscuro, una tira de métricas KPI de 3 tarjetas sobre el gráfico, clases de etiquetas .t/.ts/.th, y barras redondeadas rx=4. Mejora de autoría concreta y citable — pero NO pude ejecutar el pipeline de renderizado (herramienta visualize() + iframe + CSS inyectado) ya que necesita una instancia de Open WebUI en ejecución, por lo que las afirmaciones de interactividad/renderizado no están verificadas. Veredicto "setup": la guía de diseño funciona como una guía de estilo, pero la característica principal de renderizado en línea requiere la herramienta Open WebUI Python, no Claude Code.
Probado el: 2026-07-21 · Claude Code 2.x (agent harness)
Instalación
git clone --depth 1 https://github.com/Classic298/open-webui-plugins.git /tmp/visualize-src
mkdir -p ~/.claude/skills
cp -R /tmp/visualize-src/inline-visualizer-v2 ~/.claude/skills/visualize
# Places the handbook at ~/.claude/skills/visualize/SKILL.md (v2, name: "visualize").
# There is also a v1 at inline-visualizer/ (name: "visualize", tool: render_visualization).
#
# IMPORTANT — this is an Open WebUI Tool, not a native Claude Code skill.
# The SKILL.md is only the DESIGN HANDBOOK. The actual rendering needs the
# companion FastAPI tool (inline-visualizer-v2/tool.py, v2.2.0,
# required_open_webui_version 0.10.2) installed in a running Open WebUI instance,
# with "iframe Sandbox Allow Same Origin" enabled (Settings -> Interface).
# In Open WebUI the model calls view_skill("visualize") to read this handbook,
# then visualize(title=...) + @@@VIZ-START/@@@VIZ-END markers to render.
# In plain Claude Code none of that runtime exists (visualize(), sendPrompt,
# openLink, copyText, the auto-injected --color-* vars and .t/.c-teal classes
# all no-op) — you get a design style-guide only. Comandos y prompts de ejemplo
/visualizeManual de diseño para renderizar visuales SVG/HTML/Chart.js en línea en el chat de Open WebUI
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Visualize this dataset as an interactive chartDraw a diagram of this system architectureShow this data as a dashboard