Community코딩 & 개발github.com

MySwallow/flutter-visual-loop

Claude Code 기반의 자동화된 Figma/PNG → Flutter UI 복원 루프. 디버그 전용 HTTP 제어 SDK 및 Claude Code 스킬 포함.

flutter-visual-loop란 무엇인가요?

이 스킬은 Claude Code가 Figma 디자인이나 PNG 이미지를 Flutter UI 코드로 자동 변환 및 복원하는 반복 작업을 수행할 수 있게 해줍니다. 개발자는 디자인 파일을 제공하고 Claude Code 명령을 통해 UI 복원 과정을 실행하며, 디버그 전용 HTTP 제어 SDK를 사용하여 결과를 실시간으로 확인하고 조정할 수 있습니다. Flutter 프로젝트에 통합되어 디자인-코드 간의 갭을 줄이고 반복적인 UI 수정 작업을 자동화하는 데 유용합니다. 주로 Claude Code 환경에서 활용되며, Figma API 연동이나 PNG 이미지 분석을 통해 UI를 재구성합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add MySwallow/flutter-visual-loop

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

flutter-visual-loop은(는) 무엇을 하나요?

Claude Code 기반의 자동화된 Figma/PNG → Flutter UI 복원 루프. 디버그 전용 HTTP 제어 SDK 및 Claude Code 스킬 포함.

개요

이 스킬은 Figma 디자인이나 PNG 이미지를 가져와 Flutter UI 코드로 자동 변환하는 반복적인 워크플로우를 제공합니다. Claude Code가 주도하여 UI를 복원하고, 디버그 전용 HTTP 제어 SDK를 통해 결과를 실시간으로 모니터링 및 조정할 수 있습니다.

주요 기능

  • 자동 UI 복원: Figma 또는 PNG 입력에서 Flutter 위젯 트리 생성
  • 반복 루프: Claude Code가 지속적으로 결과를 개선
  • HTTP 디버그 SDK: 개발 중 UI 상태 확인 및 수동 개입
  • Claude Code 통합: 명령 기반 워크플로우

사용 방법

  1. Flutter 프로젝트에서 이 스킬을 활성화합니다.
  2. Figma 디자인 파일 또는 PNG 이미지를 준비합니다.
  3. Claude Code에 적절한 명령을 전달하여 UI 복원을 시작합니다.
  4. HTTP SDK 엔드포인트를 통해 진행 상황을 확인하고 필요시 조정합니다.

요구 사항

  • Flutter SDK 설치
  • Claude Code 환경
  • 선택 사항: Figma API 키 (Figma 사용 시)

참고

이 스킬은 디버그 목적으로 설계되었으며, 프로덕션 환경에서 사용하기 전에 추가 테스트가 필요할 수 있습니다.

관련 스킬