오픈소스 Claude 플러그인이 라이브 미리보기 기능을 갖춘 인터랙티브 비주얼 튜너를 생성합니다

기능 설명

한 개발자가 CSS 및 애니메이션 값을 미세 조정하기 위한 대화형 시각적 튜너를 생성하는 오픈소스 플러그인을 클로드 코드용으로 제작했습니다. 그림자, 색상, 간격과 같은 값을 조정하는 일반적인 채팅 과정을 거치는 대신, 이 플러그인은 슬라이더와 피그마 스타일의 무한 캔버스를 갖춘 단일 HTML 페이지를 생성하여 실시간 미리보기를 제공합니다.

작동 방식

사용자가 클로드 코드에서 /ai-fine-tuner를 입력합니다. 그러면 클로드가 실제 소스 파일을 읽고, 대화형 캔버스에 실제 요소를 재현하며, 정확한 값을 설정할 수 있는 슬라이더를 제공합니다. 이 인터페이스는 핀치 투 줌, 주변 패닝, 다크/라이트 모드 전환을 지원하며, "클립보드에 복사" 버튼도 포함되어 있습니다. 조정 후 사용자는 값을 다시 붙여넣으면 클로드가 모든 값을 정확히 적용합니다.

주요 기능

• 타이밍 및 이징 컨트롤을 포함한 전체 키프레임 미리보기로 애니메이션 작업 가능
• 무한 캔버스, 줌, 프리셋이 포함된 사전 구축된 편집기 인터페이스
• 클로드는 사용자의 특정 요소와 값만 채움
• 환각 UI 요소 없이 빠르고 신뢰할 수 있음

기술적 세부사항

플러그인은 다음을 통해 설치됩니다: claude plugin install ai-fine-tuner@https://github.com/muhamadjawdatsalemalakoum/aifinetuner.git

이 플러그인은 무료로 사용할 수 있지만 경쟁 제품으로 재포장할 수 없는 소스 이용 가능 라이선스를 사용합니다.

자료

• 라이브 데모: https://muhamadjawdatsalemalakoum.github.io/aifinetuner/
• GitHub 저장소: https://github.com/muhamadjawdatsalemalakoum/aifinetuner