Communitygithub.com

hraness/transmute

다이어그램, 이미지 생성, 벡터화 및 타입 기반 워크플로우를 위한 헤드리스 시각 미디어 SDK, Bun CLI 및 에이전트 스킬입니다.

transmute란 무엇인가요?

Transmute는 개발자와 AI 에이전트가 다이어그램 작성, 이미지 생성, 벡터화 및 타입 기반 워크플로우를 자동화할 수 있도록 설계된 헤드리스 시각 미디어 SDK이자 Bun CLI 도구입니다. 주로 Claude Code, Cursor, Codex와 같은 AI 코딩 에이전트 환경에서 사용되며, `.diagram.json` 소스 파일을 중심으로 `.light.svg`, `.dark.png`, `.tldr` 등의 아티팩트를 결정론적으로 생성합니다. 사용자 프롬프트를 그대로 존중하여 추가적인 장식이나 해석 없이 정확한 시각화를 제공하는 것이 핵심 원칙입니다. MCP 서버 지원을 통해 AI 에이전트가 직접 다이어그램을 체크하고 렌더링할 수 있으며, 호스티드 이미지 생성(WebP) 및 로컬 벡터화(SVG) 기능도 포함되어 있습니다. 또한 3D 및 메탈릭 로고 렌더링을 위한 참조 기반 워크플로우를 지원하지만, 이는 데스크톱 환경에서만 가능합니다.

지원 대상~Claude Code✓Codex CLI~Cursor
npx skills add hraness/transmute

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

명확한 다이어그램 만들기

설치된 transmute CLI를 결정론적 어댑터로 사용하세요. 작성된 .diagram.json 소스는 보존하고, .light.svg, .dark.svg, .light.png, .dark.png, .tldr는 교체 가능한 내보내기 파일로 취급하세요.

프롬프트를 문자 그대로 따르기

사용자의 프롬프트를 완전한 내용 명세로 취급하세요.

  • 제공된 레이블, 값, 관계, 상대적 크기 및 생략 사항을 보존하세요.
  • 해당 사실을 그리는 데 필요한 중립적인 메커니즘만 추가하세요.
  • 제목, 부제목, 범례, 주석, 예시, 함의, 범주, 지표, 눈금 표시, 연결선 또는 장식적 주장을 임의로 만들지 마세요.
  • 짧은 레이블을 문장으로 확장하지 마세요. 사용자가 제공한 1~3단어 레이블을 선호하세요.
  • 업데이트 시, 거부된 내용을 새로운 설명으로 대체하지 말고 제거하세요.

소스 찾기

  1. 로컬 저장소 지침을 읽고 transmute.config.* 파일을 찾으세요.
  2. 새로 만들기 전에 기존에 동일 주제의 .diagram.json 파일이 있는지 검색하세요.
  3. 생성된 이미지를 편집하거나 중복을 만들지 말고 해당 소스를 업데이트하세요.
  4. info/ 디렉토리가 있는 지식 베이스에서는 info/diagrams/<slug>.diagram.json을 사용하고 info/notes/<slug>.md와 짝을 이루세요. 여전히 kb/를 사용하는 저장소에서는 동일한 상대 경로를 사용하세요. 호스트의 규칙에 따라 렌더링된 라이트/다크 이미지를 임베드하거나 링크하고, 이진 캔버스가 아닌 노트를 통해 지식을 연결하세요.
  5. 지식 베이스 외부에서는 기본값으로 diagrams/<slug>.diagram.json을 사용하세요.

시각적 구성

다이어그램을 만들거나 실질적으로 재설계하기 전에 visual-communication.md를 읽으세요.

다음 기본값을 깊이 적용하세요:

  • 일반 개념에는 둥근 사각형을 사용하세요. 동일한 역할은 동일한 크기, 모서리 반경, 선 두께, 아이콘 크기 및 레이블 처리를 가집니다.
  • 연결된 도형 사이에 최소 96px, 가급적 120–200px의 간격을 두어 화살표가 이음새가 아닌 관계로 읽히도록 하세요.
  • 아이콘은 해당 의미론적 도형 내부에 직접 배치하세요. 테두리가 있는 아이콘 타일을 테두리가 있는 다른 카드 내부에 배치하지 마세요.
  • 프롬프트가 추상을 허용하는 경우 3~7개의 기본 요소를 사용하세요.
  • 명확한 읽기 순서를 설정하고 동등한 요소를 공유 그리드에 정렬하세요.
  • 그룹을 분리하려면 테두리, 색상 또는 문장보다 먼저 공백을 사용하세요.
  • 최대 하나의 의미론적 구분에 색상을 사용하세요. 프롬프트가 제공하지 않은 차이점을 암시하는 임의의 크기나 스타일 변경을 절대 만들지 마세요.
  • 아이콘은 보조적인 역할을 유지하세요. 레이블이 여전히 의미를 전달해야 합니다.
  • 객체당 하나의 가시적 테두리와 축 또는 연결선당 하나의 가시적 선을 선호하세요.

이러한 선호도를 충족시키기 위해 리터럴 데이터를 "개선"하지 마세요. 프롬프트가 우선합니다.

결정론적 레이아웃이 일반 좌표를 소유하도록 하기

하나의 수평 또는 수직 시퀀스에는 좌표 없는 stack 레이아웃을 사용하세요:

{
  "layout": {
    "type": "stack",
    "direction": "horizontal",
    "gap": 160,
    "align": "center"
  }
}
  • 배열 순서는 배치만 제어합니다. 프롬프트가 해당 관계를 제공한 경우에만 모서리를 그리세요.
  • 스택 도형은 직사각형 또는 타원형으로 유지하고 x 및 y는 생략하세요.
  • 프롬프트나 게시 프레임에서 다른 간격이 필요한 경우가 아니라면 기본 160px 간격을 사용하세요.
  • 분기, 인접하지 않은 모서리, 차트, 자유 텍스트, 선 또는 의도적으로 동일하지 않은 배치의 경우 위치 지정 모드로 전환하세요. 이러한 의미를 1차원 스택에 강제로 넣지 마세요.
  • 스택이 맞지 않으면 캔버스를 늘리거나 작성된 치수를 명시적으로 줄이세요. 도형이나 간격을 자동으로 줄이지 마세요.

작성 및 렌더링

퍼블릭 스키마 URL을 사용하거나 시작 파일을 위해 transmute diagram init을 실행하세요:

 transmute diagram check diagrams/<slug>.diagram.json --strict
 transmute diagram render diagrams/<slug>.diagram.json

렌더 명령은 일관된 동일 스템 내보내기 파일을 덮어씁니다. 레이아웃이나 대비가 확실하지 않은 경우 라이트 및 다크 출력을 모두 검사하세요. 유용한 lint 결과를 모두 처리하고, 소스를 변경한 후 다시 렌더링하세요.

저장소가 자체 글꼴 또는 아이콘 패키지를 사용하는 경우 customization.md를 읽으세요. 저장소에 MonoLisa 또는 기타 라이선스 글꼴을 추가하지 마세요. 기본 렌더링은 시스템 산세리프 스택을 사용합니다.

호스티드 이미지 생성 전 인증

호스티드 생성이 AUTH_REQUIRED를 보고하면 OAuth 브라우저 흐름을 사용하세요:

 transmute auth login
 transmute auth status

콜백은 http://127.0.0.1:49671/oauth/callback으로 고정됩니다. 토큰은 Bun.secrets를 통해 운영 체제 자격 증명 저장소에만 속합니다. 사용자에게 토큰을 붙여넣도록 요청하거나, 파일에 복사하거나, 작업 출력에 출력하거나, 검색을 우회하도록 요청하지 마세요. 지원되는 macOS 및 Linux 호스트에서 transmute auth logout은 가능한 경우 원격 자격 증명을 취소하고 로컬 자격 증명을 제거합니다. 로그인, 갱신 및 로그아웃은 프로세스 범위에 바인딩된 조정을 사용합니다. 리스 디렉토리를 Linux PID 네임스페이스 간에 공유하면 다른 범위의 마커를 삭제하지 않고 실패로 종료됩니다. Windows에서는 Transmute가 동등한 프라이빗 네이티브 조정 프리미티브를 가질 때까지 자격 증명 변이가 실패로 종료됩니다.

호스티드 WebP를 문자 그대로 하나 생성하기

사용자가 호스티드 래스터 생성을 명시적으로 요청하는 경우, 프롬프트를 보강하지 않고 그대로 유지하세요:

 transmute image generate '<literal prompt>' --output path/to/image.webp

기본 모델은 recraft/recraft-v4.1-utility입니다. 사용자가 요청하거나 그 동작이 요청된 결과에 중요한 경우에만 --model openai/gpt-image-1.5를 사용하세요. 지원되는 ID는 이것들뿐입니다.

호스티드 생성은 인증되고 제한된 무료 미리보기입니다. UTC 일일 계정 한도는 10개이고 전역 일일 안전 한도는 100개입니다. 결제는 아직 시행되지 않습니다. 벡터화는 별도로 관리되며 로컬, 무료 및 인증 없이 유지됩니다.

  • 필수 .webp 출력 경로를 사용자가 요청한 작업 공간 내에 유지하세요.
  • CLI가 멱등성 UUID를 생성하도록 하세요. 호출자가 이미 안정적인 16~128자 키를 소유한 경우에만 --idempotency-key를 제공하세요. 서비스는 스위트 계정 범위 내에서 키를 지속적으로 저장합니다.
  • 실패한 생성 호출을 재시도하지 마세요: 오류는 지속적인 계정 범위 멱등성에도 불구하고 모호할 수 있습니다.
  • 이미지를 직접 디코딩, 쓰기 또는 신뢰하지 마세요. CLI는 정식 base64를 바인딩하고, RIFF/WebP 미디어 매직을 검증하며, 원자적으로 게시합니다.

참조 기반 3D 및 재질 워크플로우를 의도적으로 사용하기

사용자가 생성되었거나 제공된 이미지를 Three.js 장면, 저폴리곤 객체, 투명 3D 루프 또는 메탈릭 로고 제품 렌더링으로 전환해 달라고 요청하는 경우 reference-led-3d.md를 읽으세요.

이는 현재 데스크톱과 함께 배포되는 완전한 로컬 코드 모드 호스트 기능입니다. 공개 헤드리스 Bun 러너는 이미지를 생성하고 네 가지 고정된 이식 가능한 작업을 실행할 수 있지만, HTML 오버레이, Three.js 또는 개인 프로젝트 렌더러를 실행하지는 않습니다. 데스크톱 셸은 다른 워크플로우 모델 대신 네이티브 캡처, 권한 및 UI를 제공합니다. 그 이상을 암시하지 마세요. 로컬 코드 모드에서:

  • 이미지-투-Three 작업을 참조 생성, 소스 작성, 검토, 미리보기, 최종 렌더링 순서로 진행하세요. 모델이 생성한 JavaScript를 의미론적 작업에 직접 보내지 마세요.
  • 시각적으로 합성되지 않은 경우라도 정확한 참조 아티팩트를 createThreeReferenceScaffoldInput으로 검토된 장면에 바인딩하세요.
  • 참조 기반 정사각형 제품 처리를 위해 createMetallicLogoImageRequest를 사용하세요. 모델 선택을 명시적으로 유지하고 결과를 수락하기 전에 정체성 충실도를 검사하세요.
  • 먼저 1배율로 전체 길이 미리보기를 렌더링하세요. 소스와 처리를 선택한 후에만 해상도나 장치 스케일을 높이세요.

의미를 변경하지 않고 래스터 벡터화하기

사용자가 소유한 래스터 아트워크를 SVG로 변환해 달라고 요청하는 경우, 래스터를 소스로 유지하고 SVG를 교체 가능한 파생물로 취급하세요:

 transmute image vectorize path/to/input.png --output path/to/input.svg --json
  • 벡터화를 위해 인증하지 마세요. 변환은 로컬이며 검색, OAuth, 생성 또는 기타 네트워크 엔드포인트에 접촉하지 않습니다.
  • 명령이 측정하는 추적 메커니즘 이상으로 주제를 다시 그리거나, 레이블을 변경하거나, 자르거나, 색상을 변경하거나, 단순화하지 마세요.
  • 사용자가 명시적으로 해당 2색 적응을 요청한 경우에만 --duotone '#primary,#secondary'를 사용하세요.
  • 감사 가능성이 중요한 경우 작업 출력 또는 인접한 출처 기록에 발행된 영수증을 보존하세요.
  • 입력, 디코딩된 픽셀, 기간, 경로, 바이트 또는 충실도 게이트를 우회하지 마세요.
  • 의도된 크기로 SVG를 검사하세요. 성공적인 추적이 낯선 기호가 의도된 개념을 전달한다는 증거는 아닙니다.

VTracer는 첫 사용 시 체크섬이 고정된 공식 릴리스에서 다운로드됩니다. 호환되는 로컬 0.6.4 바이너리에만 TRANSMUTE_VTRACER_PATH를 사용하세요. Transmute는 여전히 해시를 기록합니다. 추적을 통과시키기 위해 업스케일링 모델, 임베디드 래스터 폴백 또는 상업용 글꼴을 추가하지 마세요.

제한된 벡터화는 현재 macOS 및 Linux에서 지원됩니다. Windows에서는 의도적인 tool_platform 실패를 보고하세요. 무제한 임시 출력 파일로 이를 우회하지 마세요.

연결된 도구 서버를 좁게 사용하기

Transmute MCP가 연결된 경우, 간단한 호환성 호출을 위해 전용 check_diagram 및 render_diagram 도구를 보존하세요. search_transmute를 사용하여 고정된 의미론적 레지스트리를 검색하고 execute_transmute를 하나의 정확한 반환 코드와 타입이 지정된 JSON과 함께 사용하세요. 확인된 다이어그램 소스를 계속 직접 편집하세요. 어떤 도구도 소스를 생성하거나 다시 쓰지 않습니다.

  • 루트 상대 .diagram.json 경로만 전달하세요.
  • check_diagram을 읽기 전용으로 취급하세요.
  • render_diagram을 다섯 개의 문서화된 생성 아티팩트를 교체하는 승인으로 취급하고, 소스는 절대 교체하지 마세요.
  • 64개 도형 또는 128개 모서리 이상의 소스에는 MCP 대신 CLI를 사용하세요. MCP는 최대 40개의 결과를 반환하고 해당 목록이 잘린 경우 보고합니다.
  • MCP 모드는 의도적으로 내장 테마와 아이콘을 사용하며 작업 공간 구성을 절대 실행하지 않습니다. 신뢰할 수 있는 로컬 구성이 필요한 경우 MCP 외부에서 CLI를 사용하세요.
  • transmute.image.vectorize는 루트 상대 입력/출력 경로를 허용하고 로그인이 필요하지 않으며 래스터 바이트를 로컬로 유지합니다.
  • transmute.image.generate는 루트 상대 .webp 출력 경로가 필요하고, 제한된 이미지를 원자적으로 쓰며, 수정된 파일/요청 메타데이터만 반환합니다. 두 레지스트리 모델 ID만 사용하고 재시도하지 마세요.
  • 소스 코드, 셸 텍스트, 동적 가져오기 텍스트, 원격 URL 또는 등록되지 않은 작업 이름을 의미론적 실행에 전달하지 마세요.

MCP 없이 동등한 기계 판독 가능 CLI 인터페이스는 다음과 같습니다:

 transmute code search '<terms>' --limit 4
 transmute code execute <exact-operation-code> --input '<strict JSON object>'

tldraw를 의도적으로 사용하기

생성된 .tldr 파일은 편집 가능한 교환 형식이며 tldraw SDK나 데스크톱 앱이 필요하지 않습니다. 사용자가 직접 캔버스 편집을 원하는 경우 tldraw Offline에서 여세요:

 transmute canvas open diagrams/<slug>.tldr

선택적 앱이 없는 경우, transmute canvas install은 현재 공식 릴리스를 확인하고 게시된 SHA-256 다이제스트를 검증한 후 플랫폼 설치 프로그램을 실행합니다. 앱은 .tldr을 저장되지 않은 문서로 가져옵니다. 거기에 저장하여 최신 네이티브 .tldraw 번들을 만드세요. 네이티브 .tldraw ZIP/SQLite 번들을 직접 다시 쓰지 마세요.

확인

  1. transmute diagram check <source> --strict를 실행하세요.
  2. transmute diagram render <source>를 실행하세요.
  3. 다섯 개의 아티팩트가 모두 소스 옆이나 요청된 출력 디렉토리에 존재하는지 확인하세요.
  4. 실제 크기로 라이트 및 다크 출력을 검사하세요.
  5. 동등한 도형이 거짓된 차이를 암시하지 않는지 확인하세요.
  6. 연결선이 길고, .tldr에서 의도된 도형에 바인딩되어 있으며, 레이블을 가로지르지 않는지 확인하세요.
  7. 동반 노트가 필요한 경우 해당 경로와 시각적 참조를 확인하세요.

관련 스킬