클로드(Claude)가 코드를 통해 스케치 같은 아키텍처 다이어그램을 그리게 하는 기능

저는 디자인 문서에 깔끔하게 다듬어진 기업 스타일이 아닌, 빠르고 캐주얼한 '화이트보드' 다이어그램이 계속 필요해서, 짧은 JSON 설명을 2B 연필로 종이에 그린 듯한 다이어그램으로 변환하는 에이전트 스킬인 penciled를 만들었습니다. 끝이 가늘어지는 선(Tapered strokes), 해칭 음영 처리(hatched shading), 오버슈팅된 모서리, 손글씨 라벨 같은 느낌입니다. 이 기능은 전적으로 Claude Code로 구축되었습니다. 제가 설정한 마일스톤 계획에 따라 렌더러, 레이아웃 엔진, 유효성 검사기 및 테스트 코드를 작성했으며, 헤드리스 브라우저에서 스크린샷을 렌더링하고 각 단계마다 제가 승인할 때까지 비평하며 연필 느낌을 확인했습니다. 그리고 스스로 자신의 작업을 점검합니다. 그림을 그리기 전에 다이어그램이 어떻게 그려질지 정확하게 배치하고, 교차하는 화살표, 겹치는 부분, 너무 많은 라벨 등 문제가 있으면 경고와 함께 각 문제에 대한 수정 제안을 합니다. 따라서 에이전트가 사용자에게 보여주기 전에 스스로 다이어그램을 고칠 수 있습니다.

설치: npx skills add himanshu13ps/penciled (Claude Code, Cursor, Codex 및 스킬을 읽는 다른 에이전트와 함께 작동합니다)
그냥 이렇게 요청하세요: “이 리포지토리의 아키텍처를 손으로 그린 다이어그램으로 스케치해 줘”
출력물은 SVG, PNG 또는 다시 그리거나, 종이와 연필을 바꾸고, 확대할 수 있는 단일 오프라인 HTML 페이지입니다. Node 18 이상의 의존성만 필요합니다. 무료이며 MIT 라이선스입니다. 아무것도 설치하지 않고 사용해보고 싶다면 브라우저 플레이그라운드가 있습니다: https://himanshu13ps.github.io/penciled/
코드: https://github.com/himanshu13ps/penciled
피드백은 언제나 환영합니다.
submitted by /u/himanshu13ps [link] [comments]