オープンソースのClaudeプラグインが、ライブプレビュー付きのインタラクティブなビジュアルチューナーを生成します

機能概要

開発者が、CSSとアニメーションの値を微調整するためのインタラクティブなビジュアルチューナーを生成するClaude Code用のオープンソースプラグインを作成しました。シャドウ、色、間隔などの値を調整するための典型的なチャットの往復プロセスではなく、このプラグインはスライダーとライブプレビュー用のFigmaスタイルの無限キャンバスを備えた単一のHTMLページを作成します。

動作方法

ユーザーはClaude Codeで/ai-fine-tunerと入力します。Claudeは実際のソースファイルを読み取り、インタラクティブなキャンバス上で実際の要素を再現し、正確な値を設定するためのスライダーを提供します。インターフェースはピンチズーム、パン操作、ダークモードとライトモードの切り替えをサポートし、「クリップボードにコピー」ボタンも含まれています。調整後、ユーザーは値を貼り付け、Claudeがすべての値を正確に適用します。

主な特徴

• タイミングとイージングコントロールを含む完全なキーフレームプレビューを備えたアニメーションに対応
• 無限キャンバス、ズーム、プリセットを備えた事前構築済みのエディターインターフェース
• Claudeはユーザーの特定の要素と値のみを入力
• 高速で信頼性が高く、幻覚的なUI要素はありません

技術詳細

プラグインは次のコマンドでインストールされます：claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

ソース利用可能ライセンスを使用しており、無料で利用できますが、競合製品に再パッケージすることはできません。

リソース

• ライブデモ：https://muhamadjawdatsalemalakoum.github.io/aifinetuner/
• GitHubリポジトリ：https://github.com/muhamadjawdatsalemalakoum/aifinetuner