# 智能体 · 版式预览出图

> 把智能体的设计稿渲染成 PNG 图片看效果：屏幕品类按目标像素出图（如朋友圈图 1080 宽），长图按内容高度整页输出，还能放大倍率看细节。改稿看效果全靠它。

- 分类：智能体工具箱
- 关键词：版式预览、设计稿出图、渲染PNG、看设计效果、设计预览图、稿子预览、出图看效果
- 在线原文：https://www.xyltools.com/docs/design-render-preview

---

## 功能简介

智能体做设计，写的是 HTML/CSS 版式代码——预览出图把这些代码渲染成 PNG 图片。这样一来你能直接看到成品效果，智能体也靠它"看"自己的稿子：宣布设计做好之前必须先渲染一张，没预览过的稿子等于没做。

渲染方式会跟着品类走：屏幕品类（朋友圈图、公众号封面）按目标像素宽度出图；印刷品类（名片、海报）按毫米尺寸自动换算。长图默认按内容实际高度整页输出，不会被截断。

> **典型场景**：智能体做完一版开业海报，先渲染预览图给你确认方向；你觉得标题不够醒目，让它调整后重新出图——来回几轮都在"看图说话"，比反复描述高效得多。

## 操作步骤

1. **让智能体出稿**：描述需求（品类、尺寸、文案、风格），它会先取规格再写出设计稿。
2. **渲染成图看效果**：出稿后让它渲染预览图（设计流程中会自动进行）；你也可以直接说"先渲一张看看"。
3. **看图提意见**：颜色、字号、间距、对齐，哪里不满意直接说，它改完重新渲染给你看。
4. **定稿并交付**：效果满意后，按品类输出最终文件——只在屏幕用就是这张 PNG，要送印则转印刷 PDF。

## 示例话术

- 先出一版看看效果，确认方向之后再细化。
- 标题再大一点、颜色再深一点，重新出一张给我看。
- 把这张稿子放大两倍出图，我要检查细节。
- 出两张不同配色的版本，我对比一下。

## 注意事项

- **出图尺寸**：屏幕品类按目标像素宽（如朋友圈图 1080）；印刷品类由智能体按毫米自动换算
- **整页模式**：默认按内容实际高度出整页图，长图不会被截断
- **放大看细节**：可指定输出倍率（0.5—3.0 倍），检查细部时用 2 倍
- **保存位置**：不指定路径时自动保存到程序的设计输出文件夹
- **与送印的区别**：预览图给你看效果；需要送印时再转印刷 PDF

## 相关文章

---

## 相关文章

- [效率智能体](https://www.xyltools.com/docs/efficiency-agent)
- [智能体 · 版式转印刷PDF](https://www.xyltools.com/docs/html-to-pdf)
- [智能体 · 设计系统与品类模板](https://www.xyltools.com/docs/design-system-manage)