1

익숙하지 않은 코드에 작업할 때, 먼저 코드가 어떻게 작동하는지 시각화하기 위해 /visual-plan 스킬을 사용하는 것을 좋아합니다.

"/visual-plan 사용자 API가 어떻게 작동하는지 보여줘" 같은 프롬프트를 실행하면, 리포지토리에 있었으면 좋았을 문서가 생성됩니다.

API는 매개변수, 응답 유형 등과 함께 Swagger-like UI로 배치됩니다.

아키텍처와 데이터 흐름은 다이어그램으로 생성되고, UX 흐름은 스토리보드로, 기본 데이터 구조는 스키마 맵으로 생성됩니다 등.

가장 중요한 부분: /visual-plan 스킬은 내부적으로 MDX를 사용하므로 놀랍게도 토큰 효율적입니다.

매번 HTML을 출력하듯 이 UI 전체를 처음부터 코딩하지 않고, 대신 JSX를 사용한 재사용 가능한 컴포넌트를 사용하며, 자신의 컴포넌트로 사용자 정의할 수 있습니다.

또한 Claude나 Codex가 모든 풀 리퀘스트에 시각적 요약을 게시할 수 있도록 설치할 수 있는 GitHub 액션이 있어서, 같은 방식으로 정확히 무엇이 변경되었는지 쉽게 스캔할 수 있습니다. UI, API, 그리고 주석이 달린 업데이트된 주요 코드의 시각적이고 스캔 가능한 diff.

이 모든 것은 제 GitHub에서 오픈 소스입니다. 스레드에서 링크하겠습니다:

{{IMAGE_0}}

2

Skill source with install instructions:
https://
github.com/BuilderIO/skil
ls
…
Source for the MDX viewer/editor:
https://
github.com/BuilderIO/agen
t-native/
…

https://t.co/SN3zbryZ1i
https://t.co/Sz2T2g6odi