# @stdout-design/cli 中文文档

规范地址：https://npmcn.com/package/%40stdout-design/cli/

版本：0\.9\.0
npm 元数据更新时间：2026-11-02T12:08:06.404Z
中文译文更新时间：2026-11-02T13:55:15.002Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40stdout-design/cli
原文对照：https://npmcn.com/package/%40stdout-design/cli/?lang=original
项目主页：https://github.com/m7md1alaa/stdout-design#readme
源码仓库：https://github.com/m7md1alaa/stdout-design

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：89.3 kB，18 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.22
- 运行依赖：4 个
- peer 依赖：zod ^4\.4\.3
- 首次发布：2026-07-11T17:19:10.339Z
- 最新版本发布：2026-11-02T12:08:06.001Z
- 已发布版本数：32（近 12 个月 32 个）

## 中文简介

stdout-design CLI - @stdout-design/core和@stdout-design/dev-server的浅前门

## 安装

```sh
npm install @stdout-design/cli
```

也可以使用：`pnpm add @stdout-design/cli`、`yarn add @stdout-design/cli`、`bun add @stdout-design/cli`

## README

# @stdout-design / cli

 [![npm version](https://img.shields.io/npm/v/@stdout-design/cli)](https://www.npmjs.com/package/@stdout-design/cli)![MIT license](https://img.shields.io/npm/l/@stdout-design/cli) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white) ![Bun](https://img.shields.io/badge/Bun-000?logo=bun&logoColor=white) ![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)

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

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

## 快速启动

```bash
# 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
```

## 安装

```bash
bun add -d @stdout-design/cli
```

或在全球范围内:

```bash
bun add -g @stdout-design/cli
```

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

## 命令

| 命令 | 描述 |
| --- | --- |
| `studio init` | 搭建一个新的工作室项目 |
| `studio dev` | 启动实时预览工作室 |
| `studio render <template>` | 呈现单个模板或批处理 |
| `studio cache stats` | 显示缓存统计信息 |
| `studio cache clean` | 清除渲染缓存 |
| `studio lint` | 检查模板的兼容性 |

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

### 工作室渲染

```bash
studio render <template> [options]
```

| 选项 | 描述 |
| --- | --- |
| `--key value` | 将props传递给模板 |
| `--data file.csv` | 从CSV或JSON批量呈现 |
| `--preset name` | 输出预设（默认：og） |
| `--locale lang` | i18n的区域设置 |
| `--out-dir path` | 输出目录（默认：./out/） |
| `--out file.png` | 单个输出文件 |

### 工作室开发

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

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

### 工作室init

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

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

## 写作模板

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

```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配置中：

```json
{
  "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)
```

## 配置

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

## 平台预设

| 预设 | 大小 | 使用 |
| --- | --- | --- |
| 噩 | 1200×630 | 打开图表/社交卡 |
| x-card | 1200×675 | X （Twitter）卡 |
| linkedin | 1200×627 | LinkedIn链接预览 |
| instagram | 1080×1080 | Instagram上的帖子 |
| instagram-story | 1080×1920 | Instagram的故事 |
| 应用商店 | 1290×2796 | App Store截图 |
| playstore | 1080×1920 | Play Store截图 |

## 许可证

麻省理工学院

## 常见问题

### @stdout-design/cli 是什么？

stdout-design CLI - @stdout-design/core和@stdout-design/dev-server的浅前门

### 如何安装 @stdout-design/cli？

在项目目录运行 npm install @stdout-design/cli，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：zod（^4\.4\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 studio，可以用 npx studio 直接运行。

### @stdout-design/cli 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @stdout-design/cli 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @stdout-design/cli 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @stdout-design/cli 可以商用吗？

@stdout-design/cli 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @stdout-design/cli 还在维护吗？

最新版本 0\.9\.0 发布于 2026/11/02（1 天前）；至今共发布 32 个版本，其中过去 12 个月发布了 32 个；首次发布于 2026/07/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。