Visualize
Design-Handbuch zum Rendern von Inline-SVG/HTML/Chart.js-Visualisierungen im Open WebUI Chat
Funktioniert mit Setup
Was es kann
Ein Designsystem-Handbuch, das das Modell anweist, themenbewusste Inline-Visualisierungen – SVG-Diagramme, Chart.js-Diagramme, KPI-Streifen, interaktive Erklärungen – unter Verwendung eines festen viewBox, einer 9-stufigen Farbpalette und Flat-Design-Regeln zu erstellen. Es wird ausgelöst, wenn der Benutzer explizit darum bittet, etwas zu visualisieren, zu diagrammieren, zu zeichnen oder zu dashboarden. Rendering und Interaktivität (der visualize()-Tool-Aufruf, @@@VIZ-Marker, automatisch injizierte CSS/Klassen und sendPrompt/openLink-Brücken) erfordern das begleitende Open WebUI Python-Tool, das in einer Open WebUI-Instanz läuft.
Testbericht
Beide SKILL.md-Varianten und tool.py (alle HTTP 200) über die GitHub raw API abgerufen; tool.py ist ein 3796-zeiliges Open WebUI FastAPI-Tool (v2.2.0) – ein Sicherheits-Grep fand nur SRCDOC-Sicherheitskommentare, keine Exfiltration/curl|sh/eval-of-remote. Installation in einem temporären HOME verifiziert: SKILL.md landet unter ~/.claude/skills/visualize/SKILL.md, Frontmatter wird mit name+description geparst. Für OUTPUT habe ich zwei reale Dateien für "chart Q1-Q4 revenue" erstellt: viz_baseline.html (ohne Skill) verwendet einen blauen linearen GRADIENT, feste 500x300 px, hartcodierten #333 Text, 10px Labels, quadratische Balken; viz_skill.html (dem Handbuch folgend) verwendet flaches, solides Teal-400 #1D9E75 mit 0.85 Opazität, viewBox 0 0 680 270 responsive width:100%, theme --color-*-Variablen für hell/dunkel, einen 3-Karten-KPI-Metrikstreifen über dem Diagramm, .t/.ts/.th Label-Klassen und rx=4 abgerundete Balken. Konkrete, zitierbare Verbesserungen beim Authoring – aber ich konnte die Render-Pipeline (visualize()-Tool + iframe + injiziertes CSS) NICHT ausführen, da sie eine laufende Open WebUI-Instanz benötigt, daher sind Interaktivitäts-/Render-Ansprüche unbestätigt. Urteil "setup": Die Designanleitung funktioniert als Style-Guide, aber die Inline-Render-Funktion erfordert das Open WebUI Python-Tool, nicht Claude Code.
Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)
Installation
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. Befehle & Beispiel-Prompts
/visualizeDesign-Handbuch zum Rendern von Inline-SVG/HTML/Chart.js-Visualisierungen im Open WebUI Chat
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Visualize this dataset as an interactive chartDraw a diagram of this system architectureShow this data as a dashboard