2026/9/11 13:32:20
FEATURED · 精选文章 
Reflex Build 图片与附件提示Images and Attachments实战指南【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex图片与附件是 Reflex Build 中把视觉上下文交给 AI 构建 Agent 的核心手段你可以把截图、文档、示例数据直接附进对话让 Agent 精确还原某个布局或基于真实数据生成功能。本文以 image_as_prompt.md 为骨架结合 Reflex 仓库中的相关文档与组件源码系统讲解附件的三种输入方式、以图作参考的提示词写法、支持的文件格式与大小限制、安全边界以及让 Agent 生成全新图片的完整流程。读完你将掌握一套可直接复用的以图生码、以数据生功能的提示工程方法。何时需要给 Agent 提供图片或附件Reflex Build 是一个用自然语言和 Python 构建全栈 Web 应用的 AI 构建器你可以用一句提示词描述需求Agent 会规划工作、更新源码、运行应用并在Preview中展示结果见 What Is Reflex Build。但纯文字描述布局、视觉层级或数据形态往往模糊且低效此时就需要借助视觉或基于文件的上下文。按照原文档的定位当 Agent 需要视觉或文件上下文时你就应该附加截图、文档或示例数据。典型场景包括想复刻某个页面的布局、导航宽度、卡片层级与间距排查一个具体的 UI 问题如组件错位、间距异常让 Agent 基于一份示例 CSV 或文档构建数据导入、预览或校验功能。附加上下文有三种入口方式任选其一即可点击对话输入框的**附件控件attachment control**选择文件直接把文件拖拽进对话窗口从剪贴板粘贴图片。以图片为参考让 Agent 精确还原布局图片往往是传达布局、视觉层级、具体 UI 问题最清晰的方式。原文档给出的核心策略是明确告诉 Agent 要复制什么、忽略什么把参考与改动的边界划清楚。一个标准的参考型提示词示例Use the attached screenshot as a layout reference. Match its navigation width, card hierarchy, and spacing, but keep the current brand colors and content.把所附截图作为布局参考。匹配它的导航宽度、卡片层级和间距但保留当前的品牌配色和内容。这段提示词遵循了三个原则值得逐条拆解明确参考对象指出附件是layout referenceAgent 知道它代表目标形态而非内容素材列出要复刻的具体维度navigation width、card hierarchy、spacing 都是可量化的布局要素比笼统说做得像它更容易对齐划定豁免范围brand colors 与 content 保持不变防止 Agent 连配色文案一起改写。原文档还补充了两条实操建议截图现有应用时附上相关路由或页面名include the relevant route or page name便于 Agent 在多页应用中对号入座把参考精确应用到对应页面当只有一个组件重要时尽量紧贴裁剪tightly crop参考图减少无关元素的干扰让 Agent 聚焦到真正要复刻的部分。图片在 Reflex 中的底层呈现rx.image 组件以图为参考最终落在 Reflex 应用中往往以rx.image组件承载。从源码看rx.image实际是 HTMLimg元素VoidBaseHTML子类Img的工厂方法别名image img Img.create见 media.py。Img组件支持以下常用属性media.py L81-L114属性含义src图片 URL必填alt图片替代文本对可访问性与 SEO 都很重要loading加载行为eager或lazy长页面建议lazy延迟加载decoding解码方式async、auto或synccross_origin图片的 CORS 请求配置referrer_policy请求图片时携带的 Referrer 策略sizes/src_set响应式图片的尺寸与多分辨率源use_map与图像热点地图image map配合的 map 名称Img.create还做了一项便利处理用户未显式传src时会把第一个子节点当作src值使用media.py L110-L114。因此当你让 Agent把截图中的 logo 放进应用时Agent 通常会用类似rx.image(src/logo.png, altApp logo)的代码把附件落进assets/目录并在页面上渲染——这一点在下一节附件与运行时资源中会进一步展开。附加文件文档与结构化数据上下文除了图片你还可以附加文档和结构化数据。Reflex Build 支持的常见格式见 Files包括文档.pdf、.doc、.docx、.odt、.rtf电子表格.xls、.xlsx、.ods、.csv、.tsv演示文稿.ppt、.pptx、.odp文本与结构化数据.txt、.md、.markdown、.json、.xml、.yaml、.yml数量与大小限制以当前仓库文档为准具体上传限额请以官方当前页面为准普通文件每个文件最大50 MB单条消息最多附加20 个文件图片Agent 可把.png、.jpg、.jpeg、.webp作为视觉提示上下文理解每条消息最多5 张每张最大5 MB见 Images。其他图片格式可以当作文件附加进应用但不会被解释为视觉提示。原文档强调附加的数据不要超过任务所需。更小、更聚焦的文件让 Agent 解析更快、更准确。比如要用示例数据构建功能就只传真正需要的列和行而不是整库导出。给每个附件一个明确任务仅上传文件还不够你需要告诉 Agent这份附件应该怎么用。原文档给出的示例Use the attached CSV as sample data. Build an import preview that maps the columns, flags malformed dates, and lets the user exclude invalid rows.把所附 CSV 当作示例数据。构建一个导入预览映射各列、标记格式错误的日期并允许用户排除无效行。这条提示词把数据用途sample data→ 功能目标import preview→ 具体行为列映射、日期校验、排除无效行一次性说清Agent 无需猜测。附件是提示上下文不是运行时资源这是最容易踩的坑附件只作为提示上下文存在不会自动成为应用的一部分。原文档明确指出——如果应用需要在运行时提供或留存该文件必须请 Agent 额外添加对应的应用资源asset、上传工作流、数据库记录或外部存储集成。这背后的机制在 Reflex 中有清晰的划分见 Upload and Download FilesAssets静态资源随应用一起发布的文件图片、样式表、脚本位于assets/目录或 Python 文件旁编译期即可用通过rx.asset()或直接路径引用Upload Directory上传目录运行期由用户上传的动态文件位于uploaded_files/可配置通过rx.get_upload_url()访问。所以当你让 Agent用附件中的 CSV 做导入时正确的做法是让 Agent 用rx.upload组件 上传事件处理函数把 CSV 作为运行时文件接收再用 Python 在事件处理器中解析——附件本身只负责把数据结构长什么样这个上下文传递给 Agent。提示词进阶把附件意图说清楚综合 Images 与 Files 两页的指导写附件提示词时建议明确回答三个问题它是视觉参考还是要提取的内容还是需要保留的现有资源三种意图对应完全不同的 Agent 行为——参考意味着照着画提取意味着读出来写进代码保留意味着原样放进应用别改复制什么、忽略什么把要复刻的维度布局、层级、间距、配色与要排除的内容现有文案、品牌色、无关区块分开声明它只是上下文还是运行时要用的数据若是后者明确要求 Agent 补上 asset、上传工作流、数据库或存储集成。另外Reflex Build 支持排队后续指令Agent 生成过程中你可以继续发送消息它会下一步拾取见 Generation Controls Collaboration。这意味着你可以先用一句用这张截图调整首页布局启动生成再排队补充表格在 768px 以下要响应式这类小约束而不必等整轮结束。生成新图片从参考到原创如果应用需要的是原创视觉hero 背景图、插画、占位图而不是对现有图片的复刻可以直接请 Agent 生成。这是 Reflex Build 内建的 Agent 工具之一另两项是联网搜索与运行 Python见 Agent Tools。生成的图片会出现在对话与应用变更中无需离开 Builder 去外部工具。原文档建议在提示词中描述预期用途、构图与约束示例Generate a wide, abstract hero background for a financial dashboard. Use navy and teal, leave the left third visually quiet for heading text, and do not add words, logos, or interface elements.为金融仪表盘生成一张宽幅抽象 hero 背景。使用海军蓝与青绿色左侧三分之一保持视觉留白用于标题文字不要添加文字、logo 或界面元素。注意这条提示词的约束密度配色navy/teal、构图左侧留白、禁区无文字/logo/界面元素全部显式声明Agent 就不容易自由发挥出不可用的素材。生成之后原文档建议按以下清单审查在Preview中以目标尺寸查看图片确认叠加在图片上的文字依然清晰可读检查移动端的裁剪与加载行为若构图或风格不对请求一次聚焦的修改focused revision而不是推倒重来。安全与隐私边界无论附加还是生成安全红线必须遵守详见 Secrets 与 Agent Tools 的 Security and Privacy 一节不要把密码、API 密钥、私有 token 或生产环境凭证写进提示词或附件凭证应存放在Secrets应用/项目级环境变量运行时通过os.environ读取或集成表单中不要要求 Agent 搜索或复现私有数据附件若含私有生产导出除非已获准用于 Reflex Build否则不要附加发布前审查检查生成资源与第三方信息联网搜索结果、附件内容确认无敏感信息外泄或错误内容被带入应用。一旦在附件中发现敏感值后续生成会持续把该上下文带在对话中因此先删后问比先问后删更安全。端到端示例从截图到可运行页面把以上要点串成一个完整流程基于原文档与 What Is Reflex Build 的典型工作流附加参考拖入目标应用首页的截图裁剪掉无关区块并在消息中写明路由如/dashboard与页面名声明意图用Use the attached screenshot as a layout reference. Match its navigation width, card hierarchy, and spacing, but keep the current brand colors and content.明确复制范围与豁免项补充数据上下文可选再附一份小 CSV 并说明它只是示例数据请 Agent 构建带校验的导入预览排队微调生成过程中补充表格在移动端改为纵向堆叠之类的后续指令预览验证在Preview中按目标尺寸检查还原度、响应式表现与加载行为必要时请求聚焦修改审查发布确认无敏感信息再走测试、部署流程。若最终页面需要展示某张图可让 Agent 用rx.image(src..., alt..., loadinglazy)将其加入应用组件属性详见 media.py并确保图片作为assets/资源随应用发布而非仅存在于对话上下文。小结图片与附件是 Reflex Build 提示工程中最具杠杆作用的一环截图解决长什么样文件解决数据长什么样生成解决没有现成素材怎么办。记住三条主线即可——附件只是上下文、不是运行时资源提示词要同时声明复制什么与忽略什么敏感信息走 Secrets 而不是 prompt。配合 Agent Tools、Files、Images 与 Secrets 四篇文档你就能把视觉与数据上下文稳定地转化为高质量的应用代码。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Reflex Build 图片与附件提示（Images and Attachments）实战指南
Reflex Build 图片与附件提示Images and Attachments实战指南【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex图片与附件是 Reflex Build 中把视觉上下文交给 AI 构建 Agent 的核心手段你可以把截图、文档、示例数据直接附进对话让 Agent 精确还原某个布局或基于真实数据生成功能。本文以 image_as_prompt.md 为骨架结合 Reflex 仓库中的相关文档与组件源码系统讲解附件的三种输入方式、以图作参考的提示词写法、支持的文件格式与大小限制、安全边界以及让 Agent 生成全新图片的完整流程。读完你将掌握一套可直接复用的以图生码、以数据生功能的提示工程方法。何时需要给 Agent 提供图片或附件Reflex Build 是一个用自然语言和 Python 构建全栈 Web 应用的 AI 构建器你可以用一句提示词描述需求Agent 会规划工作、更新源码、运行应用并在Preview中展示结果见 What Is Reflex Build。但纯文字描述布局、视觉层级或数据形态往往模糊且低效此时就需要借助视觉或基于文件的上下文。按照原文档的定位当 Agent 需要视觉或文件上下文时你就应该附加截图、文档或示例数据。典型场景包括想复刻某个页面的布局、导航宽度、卡片层级与间距排查一个具体的 UI 问题如组件错位、间距异常让 Agent 基于一份示例 CSV 或文档构建数据导入、预览或校验功能。附加上下文有三种入口方式任选其一即可点击对话输入框的**附件控件attachment control**选择文件直接把文件拖拽进对话窗口从剪贴板粘贴图片。以图片为参考让 Agent 精确还原布局图片往往是传达布局、视觉层级、具体 UI 问题最清晰的方式。原文档给出的核心策略是明确告诉 Agent 要复制什么、忽略什么把参考与改动的边界划清楚。一个标准的参考型提示词示例Use the attached screenshot as a layout reference. Match its navigation width, card hierarchy, and spacing, but keep the current brand colors and content.把所附截图作为布局参考。匹配它的导航宽度、卡片层级和间距但保留当前的品牌配色和内容。这段提示词遵循了三个原则值得逐条拆解明确参考对象指出附件是layout referenceAgent 知道它代表目标形态而非内容素材列出要复刻的具体维度navigation width、card hierarchy、spacing 都是可量化的布局要素比笼统说做得像它更容易对齐划定豁免范围brand colors 与 content 保持不变防止 Agent 连配色文案一起改写。原文档还补充了两条实操建议截图现有应用时附上相关路由或页面名include the relevant route or page name便于 Agent 在多页应用中对号入座把参考精确应用到对应页面当只有一个组件重要时尽量紧贴裁剪tightly crop参考图减少无关元素的干扰让 Agent 聚焦到真正要复刻的部分。图片在 Reflex 中的底层呈现rx.image 组件以图为参考最终落在 Reflex 应用中往往以rx.image组件承载。从源码看rx.image实际是 HTMLimg元素VoidBaseHTML子类Img的工厂方法别名image img Img.create见 media.py。Img组件支持以下常用属性media.py L81-L114属性含义src图片 URL必填alt图片替代文本对可访问性与 SEO 都很重要loading加载行为eager或lazy长页面建议lazy延迟加载decoding解码方式async、auto或synccross_origin图片的 CORS 请求配置referrer_policy请求图片时携带的 Referrer 策略sizes/src_set响应式图片的尺寸与多分辨率源use_map与图像热点地图image map配合的 map 名称Img.create还做了一项便利处理用户未显式传src时会把第一个子节点当作src值使用media.py L110-L114。因此当你让 Agent把截图中的 logo 放进应用时Agent 通常会用类似rx.image(src/logo.png, altApp logo)的代码把附件落进assets/目录并在页面上渲染——这一点在下一节附件与运行时资源中会进一步展开。附加文件文档与结构化数据上下文除了图片你还可以附加文档和结构化数据。Reflex Build 支持的常见格式见 Files包括文档.pdf、.doc、.docx、.odt、.rtf电子表格.xls、.xlsx、.ods、.csv、.tsv演示文稿.ppt、.pptx、.odp文本与结构化数据.txt、.md、.markdown、.json、.xml、.yaml、.yml数量与大小限制以当前仓库文档为准具体上传限额请以官方当前页面为准普通文件每个文件最大50 MB单条消息最多附加20 个文件图片Agent 可把.png、.jpg、.jpeg、.webp作为视觉提示上下文理解每条消息最多5 张每张最大5 MB见 Images。其他图片格式可以当作文件附加进应用但不会被解释为视觉提示。原文档强调附加的数据不要超过任务所需。更小、更聚焦的文件让 Agent 解析更快、更准确。比如要用示例数据构建功能就只传真正需要的列和行而不是整库导出。给每个附件一个明确任务仅上传文件还不够你需要告诉 Agent这份附件应该怎么用。原文档给出的示例Use the attached CSV as sample data. Build an import preview that maps the columns, flags malformed dates, and lets the user exclude invalid rows.把所附 CSV 当作示例数据。构建一个导入预览映射各列、标记格式错误的日期并允许用户排除无效行。这条提示词把数据用途sample data→ 功能目标import preview→ 具体行为列映射、日期校验、排除无效行一次性说清Agent 无需猜测。附件是提示上下文不是运行时资源这是最容易踩的坑附件只作为提示上下文存在不会自动成为应用的一部分。原文档明确指出——如果应用需要在运行时提供或留存该文件必须请 Agent 额外添加对应的应用资源asset、上传工作流、数据库记录或外部存储集成。这背后的机制在 Reflex 中有清晰的划分见 Upload and Download FilesAssets静态资源随应用一起发布的文件图片、样式表、脚本位于assets/目录或 Python 文件旁编译期即可用通过rx.asset()或直接路径引用Upload Directory上传目录运行期由用户上传的动态文件位于uploaded_files/可配置通过rx.get_upload_url()访问。所以当你让 Agent用附件中的 CSV 做导入时正确的做法是让 Agent 用rx.upload组件 上传事件处理函数把 CSV 作为运行时文件接收再用 Python 在事件处理器中解析——附件本身只负责把数据结构长什么样这个上下文传递给 Agent。提示词进阶把附件意图说清楚综合 Images 与 Files 两页的指导写附件提示词时建议明确回答三个问题它是视觉参考还是要提取的内容还是需要保留的现有资源三种意图对应完全不同的 Agent 行为——参考意味着照着画提取意味着读出来写进代码保留意味着原样放进应用别改复制什么、忽略什么把要复刻的维度布局、层级、间距、配色与要排除的内容现有文案、品牌色、无关区块分开声明它只是上下文还是运行时要用的数据若是后者明确要求 Agent 补上 asset、上传工作流、数据库或存储集成。另外Reflex Build 支持排队后续指令Agent 生成过程中你可以继续发送消息它会下一步拾取见 Generation Controls Collaboration。这意味着你可以先用一句用这张截图调整首页布局启动生成再排队补充表格在 768px 以下要响应式这类小约束而不必等整轮结束。生成新图片从参考到原创如果应用需要的是原创视觉hero 背景图、插画、占位图而不是对现有图片的复刻可以直接请 Agent 生成。这是 Reflex Build 内建的 Agent 工具之一另两项是联网搜索与运行 Python见 Agent Tools。生成的图片会出现在对话与应用变更中无需离开 Builder 去外部工具。原文档建议在提示词中描述预期用途、构图与约束示例Generate a wide, abstract hero background for a financial dashboard. Use navy and teal, leave the left third visually quiet for heading text, and do not add words, logos, or interface elements.为金融仪表盘生成一张宽幅抽象 hero 背景。使用海军蓝与青绿色左侧三分之一保持视觉留白用于标题文字不要添加文字、logo 或界面元素。注意这条提示词的约束密度配色navy/teal、构图左侧留白、禁区无文字/logo/界面元素全部显式声明Agent 就不容易自由发挥出不可用的素材。生成之后原文档建议按以下清单审查在Preview中以目标尺寸查看图片确认叠加在图片上的文字依然清晰可读检查移动端的裁剪与加载行为若构图或风格不对请求一次聚焦的修改focused revision而不是推倒重来。安全与隐私边界无论附加还是生成安全红线必须遵守详见 Secrets 与 Agent Tools 的 Security and Privacy 一节不要把密码、API 密钥、私有 token 或生产环境凭证写进提示词或附件凭证应存放在Secrets应用/项目级环境变量运行时通过os.environ读取或集成表单中不要要求 Agent 搜索或复现私有数据附件若含私有生产导出除非已获准用于 Reflex Build否则不要附加发布前审查检查生成资源与第三方信息联网搜索结果、附件内容确认无敏感信息外泄或错误内容被带入应用。一旦在附件中发现敏感值后续生成会持续把该上下文带在对话中因此先删后问比先问后删更安全。端到端示例从截图到可运行页面把以上要点串成一个完整流程基于原文档与 What Is Reflex Build 的典型工作流附加参考拖入目标应用首页的截图裁剪掉无关区块并在消息中写明路由如/dashboard与页面名声明意图用Use the attached screenshot as a layout reference. Match its navigation width, card hierarchy, and spacing, but keep the current brand colors and content.明确复制范围与豁免项补充数据上下文可选再附一份小 CSV 并说明它只是示例数据请 Agent 构建带校验的导入预览排队微调生成过程中补充表格在移动端改为纵向堆叠之类的后续指令预览验证在Preview中按目标尺寸检查还原度、响应式表现与加载行为必要时请求聚焦修改审查发布确认无敏感信息再走测试、部署流程。若最终页面需要展示某张图可让 Agent 用rx.image(src..., alt..., loadinglazy)将其加入应用组件属性详见 media.py并确保图片作为assets/资源随应用发布而非仅存在于对话上下文。小结图片与附件是 Reflex Build 提示工程中最具杠杆作用的一环截图解决长什么样文件解决数据长什么样生成解决没有现成素材怎么办。记住三条主线即可——附件只是上下文、不是运行时资源提示词要同时声明复制什么与忽略什么敏感信息走 Secrets 而不是 prompt。配合 Agent Tools、Files、Images 与 Secrets 四篇文档你就能把视觉与数据上下文稳定地转化为高质量的应用代码。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
