Visualize

Designový manuál pro vykreslování inline SVG/HTML/Chart.js vizuálů v chatu Open WebUI

od Classic298 · Classic298/open-webui-plugins

Funguje s nastavením ★ 8.4/10

Visualize — Designový manuál pro vykreslování inline SVG/HTML/Chart.js vizuálů v chatu Open WebUI

Co umí

Manuál designového systému, který instruuje model k vytváření inline vizualizací citlivých na téma — SVG diagramy, Chart.js grafy, KPI proužky, interaktivní vysvětlivky — s použitím pevného viewBoxu, 9ramenné barevné palety a pravidel flat-designu. Spouští se, když uživatel explicitně požádá o vizualizaci, diagram, graf, kresbu nebo dashboard. Vykreslování a interaktivita (volání nástroje visualize(), značky @@@VIZ, automaticky vložené CSS/třídy a sendPrompt/openLink mosty) vyžadují doprovodný Open WebUI Python nástroj běžící v instanci Open WebUI.

Testovací report

Načteny obě varianty SKILL.md a tool.py (vše HTTP 200) přes GitHub raw API; tool.py je 3796řádkový nástroj Open WebUI FastAPI (v2.2.0) — bezpečnostní grep našel pouze komentáře SRCDOC-safety, žádnou exfiltraci/curl|sh/eval-of-remote. Ověřena instalace do dočasného HOME: SKILL.md se umístí do ~/.claude/skills/visualize/SKILL.md, frontmatter se parsuje s name+description. Pro OUTPUT jsem vytvořil dva skutečné soubory pro "chart Q1-Q4 revenue": viz_baseline.html (bez dovednosti) používá modrý lineární GRADIENT, pevné rozměry 500x300 px, pevně zakódovaný text #333, 10px popisky, čtvercové sloupce; viz_skill.html (podle manuálu) používá plochou plnou teal-400 #1D9E75 s 0.85 opacitou, viewBox 0 0 680 270 responzivní width:100%, proměnné tématu --color-* pro světlý/tmavý režim, 3kartový KPI metrický proužek nad grafem, třídy popisků .t/.ts/.th a zaoblené sloupce rx=4. Konkrétní, citovatelné zlepšení autorství — ale NEMOHL jsem spustit renderovací pipeline (nástroj visualize() + iframe + vložené CSS), protože vyžaduje běžící instanci Open WebUI, takže tvrzení o interaktivitě/vykreslování jsou neověřená. Verdikt "setup": designové pokyny fungují jako style-guide, ale hlavní funkce inline-render vyžaduje Open WebUI Python nástroj, nikoli Claude Code.

Testováno: 2026-07-21 · Claude Code 2.x (agent harness)

Instalace

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.

Příkazy a ukázkové prompty

/visualizeDesignový manuál pro vykreslování inline SVG/HTML/Chart.js vizuálů v chatu Open WebUI

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →