Open-source Claude plugin generates interactive visual tuners with live preview
What it does
A developer has created an open-source plugin for Claude Code that generates interactive visual tuners for fine-tuning CSS and animation values. Instead of the typical back-and-forth chat process of adjusting values like shadows, colors, and spacing, the plugin creates a single HTML page with sliders and a Figma-style infinite canvas for live preview.
How it works
Users type /ai-fine-tuner in Claude Code. Claude then reads the actual source file, reproduces the real element on an interactive canvas, and provides sliders to dial in exact values. The interface supports pinch-to-zoom, panning around, toggling between dark and light modes, and includes a "Copy to Clipboard" button. After adjustments, users paste the values back, and Claude applies all values exactly.
Key features
- Works for animations with full keyframe preview including timing and easing controls
- Pre-built editor interface with infinite canvas, zoom, and presets
- Claude only fills in the user's specific element and values
- Fast and reliable with no hallucinated UI elements
Technical details
The plugin is installed via: claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git
It uses a Source Available license that's free to use but cannot be repackaged into competing products.
Resources
- Live demo: https://muhamadjawdatsalemalakoum.github.io/aifinetuner/
- GitHub repository: https://github.com/muhamadjawdatsalemalakoum/aifinetuner
📖 Read the full source: r/ClaudeAI
👀 See Also
Learning-Kit: A Claude Code Plugin for Codebase Onboarding and Exploration
Learning-kit is a free Claude Code plugin that analyzes repositories to generate structured learning plans and interactive tutorials. It helps developers understand unfamiliar codebases before making changes, with configurable enforcement modes and progress tracking.
Claude Workflow Library: 10 Complete AI Workflows for Non-Technical Users
A free GitHub repository provides 10 complete AI workflows for Claude users without technical backgrounds, including study, research, writing, business, content creation, decision making, learning, job search, productivity, and life planning systems.
MCP Server Connects Claude Code/Desktop to Apple Music — Playlists, Search, Profile Analysis
A new MCP server lets Claude Code and Claude Desktop control Apple Music — list playlists, search songs, create playlists, and analyze listening patterns via natural language.
PeaDB: Redis-Compatible Database Coded with AI Assistants in C++20
A developer created PeaDB, a Redis 7.2.5 drop-in replacement written in C++20 using Codex, Copilot, and Claude, implementing ~147 commands with persistence, replication, and cluster support. Benchmarks show performance close to Redis.