# 익숙하지 않은 코드에 작업할 때, 먼저 코드가 어떻게 작동하는지 시각화하기 위해 /visual-plan 스킬을 사용하는 것을 좋아합니다.
Canonical: https://social-archive.org/yena/zWaP6oG7t8
Original URL: https://x.com/Steve8708/status/2071962279135125560
Author: Steve (Builder.io)
Platform: x
## Content
## 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