@stdout-design / cli

故事书的图像-在你的回购和说话，你的代理。

一个CLI，用于将您自己的TSX组件呈现为像素完美的社交和营销图像。实时预览工作室，批量渲染从数据，和MCP服务器的AI代理。

快速启动

# Install
bun add -d @stdout-design/cli

# Scaffold a project
npx @stdout-design/cli init

# Render an image
npx @stdout-design/cli render bento-feature --title "Hello" --out hello.png

# Or open the live studio
npx @stdout-design/cli dev

安装

bun add -d @stdout-design/cli

或在全球范围内:

bun add -g @stdout-design/cli

先决条件: Node.js 22.22+, Bun 1.2+。

命令

运行命令 npx @stdout-design/cli <command>，或使用 bun add -g @stdout-design/cli 使用 studio <command> 直接。

工作室渲染

studio render <template> [options]

工作室开发

启动一个开发服务器 localhost:3000 :

• 当模板改变时热重新加载
• 自动生成的支柱面板
• 并排预览跨预设
• 导出模板为PNG格式

工作室init

为一个新的工作室项目搭建脚手架：

• 打印稿配置
• 入门的示例模板
• 用于批量呈现的示例数据文件
• i18n的区域设置文件

写作模板

模板是一个带有类型化道具的TSX组件：

type Props = {
  title: string;
  stat: string;
};

export default function MilestoneCard({ title, stat }: Props) {
  return (
    <div className="rounded-2xl bg-black p-8 text-white">
      <h1 className="text-4xl font-bold">{title}</h1>
      <p className="mt-2 text-lg">{stat}</p>
    </div>
  );
}

把它扔进去 templates/ 它是可以立即渲染的。

人工智能代理集成

添加到代理的MCP配置中：

{
  "mcpServers": {
    "stdout-design": {
      "command": "npx",
      "args": ["-y", "@stdout-design/cli", "mcp"]
    }
  }
}

可用的工具: list_templates， render， render_batch， list_presets

项目结构

my-project/
├── studio.config.ts      template registry, presets, locales
├── templates/            your TSX components
├── data/                 CSV/JSON for batch renders
├── locales/              translation files
└── out/                  rendered assets (gitignored)

配置

export default {
  templates: "./templates",
  presets: [
    { name: "og", width: 1200, height: 630 },
    { name: "instagram", width: 1080, height: 1080 },
  ],
  locales: ["en", "ar"],
  outDir: "./out",
};

平台预设

许可证

麻省理工学院