Community코딩 & 개발github.com

screen-flow-ai-agent

스마트 스크린샷 해석 플로팅 윈도우 — 스크린샷 + 멀티모달 LLM = 즉각적인 AI 응답, LangGraph 기반

screen-flow-ai-agent란 무엇인가요?

이 스킬은 LangGraph를 기반으로 구축된 지능형 AI 에이전트로, 사용자가 화면의 특정 영역을 캡처하면 멀티모달 대규모 언어 모델(LLM)을 통해 즉시 해석과 분석을 제공하는 플로팅 윈도우를 구현합니다. 개발자 도구 및 AI 도우미 환경(예: Claude Code, Cursor 등)에서 활용 가능하며, 스크린샷 입력을 받아 시각적 콘텐츠를 이해하고 질문에 답변하거나 요약을 생성합니다. LangGraph의 그래프 기반 워크플로우를 사용하여 캡처, 전처리, 모델 추론, 결과 표시 단계를 오케스트레이션함으로써 효율적이고 확장 가능한 응답 파이프라인을 제공합니다. 실시간 화면 분석, UI/UX 디자인 검토, 코드 스니펫 캡처 및 해석 등에 유용하며, 복잡한 시각-텍스트 추론 작업을 자동화하려는 개발자에게 적합합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add zebinlu7-a11y/screen-flow-ai-agent

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

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

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

문서

screen-flow-ai-agent은(는) 무엇을 하나요?

스마트 스크린샷 해석 플로팅 윈도우 — 스크린샷 + 멀티모달 대규모 언어 모델 = 즉각적인 AI 응답, LangGraph 기반

개요

screen-flow-ai-agent는 LangGraph로 구축된 AI 에이전트로, 데스크톱 환경에서 플로팅 윈도우를 통해 화면 캡처를 수행하고 멀티모달 LLM을 사용하여 즉시 분석 결과를 제공합니다. 이 도구는 사용자가 화면의 일부를 선택하면 자동으로 이미지를 해석하고, 질문에 답변하거나 콘텐츠를 요약합니다.

주요 기능

  • 원클릭 스크린샷 캡처: 화면의 원하는 영역을 빠르게 선택할 수 있습니다.
  • 멀티모달 AI 분석: 캡처된 이미지를 멀티모달 LLM(예: GPT-4V, Claude Vision)에 전송하여 시각적 및 텍스트 정보를 이해합니다.
  • 실시간 결과 표시: 분석 결과가 플로팅 윈도우에 즉시 표시되어 대화형 피드백을 제공합니다.
  • LangGraph 워크플로우: 그래프 기반 상태 머신을 사용하여 캡처부터 결과 표시까지의 전체 파이프라인을 관리합니다.

지원 플랫폼

  • Linux, macOS, Windows
  • Claude Code, Cursor, Codex와 같은 AI 코딩 도우미와 통합 가능
  • Python 3.8+ 및 LangGraph 라이브러리 필요

사용 방법

  1. 에이전트를 실행합니다.
  2. 플로팅 윈도우에서 '캡처' 버튼을 클릭하거나 단축키를 사용합니다.
  3. 화면에서 분석할 영역을 드래그하여 선택합니다.
  4. AI가 이미지를 처리하고 결과를 윈도우에 표시할 때까지 기다립니다.
  5. 필요에 따라 후속 질문을 입력하거나 새로운 캡처를 시작합니다.

기술 스택

  • LangGraph: 워크플로우 오케스트레이션
  • Pillow / OpenCV: 이미지 캡처 및 전처리
  • 멀티모달 LLM API: (예: OpenAI, Anthropic)
  • PyQt / Tkinter: 플로팅 윈도우 UI

예제

# LangGraph 워크플로우 예제 (의사 코드)
from langgraph.graph import StateGraph

# 워크플로우 단계 정의
graph = StateGraph()
graph.add_node("capture", capture_screen)
graph.add_node("analyze", analyze_with_llm)
graph.add_node("display", display_result)
graph.set_entry_point("capture")
graph.add_edge("capture", "analyze")
graph.add_edge("analyze", "display")

# 그래프 실행
app = graph.compile()
result = app.invoke({"region": None})

환경 변수

  • OPENAI_API_KEY: OpenAI 멀티모달 모델 사용 시 필요
  • ANTHROPIC_API_KEY: Claude Vision 모델 사용 시 필요
  • SCREEN_FLOW_CONFIG: 설정 파일 경로 (선택 사항)

관련 스킬