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
Claude Code skill generates App Store screenshots using Gemini AI
A new Claude Code skill called /aso-cosmicmeta-ss creates App Store and Google Play screenshots through a 6-phase workflow that analyzes codebases and uses Gemini AI for enhancement. The skill includes an approval gate to catch layout issues before using API credits.
Claude Code at Scale: How Agentic Search Avoids RAG Failure Modes in Large Codebases
Claude Code uses agentic file-system traversal instead of embedding-based RAG, eliminating stale index issues. The article details five extension points (CLAUDE.md, hooks, skills, plugins, MCP) and the harness-as-model philosophy for multi-million-line repos.
Codegraph: Pre-indexed knowledge graph cuts Claude/Cursor tool calls by 94%
Codegraph uses a pre-indexed knowledge graph of symbol relationships, call graphs, and code structure to reduce API tool calls by up to 94% and speed up usage by ~77% for Claude, Cursor, Codex, and OpenCode agents.
OpenClaw PARA Skill Automatically Organizes Files Using Tiago Forte's Method
A developer created an OpenClaw skill that enforces the PARA method (Projects, Areas, Resources, Archives) for automatic file organization, moving files from a messy root directory into structured folders.