mcpField
I
image

image

github.com/vercel-labsクリエイティブ・メディア18.8k1.5k 回インストール5 日前に更新
リポジトリ

image について

@json-render/imageは、JSON仕様をSVGまたはPNG画像に変換するパッケージです。標準コンポーネントを備え、独自のコンポーネントカタログも定義できます。

主な機能

  1. 01JSON仕様をSVGに変換
  2. 02JSON仕様をPNGに変換
  3. 03標準のレイアウト・コンテンツコンポーネント
  4. 04独自コンポーネントカタログの定義

活用シーン

  1. 01構造化された画像仕様をSVGで出力
  2. 02仕様からPNG画像を生成
  3. 03AIプロンプト用の利用可能なコンポーネントを定義

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/vercel-labs/json-render --skill image

インストール後、Claude Code で/imageを入力して読み込まれたか確認します。

詳細

@json-render/image

Satori を使用して、JSON 仕様を SVG および PNG 画像に変換する画像レンダラーです。

クイックスタート

import { renderToPng } from "@json-render/image/render";
import type { Spec } from "@json-render/core";

const spec: Spec = {
  root: "frame",
  elements: {
    frame: {
      type: "Frame",
      props: { width: 1200, height: 630, backgroundColor: "#1a1a2e" },
      children: ["heading"],
    },
    heading: {
      type: "Heading",
      props: { text: "Hello World", level: "h1", color: "#ffffff" },
      children: [],
    },
  },
};

const png = await renderToPng(spec, {
  fonts: [{ name: "Inter", data: fontData, weight: 400, style: "normal" }],
});

標準コンポーネントの使用

import { defineCatalog } from "@json-render/core";
import { schema, standardComponentDefinitions } from "@json-render/image";

export const imageCatalog = defineCatalog(schema, {
  components: standardComponentDefinitions,
});

カスタムコンポーネントの追加

import { z } from "zod";

const catalog = defineCatalog(schema, {
  components: {
    ...standardComponentDefinitions,
    Badge: {
      props: z.object({ label: z.string(), color: z.string().nullable() }),
      slots: [],
      description: "A colored badge label",
    },
  },
});

標準コンポーネント

コンポーネントカテゴリ説明
Frameルートルートコンテナーです。幅、高さ、背景を定義します。ルートである必要があります。
Boxレイアウトパディング、マージン、ボーダー、絶対位置指定に対応したコンテナーです
Rowレイアウト水平方向のフレックスレイアウトです
Columnレイアウト垂直方向のフレックスレイアウトです
Headingコンテンツh1〜h4 の見出しテキストです
Textコンテンツスタイルを細かく設定できる本文テキストです
ImageコンテンツURL から取得する画像です
Divider装飾水平の区切り線です
Spacer装飾空の垂直スペースです

主なエクスポート

エクスポート目的
renderToSvg仕様を SVG 文字列にレンダリングします
renderToPng仕様を PNG バッファーにレンダリングします（@resvg/resvg-js が必要です）
schema画像要素のスキーマです
standardComponents事前構築済みのコンポーネントレジストリです
standardComponentDefinitionsAI プロンプト用のカタログ定義です

サブパスエクスポート

エクスポート説明
@json-render/imageパッケージ全体：スキーマ、コンポーネント、レンダリング関数
@json-render/image/serverスキーマとカタログ定義のみ（React/Satori を含みません）
@json-render/image/catalog標準コンポーネントの定義と型
@json-render/image/renderレンダリング関数のみ

コメント

Markdown 対応