Can I use this for non-visual parameters?

While optimized for UI, it can be used to tune any numeric, boolean, or string-based parameters, such as game physics, logic constants, or API timing.

How do I save the changes I make in the panel?

The panel includes an LLM Export feature that identifies only the values you modified and formats them as a clear summary to be applied back to your source code.

Does this panel show up in my production app?

No, the skill automatically wraps panels in environment checks like process.env.NODE_ENV === 'development' or #if DEBUG to ensure they only appear during development.

Which libraries does the Tuning Panel support?

It provides tailored implementations for Leva in React, Tweakpane or dat.GUI for Vanilla JS, and native controls for SwiftUI.

Visual Tuning Panel

Name: Visual Tuning Panel
Author: petekp

bypetekp

•

设计工具

Generates interactive debug panels for real-time adjustment of UI parameters like animations, layouts, and styles.

关于

The Tuning Panel skill enables developers to quickly create bespoke, visual interfaces for fine-tuning UI parameters without repetitive code changes. By surfacing exhaustive controls for animations, typography, and physics in a debug-only overlay, it allows for real-time iteration and provides a specialized LLM-friendly export of only the modified values, streamlining the handoff from visual experimentation to production code.

主要功能

Automatically identifies tunable magic numbers, colors, and physics constants
Exports only changed values in a clean format for easy LLM integration
Supports React (Leva), SwiftUI, and Vanilla JS (Tweakpane/dat.GUI)
Groups related parameters into logical folders with intuitive UI controls
1 GitHub stars
Generates debug-only panels that won't leak into production environments

使用场景

Iterating on layout spacing, padding, and positioning in real-time
Fine-tuning complex spring physics and easing curves for UI animations
Testing color palettes and typography scales across different components

关于

主要功能

Automatically identifies tunable magic numbers, colors, and physics constants
Exports only changed values in a clean format for easy LLM integration
Supports React (Leva), SwiftUI, and Vanilla JS (Tweakpane/dat.GUI)
Groups related parameters into logical folders with intuitive UI controls
1 GitHub stars
Generates debug-only panels that won't leak into production environments

使用场景

Iterating on layout spacing, padding, and positioning in real-time
Fine-tuning complex spring physics and easing curves for UI animations
Testing color palettes and typography scales across different components