Claude가 작업하는 모습을 애니메이션으로 보여주는 Claude Code 모드, 'Claude Fables'를 만들었습니다

Claude Code 데스크톱 앱용 모드인 Claude Fables를 만들었어. Claude가 일하는 동안 이 모드가 툴 호출이랑 Claude가 내뱉는 말 한마디 한마디를 전부 지켜봐. 몇 초마다 가장 최근 상황을 프롬프트 위쪽 밴드에 짧은 예술 장면으로 바꿔서 보여주는 식이지. 버그 잡는 건 자연 다큐멘터리가 되고, 테스트 실패하면 Claude가 넘어지고, 턴이 끝나면 달빛 비치는 마을에서 Claude가 낮잠을 자.

기능

• Claude가 7개의 수작업 조명 장면 속에서 20가지 동작(살금살금 걷기, 땅 파기, 넘어지기, 어깨 으쓱하기, 축하하기, 잠자기 등)을 하는 작은 주황색 생명체로 나타나.

• /fables style <name> 명령어로 픽셀 아트, 청사진, 우키요에, 황금기 만화 등 11가지 시각 스타일을 바꿀 수 있어.

• 캡션은 터미널처럼 색깔별로 구분돼 있어. 파일, 함수, 숫자, 실패, 성공 항목들이 각각 다르게 보여.

Claude가 이걸 만드는 데 어떻게 도움을 줬나

• 프로젝트 전체를 Claude Code(Opus 5.5)의 클라우드 환경에서 만들었어(주간 사용량이 거의 바닥나서 프로모션 크레딧까지 끌어다 썼지 🤓). 그러고 나서 GitHub에서 프로젝트를 내려받아 로컬 모드에서 테스트했어(아쉽게도 클라우드 환경에서 작업할 때는 작동을 안 하더라고).

• Claude Code가 모드의 훅(hook), 장면 검증기, 그리고 스크립트 실행 없이 각 장면을 애니메이션으로 보여주는 SVG 렌더러를 다 짰어. 마스코트 스타일 갤러리에서 3D Claude 모델을 포팅하고 테스트 코드까지 작성했지.

• README에 들어간 GIF랑 출시 영상도 Claude Code가 렌더링했어. 모드 자체 렌더러를 써서 헤드리스 Chromium에서 프레임 단위로 찍어낸 거야. 그래서 UI가 평소 보던 CC UI랑은 좀 다르게 보일 거야.

• 런타임 중에 이야기도 Claude가 직접 써. Sonnet(또는 Haiku)이 최근 활동 내역을 받아서 작은 JSON 장면으로 답을 보내거든. 모드가 이 JSON을 빡세게 검증하니까, 이상한 답변이 와도 그냥 무시하고 코드로 실행되지는 않아.

한번 써봐
무료고 GitHub에 올려뒀어: https://github.com/henrik-thevibe/Claude-Fables

1. 레포지토리를 클론해.

2. 의 블록에 있는 에 경로를 추가해.