实用设计工作流
AI 截图编辑：为真实应用画面制作营销配图
发布配图应该让产品更容易理解。如果图像编辑改写了按钮、虚构了图表或更改了数字，配图就可能变成另一个产品的画面。漂亮的边框并不能让这种改动变得无害。
本指南将实际截取的界面视为原始素材，把背景、边框与标注视为独立设计工作。Ciyo 工作流面向需要制作一张静态产品配图的创始人或营销人员，交付前须对照检查保存的文件。
我们在 Ciyo 的实际尝试没有保存带边框的成品图。提供的界面截图是真实的；以下构图和像素对比步骤说明应提出什么要求、如何验证，而不是已经完成的导出结果。
快速解答：保留界面，在周围进行设计
截取真实界面，上传前清除隐私信息，并将截图保留为独立图像图层。围绕该图层添加边框、背景与真实的说明标注。将导出图的界面区域与原图对照，并按实际展示尺寸检查整个构图。
提示词中写“保持全部内容不变”，并不保证像素不变。界面必须完全准确时，应使用保留原图的合成方式，而不是重新生成界面。
| 元素 | 事实依据 | 允许的设计调整 |
|---|---|---|
| 界面 | 实际截取的产品状态 | 明确有意的裁切或等比例缩放 |
| 说明标注 | 画面中可见的功能 | 核对事实后调整措辞与位置 |
| 背景 | 原创装饰图案 | 颜色、纹理与构图 |
| 数字与主张 | 经过核实的产品数据 | 不得虚构替代数值 |
1. 截取能够解释功能的状态
选择一个产品操作或结果。带有无关面板的完整仪表盘，可能比聚焦且真实的画面更难读。用足够清晰的分辨率截图，确认相关控件已加载完成。
尽可能使用包含虚构数据的干净演示项目。上传原图前，移除客户姓名、私人消息、令牌，以及其他不应出现在营销素材中的信息。如果重新准备干净状态比在拥挤画面中打码更容易，就重新截图。
保留原始截图的副本。如果界面经常变化，记录截图对应的产品版本或日期，让后续编辑能区分是截图过时还是设计错误。
实际示例中，我们于 2026 年 10 月 25 日在虚构的 Fern Shop 图标项目中截取了完整 Ciyo 视口，尺寸为 1312 × 655 像素。要求以原始大小粘贴，不裁切、不缩放、不做透视变换。截图内的图标板仍在审核中，不能证明图标导出已获认可。
2. 添加装饰前先确定可读构图
先决定配图将出现在哪里：落地页区块、社交帖子还是公告邮件。使用位置决定界面文字能有多大。把完整桌面画面缩进一个小方格，即使技术上清晰，实际也可能难以阅读。
重要细节过小时，可有意裁切，并说明展示的是哪部分。不要放大局部后仍将其描述为未经处理的全屏截图。保留足够周边信息，让读者理解操作。
选择平静的背景与简洁边框。夸张的透视倾斜可能很抢眼，却会扭曲文字、遮蔽产品。客观介绍功能时，正面的界面通常更容易检查。
3. 要求 Ciyo 保留原始图像
将截图上传到独立项目。告诉 Design agent 将它保留为不变的位图图层，另行制作周围构图。提供确切的标题或标注文字，避免让它自行推断产品主张。
如果返回的方法将整张截图送入生成式图像编辑，需要格外仔细检查。拒绝界面内容被改动的结果，改用保留原始像素的排版方式。装饰背景可以单独生成，无需重画应用。
围绕这张真实的 Ciyo 截图制作营销配图，截图来自虚构的 Fern Shop 图标项目。界面像素必须与上传截图完全一致：使用确定性合成，将截图不缩放地粘贴在整数坐标上，绝不使用图像生成或重绘 UI。添加象牙白边框，并在截图之外放置完全一致的英文标题 Review the whole icon set；可另加一条外部标注 Compare four covers on one canvas。不要遮挡截图或虚构产品指标。保留完整原始视口，不裁切、不做透视变换。选择能容纳原图 1:1 大小及边距的输出尺寸。将原图与最终配图保存到画布，提供可下载 PNG，并报告图像区域的 x/y/宽度/高度，以便外部像素对比验证是否保留原样。现在执行。4. 让每条标注指向可见内容
标注应解释画面中的具体部分。“一起审核四份素材”可以指向可见的画板；“每周节省十小时”则需要截图之外的证据。措辞应贴近图片实际展示的内容。
控制标注数量，并明确它们指向的位置。如果多条引线交叉，就简化构图，或为第二项功能另做一张图。更多标注不一定意味着更清晰的说明。
标注应避开重要控件和文字。高亮框可以引导注意力，但不应盖住读者需要核实的细节。
5. 对照保存的界面与原图
打开导出文件，检查其中的界面区域。对照按钮标签、图标、数字、表格行和小型状态消息。如果缩放过截图，对比时要考虑缩放比例，不要把正常重采样误认为功能变了。
留意意外模糊、重复文字、虚构边框或间距变化。视觉对比能发现许多问题；要求精确保留时，还可以将确定性合成中的对应区域与原图核对。
结果应在两种大小下检查：一种足够大，便于核对界面；另一种足够小，接近实际用途。通过其中一项不保证另一项也合格。缩小后不清楚时，应减少展示范围或改用更大的展示位置。
6. 让配图便于维护
将原始截图、确切文案和构图源文件一起保存。这样，创始人可在 UI 更新后替换界面，无需重做背景。代理公司也能将完整材料交给客户，而不是只留下合并后的单张图片。
发布前，核实功能仍以图中状态存在，周围文字也仍然准确。即使像素被完美保留，产品变化后配图仍可能产生误导。
使用 Design agent 规划与修改呈现方式，同时将真实应用截图当作依据。这样分开处理，便于尝试视觉设计，也能保住产品实际行为。
常见问题
AI 能改善截图里的文字吗？
它可能生成看起来更干净的近似内容，但也可能改变标签或事实。真实产品截图应保留原图，改善周围排版，或以更高分辨率重新截取。
文章里可以使用虚构界面吗？
只有明确标注为示意效果图时才可以。它不能证明已上线产品具有画面中的控件或结果。
需要加浏览器边框吗？
只有能帮助读者识别场景时才使用。边框只是呈现方式，不能验证内部截图的真实性。
完整界面在手机上看不清怎么办？
使用聚焦且明确说明过的裁切，或扩大展示位置。不要通过生成替代界面文字来解决问题。
为真实产品画面设计外框
将干净截图导入 Ciyo，围绕它制作背景与标注，再将导出的界面与原图对照。