skills.rest
GuiGPaP
GuiGPaPCOMMUNITY
Explore all skills by this author →
GitHub

td-sketch-ui

Translate hand-drawn UI sketches into TouchDesigner panels with Palette Basic Widgets.

1|Updated Mar 18, 2026
Search Tags:#prototyping#ui-design#palette#layout-patterns#touchdesigner#td-sketch-ui#td-ui
One-click install
npx skills add https://github.com/GuiGPaP/TD_starter_pack --skill td-sketch-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: td-sketch-ui
Source: https://github.com/GuiGPaP/TD_starter_pack/tree/main/.agents/skills/td-sketch-ui
Command: npx skills add https://github.com/GuiGPaP/TD_starter_pack --skill td-sketch-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converting hand-drawn UI sketches into functional TouchDesigner panels can be time-consuming and error-prone; this Skill streamlines ideation-to-prototype by mapping sketches to Palette Basic Widgets and providing structured layout and interaction patterns.

Core Features & Use Cases

  • Sketch-to-UI mapping: translate rectangles, grids, and annotations into corresponding TD widgets (buttons, sliders, tabs, labels) using Palette components.
  • Layout patterns: apply common TD Sketch-UI layouts (vertical panels, tabs, toolbars, grids) with built-in sizing and fill rules.
  • Rapid prototyping: generate testable interfaces within a TD project to iterate visuals and interactions with stakeholders.
  • Reference-driven development: reuse the included widget catalog and layout references to maintain consistency across projects.

Quick Start

Provide a sketch image and a target TouchDesigner project path, and I will generate a TD Sketch-UI layout using the Palette widgets and initialize a ready-to-test panel in the project.

Frequently Asked Questions about td-sketch-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn hand-drawn sketches into TouchDesigner UI panels?▼

You can turn hand-drawn sketches into TouchDesigner UI panels by mapping sketch elements like rectangles and grids to Palette Basic Widgets, generating a ready-to-test functional panel layout.

Can I use hand-drawn UI sketches for rapid prototyping in TouchDesigner?▼

Yes, hand-drawn UI sketches are mapped to TouchDesigner Palette Basic Widgets to generate testable interfaces, enabling rapid prototyping and immediate visual iteration with stakeholders.

What is the best way to map sketch annotations to TouchDesigner widgets?▼

The best way to map sketch annotations to TouchDesigner widgets is using structured layout strategies that translate drawn elements into specific Palette components like buttons, sliders, and tabs.

Do I need to define layout patterns and sizing rules for TouchDesigner UI generation?▼

You do not need to manually define sizing rules because the process applies built-in TouchDesigner layout patterns, sizing guardrails, and tab navigation to ensure consistent inner widget fills.

Does td-sketch-ui work without external dependencies?▼

Yes, td-sketch-ui works without external dependencies, relying solely on internal reference components to map sketches to TouchDesigner Palette widgets and maintain predictable performance.

Related Skills

Explore More Design & Creative Skills→
superpollo02superpollo02

doodle

Standardize hand-drawn UI components with token-based styling and WCAG 2.2 AA accessibility.

Community
Intermediate
profmikegreeneprofmikegreene
1

ux-prototyping

Design and prototype user interfaces and dashboards for usability testing.

Community
Intermediate
jperezdelrealjperezdelreal

swiftui-design-principles

Enforce SwiftUI design principles for spacing, typography, color, and widgets.

Community
Advanced
DarkArty07DarkArty07
3

touchdesigner-mcp

Control a running TouchDesigner instance via the twozero MCP server.

Community
Advanced