kitlangton/scrawl

Scrawl – AI 에이전트용 캡처 및 설명 도구

기능

• 전역 단축키(⌥⇧S)를 눌러 짧은 화면 세션을 녹화할 수 있습니다. 녹화 중에는 말하고, 클릭하고, 스크롤하고, 화면에 그림을 그릴 수 있습니다.
• 중지하면 Scrawl이 다음을 번들로 묶습니다:
  1. 잉크 오버레이가 포함된 주요 프레임의 콘택트 시트 이미지.
  2. 각 주요 프레임의 전체 해상도 PNG.
  3. 시간 동기화된 대본 및 상호작용 타임라인(summary.md).
  4. 창, 커서 경로, 자동 크롭 영역, 캡처 전송 대상을 설명하는 JSON 매니페스트(scrawl.json).
• 번들은 기본 검토 창에서 열거나, OpenCode(Claude 스타일) 세션으로 보내거나, MP4로 내보낼 수 있습니다.

AI에 중요한 이유

• 번들은 LLM 에이전트가 처리할 수 있는 시각+언어 작업의 구조화된 표현입니다. 에이전트는 콘택트 시트와 대본을 읽은 후 더 자세한 보기(scrawl zoom …)나 개별 프레임을 요청할 수 있습니다.
• Scrawl은 에이전트 스킬(bunx skills add kitlangton/scrawl)을 제공하며, 이는 Claude Code, OpenCode, Codex 등에 scrawl 명령을 등록하여 에이전트가 캡처된 컨텍스트를 자동으로 가져오고 탐색할 수 있게 합니다.

주요 기능

기능	제공 내용
원클릭 녹화	전역 단축키로 캡처 시작/중지; 영역, 창 또는 iPhone 화면을 선택하기 위한 길게 누르기 옵션.
오디오 + 전사	Apple Speech(또는 Hex)를 사용하여 초기 권한 외에 마이크 권한 없이 동기화된 대본 생성.
실시간 주석	빨간색 스트로크, 번호 핀, ⌘Z로 실행 취소 – 모두 최종 프레임에 포함.
자동 크롭	전체 화면 캡처 후 Scrawl이 커서 이동, 클릭, 잉크를 분석하여 각 키프레임을 관련 창으로 자동 크롭.
에이전트 통합	scrawl zoom, scrawl frames, scrawl send, scrawl export 명령으로 LLM이 집중 프레임을 검색하거나, 번들을 OpenCode 세션으로 보내거나, 공유 가능한 비디오를 생성.
개발 사이트 라우팅	캡처가 로컬 개발 사이트에서 끝나면 Scrawl이 프로젝트의 OpenCode 세션을 자동 감지(작은 SDK 스크립트 또는 로컬 git 저장소 검사)하여 번들을 전송.
크로스 플랫폼	네이티브 macOS 앱(Apple Silicon, macOS 26+), 미리보기 가능한 Windows 빌드(미리보기, 자동 업데이트 없음).
CLI 유틸리티	모든 작업(preview, inspect, frames, export, autocrop, mic, devices 등)은 cargo run -- …로 파워 유저 및 자동화에 사용 가능.
자동 업데이트	macOS 버전은 Sparkle로 업데이트; Windows 버전은 수동 zip.

사용 방법

1. 앱을 설치합니다(macOS에서는 Homebrew cask, Windows에서는 zip).
2. 에이전트 스킬 추가(bunx skills add kitlangton/scrawl).
3. ⌥⇧S를 누르고 문제를 시연(말하고, 클릭하고, 그리기)한 후 다시 누릅니다.
4. 번들이 ~/Downloads(또는 사용자 지정 폴더)에 나타납니다.
5. LLM 채팅에서 번들을 붙여넣거나 scrawl send …를 실행하여 에이전트가 검사하도록 합니다.

AI 어시스턴트를 위한 일반적인 워크플로

• 사용자가 UI 버그 워크스루를 녹화합니다.
• 에이전트가 번들을 받아 대본을 읽고 콘택트 시트를 본 다음 특정 순간에 대한 확대를 요청합니다(scrawl zoom demo.scrawl --at "error dialog").
• 에이전트가 확대된 프레임을 분석하고 수정을 제안하며, 선택적으로 팀과 공유할 짧은 비디오를 내보냅니다.

기술 노트

• 권한: 화면 녹화, 마이크, 손쉬운 사용, 및 (선택 사항) iPhone 미러링용 카메라.
• 자동 크롭 알고리즘은 Rust(src/autocrop.rs)로 구현되며 로컬 JSON 구성 또는 라이브 웹 UI(scrawl autocrop … --serve)로 조정할 수 있습니다.
• 모든 구성은 ~/.config/scrawl/config.json에 저장됩니다.

유용할 수 있는 대상

• LLM 에이전트에게 UI 디버깅, 온보딩, 문서화를 위한 구체적인 시각적 컨텍스트를 제공하려는 개발자.
• 사용자 지정 스킬을 지원하는 Claude 스타일 "코드 어시스턴트" 에이전트를 사용하는 팀.
• 화면+음성 워크스루의 빠르고 검색 가능한 기록이 필요한 모든 사람.

---

모든 세부 사항은 프로젝트의 README에서 직접 가져왔습니다; 추가 기능은 추론되지 않았습니다.