Design complex TD interfaces in minutes not hours. Just describe, sketch, or drop a reference.
The Problem
We all need UI! Building interfaces in TouchDesigner is not always a pleasure. While TD can produce all kinds of UIs, the process could be tedious, the design workflow is sometimes limited, and achieving a polished, high-quality visual result is sometime quite long with the built-in tools.
The Solution
VIBE-Controller changes that completely: describe or draw the UI you want and get it fully functional and wired inside TouchDesigner. By combining a lightweight HTML Canvas engine with Claude Code (or other Agentic Coding platform), you can create and customize control interfaces far more easily, designing the layout exactly the way you want.
What It Is
VIBE-Controller for TouchDesigner is a small, elegant engine that lets a single-file HTML Canvas UI run inside TouchDesigner. It provides:
-
A fully interactive control interface rendered directly inside TouchDesigner, controllable in a Panel COMP
-
Automatic data streaming: all control values are streamed to TD via a Web Server and instantly available as channels in a CHOP
-
An editable codebase: modify the interface HTML file to change the look, feel, and layout of your interface
-
Bidirectional engine [Pro]: TouchDesigner can push data back to the interface for display, and override any control value in real time
-
Load/Save presets [Pro]: snapshot and recall the state of any parameter across 16 presets (automatically saved in DATs on the TD side). Presets can be controlled from TD or from the interface itself
-
Auto Layout [Pro]: the AI exposes layout variables that TD can adjust at runtime to reconfigure the interface without editing HTML
-
Multiple themes [Pro]: ready-to-use, polished bidirectional UI templates you can drop in directly or use as a starting point for new designs
Claude Code Integration (where it gets interesting...)
Claude Code lets you go further. Instead of editing code manually, simply describe in natural language how you want the interface to change. Claude will write the code to modify the interface HTML accordingly. A simple reload in TouchDesigner is all it takes to see the result, fully interactive. A dedicated CLAUDE.md file gives the AI all the direction it needs to modify or create interfaces correctly.
Sketch-to-Interface Skill
Inside Claude Code, a companion skill (/sketch-to-interface) lets you go even further: upload a photo or a hand-drawn sketch of an interface idea and Claude Code will convert it into a working HTML Canvas interface. From a napkin drawing to a functional TD controller, no coding required. You can also give Claude design references (screenshots, mood boards, color palettes) to guide the visual style.
Packages Available
VIBE-Controller Basic (Free Download for all Patreon Members)
Use, modify, and build real TouchDesigner UI controllers without wiring a single node.
-
Unidirectional engine (UI → TD)
-
100% editable HTML Canvas UI
-
Fully interactive inside a Panel COMP
-
1 ready-to-use theme (100% editable)
-
Claude Code ready with CLAUDE.md
-
Claude Code skill included: /sketch-to-interface
VIBE-Controller Pro (Patreon Pro Members subscription)
Everything in Basic, plus the tools to go further.
-
Bidirectional engine (UI ↔ TD)
-
4 polished themes × 5 layouts = 20 ready-to-use/modify controllers
-
Preset system: store and recall full UI states from TD
-
Auto Layout: reconfigure control counts from TD without editing HTML
-
100% editable HTML Canvas UI
-
Fully interactive inside a Panel COMP
-
Claude Code ready with CLAUDE.md
-
Claude Code skill included: /sketch-to-interface
How to Choose
Basic does everything: any interface, any layout, built from a description or a sketch.
Choose the Pro package to go faster: save time and tokens with ready-made templates and auto layout combinations, and go further with the fully bidirectional engine for binding input data, and a preset system to save and recall parameter states — a must-have for live installations and performances.