tuning-panel

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tuning Panel Skill

调优面板技能

Create bespoke parameter tuning panels that give users visual control over values they're iterating on. These panels surface all relevant parameters for the current task, enable real-time adjustment, and export tuned values in an LLM-friendly format.

创建定制化的参数调优面板，为用户提供对正在迭代的数值的可视化控制。这些面板会展示当前任务的所有相关参数，支持实时调整，并以LLM友好的格式导出已调优的数值。

Core Philosophy

核心理念

Err on the side of exhaustive. When a user is tuning something, surface every parameter that could reasonably affect the outcome. Missing a parameter forces context-switching; having "too many" parameters costs only scroll distance.

Debug-mode only. Tuning panels should never appear in production. Use environment checks, build flags, or URL parameters.

Export changed values only. LLM exports should show only what was tuned, not all 100+ parameters.

宁多勿缺。 当用户在调优内容时，展示所有可能对结果产生合理影响的参数。遗漏参数会迫使用户切换上下文；而“过多”参数仅需滚动查看即可。

仅在调试模式下启用。 调优面板绝不能出现在生产环境中。使用环境检测、构建标记或URL参数来控制。

仅导出已更改的数值。 LLM导出内容应仅展示已调优的参数，而非全部100+个参数。

Platform Selection

平台选择

Platform	Library	Reference
React	Leva (recommended)	references/react-leva.md
SwiftUI	Native controls	references/swiftui.md
Vanilla JS	Tweakpane or dat.GUI	references/vanilla-js.md

平台	库	参考文档
React	Leva（推荐）	references/react-leva.md
SwiftUI	原生控件	references/swiftui.md
Vanilla JS	Tweakpane 或 dat.GUI	references/vanilla-js.md

Implementation Workflow

实现流程

Step 1: Identify All Tunable Parameters

步骤1：识别所有可调优参数

Analyze the code being tuned and extract every parameter that affects the output. See references/parameter-categories.md for exhaustive lists by domain.

Common categories:

Animation: duration, delay, easing, spring physics (stiffness, damping, mass)
Layout: padding, margin, gap, width, height, position
Visual: colors, opacity, shadows, borders, transforms
Typography: font size, line height, letter spacing, weight

Discovery strategies:

Search for magic numbers (any hardcoded numeric value)
Look for style objects (CSS-in-JS, inline styles, theme values)
Find animation definitions (Framer Motion, CSS transitions, SwiftUI animations)
Identify color values (hex, RGB, HSL anywhere in the file)
Check component props with numeric or color defaults
Examine CSS custom properties (
```
--var-name
```
declarations)

分析要调优的代码，提取所有会影响输出结果的参数。按领域分类的详尽列表请参阅references/parameter-categories.md。

常见分类：

动画：时长、延迟、缓动效果、弹簧物理属性（刚度、阻尼、质量）
布局：内边距、外边距、间距、宽度、高度、位置
视觉效果：颜色、透明度、阴影、边框、变换
排版：字体大小、行高、字间距、字重

参数发现策略：

查找魔法数字（任何硬编码的数值）
寻找样式对象（CSS-in-JS、内联样式、主题值）
定位动画定义（Framer Motion、CSS过渡、SwiftUI动画）
识别颜色值（文件中任何十六进制、RGB、HSL格式的颜色）
检查带有数值或颜色默认值的组件属性
查看CSS自定义属性（
```
--var-name
```
声明）

Step 2: Create Debug-Mode Panel

步骤2：创建调试模式面板

Wrap the tuning panel so it only appears in development:

React:
```
process.env.NODE_ENV === 'development'
```
SwiftUI:
```
#if DEBUG
```
Vanilla JS: URL parameter
```
?debug
```
or environment check

See platform-specific references for code patterns.

对调优面板进行包装，使其仅在开发环境中显示：

React：
```
process.env.NODE_ENV === 'development'
```
SwiftUI：
```
#if DEBUG
```
Vanilla JS：URL参数
```
?debug
```
或环境检测

平台特定的代码模式请参阅对应参考文档。

Step 3: Implement Controls

步骤3：实现控件

Follow these principles:

Group related parameters using folders/sections
Use appropriate control types: sliders for numbers, color pickers for colors, dropdowns for enums
Set sensible min/max/step values based on the parameter domain
Include presets for common configurations
Add reset buttons to return to defaults

遵循以下原则：

使用文件夹/分组来组织相关参数
使用合适的控件类型：数值用滑块、颜色用取色器、枚举用下拉菜单
基于参数域设置合理的最小/最大/步长值
包含常见配置的预设
添加重置按钮以恢复默认值

Step 4: Add LLM Export

步骤4：添加LLM导出功能

Critical requirements:

Store defaults at initialization for comparison
Use tolerance for floats (e.g.,
```
Math.abs(a - b) > 0.001
```
)
Filter to changed values only - don't show unchanged parameters
Format for readability - group by category, use human-readable names

Export format:

markdown

undefined

关键要求：

初始化时存储默认值用于对比
对浮点数使用容差范围（例如：
```
Math.abs(a - b) > 0.001
```
）
仅过滤已更改的数值 - 不要展示未更改的参数
格式易读 - 按分类分组，使用易读的名称

导出格式：

markdown

undefined

Tuned Parameters for [ComponentName]

[组件名称]的已调优参数

Changed Values

已更改数值

Duration: 300 → 450
Spring Damping: 0.80 → 0.65
Corner Radius: 12 → 16

时长：300 → 450
弹簧阻尼：0.80 → 0.65
圆角半径：12 → 16

Apply These Values

应用这些数值

Update the component at

src/components/Card.tsx:42

with the values above.


**Why this matters:**
- A panel might expose 100+ parameters
- Exporting all values wastes tokens and obscures what changed
- The `default → current` format makes diffs scannable

更新位于

src/components/Card.tsx:42

的组件，使用上述数值。


**为什么这很重要：**
- 一个面板可能会暴露100+个参数
- 导出所有数值会浪费token并掩盖已更改的内容
- `默认值 → 当前值` 的格式让差异对比更易扫描