Visualize
Manuale di design per il rendering di visualizzazioni SVG/HTML/Chart.js inline nella chat Open WebUI
Richiede configurazione
Cosa fa
Un manuale di sistema di design che istruisce il modello a creare visualizzazioni inline sensibili al tema — diagrammi SVG, grafici Chart.js, strisce KPI, spiegazioni interattive — usando un viewBox fisso, una palette di colori a 9 rampe e regole di flat-design. Si attiva quando l'utente chiede esplicitamente di visualizzare, diagrammare, graficare, disegnare o creare una dashboard. Il rendering e l'interattività (la chiamata allo strumento visualize(), i marcatori @@@VIZ, CSS/classi iniettati automaticamente e i bridge sendPrompt/openLink) richiedono lo strumento Python Open WebUI companion in esecuzione all'interno di un'istanza Open WebUI.
Rapporto di test
Entrambe le varianti di SKILL.md e tool.py recuperate (tutte HTTP 200) tramite l'API raw di GitHub; tool.py è uno strumento FastAPI Open WebUI di 3796 righe (v2.2.0) — un grep di sicurezza ha trovato solo commenti SRCDOC-safety, nessuna esfiltrazione/curl|sh/eval-of-remote. Installazione verificata in una HOME temporanea: SKILL.md si trova in ~/.claude/skills/visualize/SKILL.md, il frontmatter viene analizzato con name+description. Per l'OUTPUT ho creato due file reali per "chart Q1-Q4 revenue": viz_baseline.html (nessuna skill) usa un GRADIENT lineare blu, 500x300 px fissi, testo #333 hardcoded, etichette 10px, barre quadrate; viz_skill.html (seguendo il manuale) usa un solido piatto teal-400 #1D9E75 con opacità 0.85, viewBox 0 0 680 270 responsive width:100%, variabili --color-* del tema per chiaro/scuro, una striscia metrica KPI a 3 carte sopra il grafico, classi di etichette .t/.ts/.th e barre arrotondate rx=4. Miglioramento di authoring concreto e citabile — ma NON ho potuto eseguire la pipeline di rendering (strumento visualize() + iframe + CSS iniettato) poiché richiede un'istanza Open WebUI in esecuzione, quindi le affermazioni di interattività/rendering non sono verificate. Verdetto "setup": la guida di design funziona come una guida di stile, ma la funzionalità di rendering inline richiede lo strumento Python Open WebUI, non Claude Code.
Testato il: 2026-07-21 · Claude Code 2.x (agent harness)
Installazione
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. Comandi e prompt di esempio
/visualizeManuale di design per il rendering di visualizzazioni SVG/HTML/Chart.js inline nella chat Open WebUI
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
Visualize this dataset as an interactive chartDraw a diagram of this system architectureShow this data as a dashboard