Open source plugin

Stop iterating in chat.
Drag sliders instead.

Shadows, animations, colors, typography, transforms, easing curves — anything visual, with live preview. Every tuner is bespoke. The agent fills in the blanks, not the infrastructure.

Try the Demos Quick Install

Works with any AI coding agent

How it works

One round-trip instead of ten

Shadows, animations, transforms, colors, typography, easing curves — anything visual. The agent reads your source, reproduces your element, and gives you framework-ready output.

You invoke the fine-tuner

/ai-fine-tuner in Claude Code, Cursor, or Cline. $ai-fine-tuner in Codex. @ai-fine-tuner in Windsurf.

You

Agent confirms first — always

The agent never generates without asking. Here's exactly what it says:

Agent

What the agent says before generating:

I'll generate an interactive fine-tuner for CardWidget with controls for:
  - Shadow: offset-x, offset-y, blur, spread, opacity
  - Shape: border-radius

I'll read: src/components/Card.tsx
Output format: CSS
Template: small (3 controls)

The editor interface is pre-built (infinite canvas, zoom, presets) —
I only fill in your element and values. This costs some extra tokens
for reading your source file and generating the HTML, but saves many
rounds of back-and-forth. Proceed?

You say yes — agent generates

Reads your source, fills in a pre-built template with your element and sliders, saves to .fine-tune/, and opens it in your browser.

Agent

Drag, copy, done

Adjust sliders on the infinite canvas, click Copy to Clipboard, paste back. The agent applies it to your code.

You

Live animation demo — drag the sliders

When it triggers

Four ways it activates

Explicit invocation is the most reliable trigger. The syntax varies by platform — /, $, or @ followed by ai-fine-tuner.

You invoke it Explicit

/ai-fine-tuner in Claude Code, Cursor, Cline. $ai-fine-tuner in Codex. @ai-fine-tuner in Windsurf. For Aider: /read AGENTS.md then ask to fine-tune.

Iteration detected Instruction

You've gone back and forth on visual values 2+ times. The agent recognizes the pattern and suggests the tuner instead of continuing to guess.

Vague visual feedback Instruction

"Make it look better", "the spacing feels off", "it needs more pop" — subjective requests that would lead to guessing. The agent suggests the tuner instead.

Agent's visual voice Instruction

The agent wants to show visual options — shadow depths, color variations, spacing — instead of describing them in text. It uses the tuner to show rather than tell.

Live demos

Try it yourself

Three working demos showing different template tiers. Build new components or refine existing ones with the infinite canvas, trackpad zoom/pan, and live preview.

single.html

1 slider

Button Shadow

One slider controlling shadow depth on a clean button. Four presets from flat to deep.

1 control 4 presets bottom bar

Three sliders for border radius, shadow blur, and accent color. Multi-property live updates.

3 controls 5 presets bottom panel

Twelve sliders across shadow, shape, and color groups. Live bar chart recolors with the accent slider.

12 controls 5 presets sidebar

Live keyframe animation with float, glow-pulse, and orbiting effects. Drag sliders to control timing, intensity, and colors in real-time.

8 controls 3 presets sidebar

Built-in features

Bespoke UI, every time

The canvas, zoom, sliders, and controls are pre-built and production-grade. The agent only fills in your element and values — it never builds the interface itself. Fast, reliable, and consistent.

∞

Infinite Canvas

Figma-style preview with trackpad pinch-to-zoom (25%-400%) and two-finger pan.

Zoom HUD

Bottom-left zoom display with +/- buttons. Double-click to reset to 100%.

Editable Values

Click any readout to type an exact value. Hit Enter to apply instantly.

◑

Dark / Light Toggle

Switch canvas background to test contrast in both contexts.

▷

Collapsible Controls

GPU-accelerated collapse. One click for full-screen canvas.

▶

Preset Buttons

Original, Subtle, Elevated, Bold, Soft, Sharp, Neon, Glass.

◉

Authentic Preview

Your real element translated to web for the preview, then back to your language on copy.

☃

Any Language

Flutter, SwiftUI, React Native, CSS, SVG, JSON — preview in HTML, output in your stack.

Instructed Suggestions

AGENTS.md instructs the agent to suggest it after iterations or vague feedback — but /ai-fine-tuner is always the most reliable trigger.

Output formats

Any language. Any platform.

The preview is always web-based, but the output translates to your stack automatically. Works with any programming language or framework.

CSS

border-radius: 12px;

Tailwind

rounded-xl shadow-lg

Flutter

BorderRadius.circular(12)

SwiftUI

.cornerRadius(12)

React Native

borderRadius: 12

JSON

{"borderRadius": 12}

Token efficient

60% fewer tokens per session

One round-trip instead of ten. Perfect values because you can see them live.

Without Fine-Tuner

"make the shadow bigger"~700

"too much, try 12px"~700

"add some spread"~700

"softer color"~700

...5-10 more rounds...~3,500+

Total~6,000-10,000

With Fine-Tuner

"fine-tune the shadow"~200

Agent generates tuner~3,000

You drag sliders0

"apply these values"~700

Total~3,900

One round-trip · Perfect values · Zero guessing

Integration depth

Strongest where it matters

Claude Code gets the deepest integration via skill matching. All other platforms use AGENTS.md instructions — the agent follows them, but they're not enforced by the platform.

Feature	Claude Code	Codex	Cursor	Others
Invoke command	`/ai-fine-tuner`	`$ai-fine-tuner`	`/ai-fine-tuner`	`@` or `/`
Proactive after iterations	Skill body	AGENTS.md	AGENTS.md	AGENTS.md
Plugin install	One command	Installer	Installer	Installer
Confirm before generating	Enforced	Instructed	Instructed	Instructed

Others: Windsurf, Cline, Aider, Copilot, bolt.new, Lovable, Replit Agent — fully functional via AGENTS.md.

Quick install

Pick your platform

One-command installers for every major AI coding agent. Plugin, skill, or AGENTS.md — your choice.

# Install as a plugin from GitHub
claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

# Manage
claude plugin enable ai-fine-tuner
claude plugin update ai-fine-tuner

# Install as a skill via CLI
git clone https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git
cd ai-fine-tuner
./install-claude.sh

# Claude Desktop (GUI)
# 1. Open Customize → Skills
# 2. Click + → Upload a skill
# 3. Upload the ZIP (skill + templates)

# Create the ZIP:
zip -r ai-fine-tuner.zip skills/ assets/ AGENTS.md

# Clone and run the installer
git clone https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git
cd ai-fine-tuner
./install-codex.sh

git clone https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git
cd ai-fine-tuner
./install-cursor.sh

# The installer copies AGENTS.md + templates
# to your project automatically

git clone https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git
cd ai-fine-tuner
./install-windsurf.sh

# Copies AGENTS.md + templates to project

git clone https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git
cd ai-fine-tuner
./install-cline.sh

# Copies AGENTS.md + templates. Supports project/global

git clone https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git
cd ai-fine-tuner
./install-aider.sh

# Copies AGENTS.md + templates, configures .aider.conf.yml

# Works with any agent that reads AGENTS.md
# GitHub Copilot, Google Jules, Gemini CLI, Devin, etc.

cp AGENTS.md /path/to/your/project/
cp -r assets/templates /path/to/your/project/.fine-tune/templates

# Templates are optional — the agent can generate
# from the spec in AGENTS.md if not found
# Adopted by 20+ tools — agentskills.io

Stop iterating in chat.Drag sliders instead.

Stop iterating in chat.
Drag sliders instead.