Communitygithub.com

hraness/transmute

図、画像生成、ベクトル化、型付きワークフローのためのヘッドレスなビジュアルメディアSDK、Bun CLI、およびエージェントスキルです。

transmute とは?

Transmuteは、開発者やAIエージェントが図、画像生成、ベクトル化、3Dマテリアルワークフローを正確に作成・管理できるように設計された、ヘッドレスなビジュアルメディアSDKおよびCLIツールです。Bunランタイム上で動作し、`.diagram.json` を唯一の信頼できるソースとし、`.light.svg`、`.dark.svg`、`.png`、`.tldr` などの出力を自動生成します。このスキルは、ユーザーのプロンプトを忠実に守り、余計な装飾や解釈を加えずに視覚的表現を構築することを重視しています。Diagrams(図)、画像生成(Recraft v4.1モデルなど)、ラスター画像のSVGベクトル化、Three.jsを用いた3Dシーン作成、tldrawキャンバス編集、MCPサーバー連携など、複数の機能を統合的に提供します。認証はOAuthブラウザフローで行い、トークンはOSのクレデンシャルストアに安全に保存されます。すべての操作はCLIを通じて実行され、AIエージェントがコード生成やファイル操作を直接行うことなく、確定的なレンダリングとバージョン管理が可能です。

対応~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個の主要要素を使用します。
  • 明確な読み取り順序を確立し、同じレベルの要素を共有グリッドに揃えます。
  • グループを分離するには、境界線、色、または散文の前に空白を使用します。
  • 色は最大1つの意味的な区別に使用します。プロンプトが提供しなかった差異を暗示する任意のサイズ変更やスタイル変更を行わないでください。
  • アイコンは補助的に保ちます。ラベルが依然として意味を伝える必要があります。
  • オブジェクトごとに1つの可視境界線、軸またはコネクタごとに1つの可視ストロークを優先します。

これらの好みを満たすためにリテラルデータを「改善」しないでください。プロンプトが優先されます。

決定論的レイアウトが通常の座標を所有する

1つの水平または垂直シーケンスには、座標フリーの 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

render コマンドは、一貫した同じステムのエクスポートを上書きします。レイアウトやコントラストが不明な場合は、ライトとダークの両方の出力を検査します。有用な 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 が同等のプライベートネイティブ調整プリミティブを持つまで、クレデンシャルの変更はクローズド状態で失敗します。

1つのホスト型 WebP を文字通り生成する

ユーザーが明示的にホスト型ラスター生成を要求した場合、プロンプトをエンリッチせずに保持します。

transmute image generate '<リテラルプロンプト>' --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 ランナーは画像を生成し、4つの固定されたポータブル操作を実行できますが、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 を1つの正確な返されたコードと型付き JSON で使用します。チェックされた図のソースを直接編集し続けます。ツールはソースを作成または書き換えません。

  • ルート相対の .diagram.json パスのみを渡します。
  • check_diagram を読み取り専用として扱います。
  • render_diagram を、5つのドキュメント化された生成アーティファクトを置き換える承認として扱います。ソースは決して置き換えません。
  • 64形状または128エッジを超えるソースには、MCP ではなく CLI を使用します。MCP は最大40の検出結果を返し、そのリストが切り詰められたときに報告します。
  • MCP モードは意図的に組み込みテーマとアイコンを使用し、ワークスペース設定を決して実行しません。信頼できるローカル設定が必要な場合は、MCP 外で CLI を使用します。
  • transmute.image.vectorize はルート相対の入力/出力パスを受け入れ、ログインを必要とせず、ラスターバイトをローカルに保持します。
  • transmute.image.generate はルート相対の .webp 出力パスを必要とし、制限付き画像をアトミックに書き込み、編集されたファイル/リクエストメタデータのみを返します。2つのレジストリモデル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. 5つのアーティファクトすべてがソースの横または要求された出力ディレクトリに存在することを確認します。
  4. ライトおよびダーク出力を実際のサイズで検査します。
  5. ピア形状が誤った差異を暗示していないことを確認します。
  6. コネクタが長く、意図された形状に .tldr でバインドされ、ラベルと交差していないことを確認します。
  7. コンパニオンノートが必要な場合は、そのパスと視覚的な参照を確認します。

関連スキル