Visualize

Designhåndbog til rendering af inline SVG/HTML/Chart.js-visualiseringer i Open WebUI chat

Af Classic298 · Classic298/open-webui-plugins

Virker med opsætning ★ 8.4/10

Visualize — Designhåndbog til rendering af inline SVG/HTML/Chart.js-visualiseringer i Open WebUI chat

Hvad det gør

En designsystemhåndbog, der instruerer modellen i at forfatte tema-bevidste inline-visualiseringer — SVG-diagrammer, Chart.js-diagrammer, KPI-strips, interaktive forklaringer — ved hjælp af en fast viewBox, en 9-trins farvepalet og flat-design-regler. Den udløses, når brugeren eksplicit beder om at visualisere, diagrammere, tegne et diagram, tegne eller oprette et dashboard. Rendering og interaktivitet (visualize()-værktøjskaldet, @@@VIZ-markører, auto-injiceret CSS/klasser og sendPrompt/openLink-broer) kræver det medfølgende Open WebUI Python-værktøj, der kører inde i en Open WebUI-instans.

Testrapport

Hentede begge SKILL.md-varianter og tool.py (alle HTTP 200) via GitHub raw API; tool.py er et 3796-linjers Open WebUI FastAPI-værktøj (v2.2.0) — en sikkerheds-grep fandt kun SRCDOC-sikkerhedskommentarer, ingen exfiltration/curl|sh/eval-af-remote. Verificerede installation i en temp HOME: SKILL.md lander på ~/.claude/skills/visualize/SKILL.md, frontmatter parses med name+description. Til OUTPUT forfattede jeg to reelle filer til "chart Q1-Q4 revenue": viz_baseline.html (ingen færdighed) bruger en blå lineær GRADIENT, fast 500x300 px, hardkodet #333 tekst, 10px labels, firkantede søjler; viz_skill.html (efter håndbogen) bruger flad solid teal-400 #1D9E75 med 0.85 opacitet, viewBox 0 0 680 270 responsiv width:100%, tema --color-*-variabler for lys/mørk, en 3-korts KPI-metrikstrimmel over diagrammet, .t/.ts/.th label-klasser og rx=4 afrundede søjler. Konkret, citerbar forbedring af forfatterskabet — men jeg kunne IKKE udføre render-pipelinen (visualize()-værktøj + iframe + injiceret CSS), da det kræver en kørende Open WebUI-instans, så interaktivitets-/render-påstande er ubekræftede. Dommen "setup": designvejledningen fungerer som en stilguide, men den fremhævede inline-render-funktion kræver Open WebUI Python-værktøjet, not Claude Code.

Testet: 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.

Kommandoer og eksempelprompter

/visualizeDesignhåndbog til rendering af inline SVG/HTML/Chart.js-visualiseringer i Open WebUI chat

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

Visualize this dataset as an interactive chart
Draw a diagram of this system architecture
Show this data as a dashboard

Læs hele rapporten →