mcpField
I
image

image

github.com/vercel-labs创意与媒体18.8k1.5k 次安装5 天前更新
代码仓库

关于 image

@json-render/image 将 JSON 规格渲染为 SVG 或 PNG，适合需要从结构化描述生成图像的开发者。它提供标准组件，也支持自定义组件目录。

主要功能

  1. 01将 JSON 规格渲染为 SVG
  2. 02将 JSON 规格渲染为 PNG
  3. 03提供标准布局与内容组件
  4. 04支持自定义组件目录

适用场景

  1. 01将结构化图像规格输出为 SVG
  2. 02将规格渲染成 PNG 图像
  3. 03为 AI 提示词定义可用组件

安装

复制下面的命令，在终端中运行。

$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预构建的组件注册表
standardComponentDefinitions用于 AI 提示词的目录定义

子路径导出

导出项描述
@json-render/image完整包：架构、组件和渲染函数
@json-render/image/server仅包含架构和目录定义（不包含 React/Satori）
@json-render/image/catalog标准组件定义和类型
@json-render/image/render仅包含渲染函数

评论

支持 Markdown