O plugin de código aberto do Claude gera sintonizadores visuais interativos com pré-visualização em tempo real

O que ele faz

Um desenvolvedor criou um plugin de código aberto para o Claude Code que gera ajustadores visuais interativos para refinar valores CSS e de animação. Em vez do típico processo de ida e volta no chat para ajustar valores como sombras, cores e espaçamento, o plugin cria uma única página HTML com controles deslizantes e uma tela infinita no estilo Figma para visualização em tempo real.

Como funciona

Os usuários digitam /ai-fine-tuner no Claude Code. O Claude então lê o arquivo de origem real, reproduz o elemento real em uma tela interativa e fornece controles deslizantes para ajustar valores exatos. A interface suporta zoom com pinça, navegação panorâmica, alternância entre modos escuro e claro e inclui um botão "Copiar para Área de Transferência". Após os ajustes, os usuários colam os valores de volta e o Claude aplica todos os valores exatamente.

Recursos principais

• Funciona para animações com visualização completa de keyframes incluindo controles de tempo e easing
• Interface de editor pré-construída com tela infinita, zoom e predefinições
• O Claude apenas preenche o elemento específico e os valores do usuário
• Rápido e confiável sem elementos de interface alucinados

Detalhes técnicos

O plugin é instalado via: claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

Ele usa uma licença Source Available que é gratuita para uso, mas não pode ser reempacotada em produtos concorrentes.

Recursos

• Demonstração ao vivo: https://muhamadjawdatsalemalakoum.github.io/aifinetuner/
• Repositório GitHub: https://github.com/muhamadjawdatsalemalakoum/aifinetuner