Claude Code용 오픈소스 플러그인: 슬라이더와 실시간 미리보기를 지원하는 비주얼 튜너

실용적 조언

Claude Code 사용자라면 'claude plugin install' 명령어를 통해 즉시 설치하여 UI 작업에 활용할 수 있다.
애니메이션 작업 시 키프레임 미리보기 기능을 활용하여 이징 값을 미세 조정하면 더 자연스러운 효과를 얻을 수 있다.

섹션별 상세

UI 미세 조정의 번거로움을 해결하기 위해 슬라이더 기반의 인터랙티브 캔버스를 도입했다. 사용자가 /ai-fine-tuner 명령어를 입력하면 Claude가 실제 소스 파일을 읽고 Figma 스타일의 무한 캔버스에 해당 요소를 재현한다. 이를 통해 "그림자를 조금 더 진하게", "간격을 12px로" 같은 반복적인 텍스트 요청 없이 시각적으로 정확한 값을 확정할 수 있다.

정적 요소뿐만 아니라 복잡한 애니메이션의 타이밍과 이징(easing) 컨트롤까지 지원한다. 플러그인은 전체 키프레임 미리보기를 제공하여 애니메이션의 흐름을 실시간으로 확인하며 미세 조정할 수 있게 설계됐다. 사용자가 조정한 최종 값은 클립보드에 복사하여 Claude에게 전달하면 소스 코드에 오차 없이 즉시 적용된다.

도구의 신뢰성을 높이기 위해 에디터 인터페이스는 미리 구축된 상태에서 Claude가 특정 요소와 값만 채우는 메커니즘을 채택했다. 이는 LLM이 UI 전체 구조를 생성할 때 발생할 수 있는 환각(hallucination) 현상을 방지하고 실행 속도를 높이는 핵심 요소이다. 사용자는 줌, 팬, 다크/라이트 모드 전환 등 완성도 높은 편집 환경을 즉시 활용 가능하다.

용어 해설

클로드 코드(Claude Code): — Anthropic에서 개발한 터미널 기반의 AI 코딩 에이전트 도구이다. 사용자의 로컬 파일 시스템에 접근하여 코드를 읽고, 수정하고, 실행하며 복잡한 개발 작업을 자율적으로 수행하는 기능을 제공한다.
무한 캔버스(Infinite Canvas): — Figma나 Miro와 같이 경계가 없는 작업 영역을 제공하는 UI 디자인 패턴이다. 사용자가 자유롭게 화면을 확대/축소(Zoom)하고 이동(Pan)하며 여러 요소를 배치하고 시각화할 수 있는 환경을 의미한다.
키프레임(Keyframe): — 애니메이션의 시작, 끝 또는 중간 변화 지점을 정의하는 핵심 프레임이다. CSS 애니메이션 등에서 시간에 따른 속성 변화를 정의할 때 사용하며, 이징(Easing) 함수와 결합하여 움직임의 가속도를 조절한다.

코드 예제

bash

claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

Claude Code에 ai-fine-tuner 플러그인을 설치하는 명령어

언급된 도구

ai-fine-tuner추천링크

Claude Code용 UI 튜닝 및 실시간 미리보기 플러그인

Claude Code중립

Anthropic의 CLI 기반 코딩 에이전트

언급된 리소스

Demoai-fine-tuner 라이브 데모

GitHubai-fine-tuner GitHub 저장소