Плагин с открытым исходным кодом для Claude создает интерактивные визуальные тюнеры с живым предпросмотром.

Что он делает

Разработчик создал плагин с открытым исходным кодом для Claude Code, который генерирует интерактивные визуальные настройщики для точной корректировки значений CSS и анимации. Вместо типичного процесса переписки для настройки значений, таких как тени, цвета и отступы, плагин создаёт отдельную HTML-страницу с ползунками и бесконечным холстом в стиле Figma для живого предпросмотра.

Как это работает

Пользователи вводят /ai-fine-tuner в Claude Code. Затем Claude читает фактический исходный файл, воспроизводит реальный элемент на интерактивном холсте и предоставляет ползунки для точной настройки значений. Интерфейс поддерживает масштабирование щипком, перемещение по холсту, переключение между тёмным и светлым режимами и включает кнопку "Скопировать в буфер обмена". После корректировок пользователи вставляют значения обратно, и Claude применяет все значения точно.

Ключевые особенности

• Работает с анимациями с полным предпросмотром ключевых кадров, включая управление временем и плавностью
• Готовый редакторский интерфейс с бесконечным холстом, масштабированием и предустановками
• Claude заполняет только конкретный элемент и значения пользователя
• Быстрый и надёжный, без вымышленных элементов интерфейса

Технические детали

Плагин устанавливается через: claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

Он использует лицензию Source Available, которая бесплатна для использования, но не может быть переупакована в конкурирующие продукты.

Ресурсы

• Живая демонстрация: https://muhamadjawdatsalemalakoum.github.io/aifinetuner/
• Репозиторий GitHub: https://github.com/muhamadjawdatsalemalakoum/aifinetuner