El complemento de código abierto de Claude genera sintonizadores visuales interactivos con vista previa en vivo.

Qué hace

Un desarrollador ha creado un complemento de código abierto para Claude Code que genera afinadores visuales interactivos para ajustar valores CSS y de animación. En lugar del típico proceso de ida y vuelta en el chat para ajustar valores como sombras, colores y espaciado, el complemento crea una sola página HTML con controles deslizantes y un lienzo infinito al estilo Figma para vista previa en vivo.

Cómo funciona

Los usuarios escriben /ai-fine-tuner en Claude Code. Claude luego lee el archivo fuente real, reproduce el elemento real en un lienzo interactivo y proporciona controles deslizantes para ajustar valores exactos. La interfaz admite pellizcar para hacer zoom, desplazarse, alternar entre modos oscuro y claro, e incluye un botón "Copiar al portapapeles". Después de los ajustes, los usuarios pegan los valores de vuelta, y Claude aplica todos los valores exactamente.

Características principales

• Funciona para animaciones con vista previa completa de fotogramas clave incluyendo controles de tiempo y suavizado
• Interfaz de editor preconstruida con lienzo infinito, zoom y preajustes
• Claude solo completa el elemento específico y los valores del usuario
• Rápido y confiable sin elementos de UI alucinados

Detalles técnicos

El complemento se instala mediante: claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

Utiliza una licencia de Código Fuente Disponible que es gratuita pero no puede ser reempaquetada en productos competidores.

Recursos

• Demo en vivo: https://muhamadjawdatsalemalakoum.github.io/aifinetuner/
• Repositorio de GitHub: https://github.com/muhamadjawdatsalemalakoum/aifinetuner