iFLYTEK의 오픈 에이전트 스킬 라이브러리인 **iFly-Skills**에 새로운 스킬인 animated-sketch-diagram이 추가되었습니다. 이 스킬은 아키텍처나 흐름도(flow diagram)를 손으로 그린 듯한 "베이지색 종이 위의 잉크" 애니메이션으로 변환하며, 이 애니메이션은 단순히 장식하는 것이 아니라 실제로 시스템을 _설명(narrate)_합니다.

(해당 스킬 자체 데모의 한 프레임입니다. 점들이 실제 토폴로지(topology)를 따라 흐릅니다 — 계획(plan) → 실행(act) → 관찰(observe) → 성찰(reflect) → 루프(loop).)

생성 결과물

단일 독립된 HTML (self-contained HTML) 파일: 인라인 SVG + CSS 애니메이션 + base64 폰트로 구성되며, JS 런타임(JS runtime)이 전혀 필요 없습니다. 더블 클릭하면 바로 재생되며 오프라인에서도 작동합니다. 공유 가능한 자산이 필요한 경우, 번들링된 headless-Chrome 렌더러를 통해 픽셀 단위로 완벽하고 끊김 없이 반복되는 GIF로 내보낼 수 있습니다.

차별점

• 설명하는 움직임. 흐르는 점들이 기본 설정된 일방향 파이프라인이 아니라, 분기(branches), 병합(merges), 피드백 루프(feedback loops) 등 시스템의 실제 토폴로지(topology)를 따라갑니다. 주제가 사이클(플라이휠, 에이전트 루프 등)이라면 애니메이션 또한 사이클이 됩니다.
• 단일 파일, 제로 런타임. 순수 @keyframes + offset-path를 사용하며, SMIL이나 애니메이션을 구동하는 JS가 없습니다. 이러한 제약 덕분에 결정론적(deterministic)이고 끊김 없는 GIF 내보내기가 가능합니다.
• 스타일 룰렛이 아닌 토큰 디자인 시스템. 고정된 팔레트, 선 두께(stroke width), 모서리 반경(corner radius), 애니메이션 리듬이 스타일 가이드에 정의되어 있어, 결과물이 다이어그램 전반에 걸쳐 일관되고 인식 가능한 상태를 유지합니다.
• 내장된 자체 점검 루프. 렌더링 후, 스킬이 프레임을 다시 읽어 명확성 / 레이아웃 / 움직임 / 토폴로지를 기준표(rubric)에 따라 확인하고, 문제를 수정한 뒤 전달하기 전에 다시 렌더링합니다.
• CJK 지원. OFL LXGW WenKai Screen(자동 서브셋화됨)이 포함되어 있어 중국어 라벨이 올바르게 렌더링됩니다.

사용 방법

어떤 프로젝트에서든 에이전트에게 다음과 같이 요청하세요:

RAG 파이프라인이 어떻게 작동하는지 애니메이션 스케치 다이어그램으로 그려줘.

GIF 내보내기 (Node.js, Chrome/Chromium 및 ffmpeg 필요):

node scripts/render-gif.mjs diagram.html diagram.gif --fps 25 --loop 3000 --scale 2

링크

• Skill: iflytek/iFly-Skills · skills/animated-sketch-diagram
• iFly-Skills 라이브러리: github.com/iflytek/iFly-Skills
• 상위 프로젝트 (MIT): OLDyade/animated-sketch-diagram

Skill 코드는 MIT이며, 번들된 폰트는 SIL OFL 1.1이고 rough.js는 MIT입니다. iFly-Skills 라이브러리에 대한 기여를 환영합니다.