r/ClaudeAI•약 4시간 전•29•10

Claude Code가 연필로 그린 듯한 아키텍처 다이어그램을 생성하게 해주는 스킬을 만들었습니다

I made a skill that lets Claude Code draw architecture diagrams that look sketched in pencil

핵심 요약

Claude Code를 활용해 연필로 그린 듯한 질감의 다이어그램을 생성하고 스스로 검수까지 수행하는 'penciled' 스킬을 개발했습니다.

연필 질감 구현 — 2B 연필 느낌의 획과 해칭, 손글씨 라벨 등을 지원함
자체 검수 기능 — 다이어그램 생성 전 겹침이나 교차 문제를 미리 감지하고 수정함
다양한 출력 형식 — SVG, PNG 및 대화형 HTML 페이지로 결과물 제공
오픈 소스 공개 — Node 18 기반의 MIT 라이선스 프로젝트로 누구나 사용 가능

디자인 문서 만들 때마다 너무 딱딱한 기업용 느낌 말고, 그냥 화이트보드에 슥슥 그린 것 같은 다이어그램이 계속 필요하더라고. 그래서 penciled를 만들었다. 짧은 JSON 설명만 던져주면 2B 연필로 종이에 그린 듯한 다이어그램을 뽑아주는 에이전트 스킬이야. 끝이 뾰족한 선, 빗금 친 음영, 삐져나온 모서리, 손글씨 느낌의 라벨까지 다 구현했지. 이거 전부 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

피드백은 언제든 환영이야.

원문

커뮤니티 목록

r/ClaudeAI•약 4시간 전•29•10

Claude Code가 연필로 그린 듯한 아키텍처 다이어그램을 생성하게 해주는 스킬을 만들었습니다

I made a skill that lets Claude Code draw architecture diagrams that look sketched in pencil

핵심 요약

Claude Code를 활용해 연필로 그린 듯한 질감의 다이어그램을 생성하고 스스로 검수까지 수행하는 'penciled' 스킬을 개발했습니다.

연필 질감 구현 — 2B 연필 느낌의 획과 해칭, 손글씨 라벨 등을 지원함
자체 검수 기능 — 다이어그램 생성 전 겹침이나 교차 문제를 미리 감지하고 수정함
다양한 출력 형식 — SVG, PNG 및 대화형 HTML 페이지로 결과물 제공
오픈 소스 공개 — Node 18 기반의 MIT 라이선스 프로젝트로 누구나 사용 가능

설치: 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

피드백은 언제든 환영이야.

주요 댓글

r/claudeai

사용자들은 그리기 전 스스로 검사하는 기능에 대해 긍정적으로 평가하며, 레이아웃 유지 기능에 대한 기술적 논의를 나누고 있음.

그냥 Mermaid나 Excalidraw를 쓰면 안 됨? 둘 다 Claude가 완벽하게 초안을 작성할 수 있는 텍스트 기반 포맷인데.

둘 다 훌륭한 도구고, 본인 용도에 맞다면 그게 정답이지. penciled는 연필로 그린 듯한 느낌(흑연 질감, 해칭, 종이 질감)을 특별히 원할 때 쓰는 거야. 그리고 에이전트가 화살표 교차, 겹침, 라벨 밀집 문제를 인지해서 보여주기 전에 스스로 수정하게 만드는 검수 기능도 추가했어.

나도 내 ADE에서 그렇게 하고 있는데, 에이전트가 excalidraw json을 작성하고 렌더링해줌. 써보고 싶으면 Pragma sh라고 부르면 됨.

이거 쩌는데, 당장 써봐야겠다. 연필 종류를 바꿀 수 있는 옵션도 있어? 9B랑 6H 사이(그리고 그 외 전부)처럼 말이야.

고마워! 지금은 HB, 2B, 4B 세 가지 등급이 있어. "paper": { "pencil": "4B" }로 설정하거나 플레이그라운드랑 뷰어에서 토글을 사용하면 돼. 6H에서 9B까지 전체 범위를 넣는 건 좋은 아이디어네, 추가할게.

그리기 전에 스스로 검사하는 기능이 진짜 똑똑하네. 대부분의 다이어그램 툴은 에이전트가 화살표 꼬인 걸 그냥 던져주고 끝내버리거든. 시간이 지나면서 바뀌는 다이어그램도 처리 가능해? 리팩토링 후에 레이아웃 전체가 튀지 않고 다시 생성되는 거 말이야.

고마워! 완전히 결정론적이라서 같은 JSON과 시드를 쓰면 항상 똑같은 그림이 나와. 그래서 라벨 이름을 바꾸거나 스타일을 바꾸는 정도의 작은 수정은 레이아웃에 영향을 안 줘. 하지만 노드를 추가하거나 삭제하면 레이아웃이 매번 처음부터 다시 계산되니까 배치가 바뀔 수는 있어. 만약 고정하고 싶으면 각 노드에 위치를 지정해주면 돼. 재생성할 때 이전 레이아웃을 유지하는 기능은 아직 안 만들었는데, 진짜 좋은 아이디어네.

원문r/ClaudeAI