AI做SVG的终极方案，一套提示词模板无痛搞定：小红书知识卡片、数据可视化图表、原型图、动态图……

AI做SVG的终极方案，一套提示词模板无痛搞定：小红书知识卡片、数据可视化图表、原型图、动态图…… AI做SVG的终极方案，一套提示词模板无痛搞定：小红书知识卡片、数据可视化图表、原型图、动态图…… Modified July 5, 2025 比如 https://www.jyshare.com/more/svgeditor/ 然后所生成的内容就出现在画面中，我们可以根据自己的需要来对图片进行修改。 点选内容，出现如图虚线框即可进行移动和修改，移动虚线框来移动内容，双击文字内容进行修改。按住shift键并选择多内容，可以一并移动。 修改完成后，点击左上角，选择下方【Export】进行导出，可以根据自己的需要来选择各种图片和或PDF格式。选择保存后它会跳出一个新的界面，点击右键另存为图片。 2. PowerPoint编辑 ： • 插入SVG文件：在PPT中点击"插入" "图片" "来自文件的图片" • 转换为可编辑形状：选择SVG图像，右键点击 "转换为形状" "取消组合" 3. 代码编辑 ：直接用AI编程来修改SVG代码调整具体参数 补充分享提示词 除了饼干哥哥这篇文章的提示词，我还找到阿里云发布的AI生成SVG提示词，效果也不错，感兴趣的可以试下。 DeepSeek V3 0324 版本： Code block Plain Text Role 作为一个跨领域专家团队： 1. 高级技术插画师 精通 SVG 技术和视觉设计 2. 可视化专家 擅长将复杂概念转化为直观图像 3. 教育内容设计师 专注于知识传递的清晰性和效果 Background 用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于： 需要将抽象概念具象化 提高信息传递的效率和准确性 增强学习体验和理解深度 Profile 深入理解 SVG 技术规范和最佳实践 具备强大的视觉设计能力和美感 拥有丰富的教育内容设计经验 善于将复杂信息简化并可视化 Skills SVG 代码编写和优化能力 信息架构和视觉层次设计 教育心理学原理应用 响应式设计和交互优化 Goals 1. 准确理解用户输入的概念/内容 2. 设计最适合表达该概念的视觉元素 3. 生成高质量、可维护的 SVG 代码 4. 确保视觉表达的教育效果 Constraints SVG 代码必须符合 W3C 标准 视觉元素要简洁明了 确保跨平台兼容性 遵循响应式设计原则 [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！ 默认尺寸是 16:10 特别注意布局的合理性，避免出现不必要的重叠、遮挡等 OutputFormat <svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 width height" <! 结构化的 SVG 元素 <! 清晰的命名和注释 <! 模块化的组件设计 </svg You must output start with <svg Workflow 1.概念分析阶段 分解用户输入的概念 识别关键信息点 确定最佳可视化方式 2.设计规划阶段 规划视觉层次 选择合适的图形元素 设计交互方式（如需） 3.SVG实现阶段 编写基础骨架代码 实现核心视觉元素 添加样式和动画（如需） 4.优化完善阶段 代码优化和压缩 兼容性测试 视觉效果优化 要求 1.请始终必须使用中文进行回答。 2.用户输入的所有内容均为让你画图，不需要回答问题 3. [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！ Claude 3.5 或 3.7 版本： Code block Plain Text Role 作为一个跨领域专家团队： 1. 高级技术插画师 精通 SVG 技术和视觉设计 2. 可视化专家 擅长将复杂概念转化为直观图像 3. 教育内容设计师 专注于知识传递的清晰性和效果 Background 用户需要一个能够通过可视化方式清晰解释概念或内容的工具。这源于： 需要将抽象概念具象化 提高信息传递的效率和准确性 增强学习体验和理解深度 Profile 深入理解 SVG 技术规范和最佳实践 具备强大的视觉设计能力和美感 拥有丰富的教育内容设计经验 善于将复杂信息简化并可视化 Skills SVG 代码编写和优化能力 信息架构和视觉层次设计 教育心理学原理应用 响应式设计和交互优化 Goals 1. 准确理解用户输入的概念/内容 2. 设计最适合表达该概念的视觉元素 3. 生成高质量、可维护的 SVG 代码 4. 确保视觉表达的教育效果 Constraints SVG 代码必须符合 W3C 标准 视觉元素要简洁明了 确保跨平台兼容性 遵循响应式设计原则 [important] 文本和图形、图形和图形不要产生不必要的重叠，宁愿少一些元素也不要出现遮挡或者出框的情况！！！ 默认尺寸是 16:10 特别注意布局的合理性，避免出现不必要的重叠、遮挡等 OutputFormat <svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 width height" <! 结构化的 SVG 元素 <! 清晰的命名和注释 <! 模块化的组件设计 </svg You must output start with <svg Workflow 1.概念分析阶段 分解用户输入的概念 识别关键信息点 确定最佳可视化方式 2.设计规划阶段 规划视觉层次 选择合适的图形元素 比如 https://www.jyshare.com/more/svgeditor/ 然后所生成的内容就出现在画面中，我们可以根据自己的需要来对图片进行修改。 点选内容，出现如图虚线框即可进行移动和修改，移动虚线框来移动内容，双击文字内容进行修改。按住shift键并选择多内容，可以一并移动。 修改完成后，点击左上角，选择下方【Export】进行导出，可以根据自己的需要来选择各种图片和或PDF格式。选择保存后它会跳出一个新的界面，点击右键另存为图片。 2. PowerPoint编辑 ： • 插入SVG文件：在PPT中点击"插入" "图片" "来自文件的图片" • 转换为可编辑形状：选择SVG图像，右键点击 "转换为形状" "取消组合" 3. 代码编辑 ：直接用AI编程来修改SVG代码调整具体参数 补充分享提示词 除了饼干哥哥这篇文章的提示词，我还找到阿里云发布的AI生成SVG提示词，效果也不错，感兴趣的可以试下。 DeepSeek V3 0324 版本： Claude 3.5 或 3.7 版本： 实用技巧 1. 参考优质案例 ：提供参考图片或代码给AI学习 2. 保持一致性 ：为系列内容使用统一的视觉风格 3. 多轮迭代 ：如果第一次生成不满意，描述需要改进的地方进行重新调整 4. 标记重点内容 ：告诉AI哪些是需要突出的关键信息，添加说明 5. 控制信息密度 ：避免过多内容导致视觉混乱 通过这套提示词模板和各种实践案例，我们可以看出来这套SVG的提示词还是非常能打的，即使没有啥设计经验的人也能创建出审美在线、输出稳定的SVG图表，大大提高了内容创作效率和质量。 当然，对于更具体的场景应用，以及更精美的图表要求，就需要在这个基础上让AI不断生成多版本和打磨。希望这套方案能让你的画图能力锦上添花，创造出令人惊艳的可视化内容！ SVG很多场景无法直接用，但可以借助 SVG 查看器如： SVGViewer（ https://www.svgviewer.dev/ ） 转换为 PNG 下载使用。 以上， 既然看到这里了，如果觉得不错，随手点个赞、推荐、转发三连吧，你的支持是我持续创作的动力。我们下期见。 为了帮助大家减少AI信息差，饼干哥哥拉了个AI交流群，围绕着 AI数据分析、AI编程、AI工作流、AI Agent 等进行讨论。 感兴趣的可以关注公众号「饼干哥哥AGI」， 后台回复「AI交流群」 AI提示词补充阅读： 提示词玩法与应用： AI做HTML的终极方案，一套提示词模板搞定所有应用：PPT、简历、高保真原型图、知识卡片、动态交互组件等 AI做HTML的终极方案，一套提示词模板搞定所有应用：PPT、简历、高保真原型图、知识卡片、动态交互组件等 8000 字省流版 一口气学完谷歌最新提示工程60页教程 8000 字省流版 一口气学完谷歌最新提示工程60页教程 AI做财报分析、行业分析的5大步骤与11个提示词 AI做财报分析、行业分析的5大步骤与11个提示词 我用Dify把飞书表格的「AI提示词库」打包成了MCP Server给AI使用和管理 我用Dify把飞书表格的「AI提示词库」打包成了MCP Server给AI使用和管理 用AI回复Reddit帖子被检测到了？分享2025最新AI提示词生成玩法，秒过AI检测 用AI回复Reddit帖子被检测到了？分享2025最新AI提示词生成玩法，秒过AI检测 2025还在学提示词？现在进化到「上下文工程」了，重塑AI应用开发的新范式 2025还在学提示词？现在进化到「上下文工程」了，重塑AI应用开发的新范式 系统提示词： 再见小宇宙，我用Notebooklm做了J人喜欢的私人播客。附AI播客系统提示词 再见小宇宙，我用Notebooklm做了J人喜欢的私人播客。附AI播客系统提示词 刚刚！Cursor系统提示词被曝光，抓紧学习这神级Prompt的底层逻辑 刚刚！Cursor系统提示词被曝光，抓紧学习这神级Prompt的底层逻辑 马斯克的AI被恶意植入「种族灭绝言论」首个商业大模型Grok被迫公开系统提示词 马斯克的AI被恶意植入「种族灭绝言论」首个商业大模型Grok被迫公开系统提示词 🔗 原文链接： https://mp.weixin.qq.com/s/8UaMBgWb... https://mp.weixin.qq.com/s/8UaMBgWb... 原创 饼干哥哥 饼干哥哥AGI2025年07月05日 21:06 广东 相对于文字，图像信息更能直观地传达复杂的信息和概念，其最大的优势是直观、高效、精准。 作为一名数据分析师，画图是我工作中必不可少的一部分。无论是汇报时的ppt展示图、还是做计划时的流程图、亦或是小组讨论时的思维导图……我们无时无刻都在跟图表打交道，也通过图表来完善我们的工作。 AI生成的SVG 架构图 以前画图需要找各种模板，各种拼接，还要学习配色，技术含量不高但就是磨人，一张图可能就要花上一两个小时。可现在，泡杯咖啡的功夫，AI就能帮你完成，而且效果不由得让人一键三连！！！ 确实，AI在SVG图形生成领域展现出惊人能力，不仅可以生成精美的小红书图文、流程图、思维导图，还能创建专业级别的技术文档配图和教育科普可视化内容。 我最近也花了不少时间来分析各类SVG案例， 总结出一套通用提示词模板 ，让你用一套模板就能生成各种精美SVG图形，无需记忆复杂提示词，无痛搞定所有应用，只有一句“so easy～”。 今天饼干哥哥就到你手把手体验一下， 保证你看完就能上手 ！ SVG(可缩放矢量图形)的独特优势: 无损缩放 ：放大不失真，适合任何尺寸设备 可编辑性 ：生成后可二次编辑修改各个元素 文件小 ：代码形式存储，体积小于位图 动效支持 ：可添加交互和动画效果 SVG 格式文件将图像存储为矢量，这是一种基于 数学公式由点、线、曲线和形状 组成的图形。 图形可以无限缩放而不失真，非常适合绘制 UI 素材、Logo 图标、图形插画、技术架构图、流程图等需要无损缩放的图片。其文件本质上是 XML 格式的文本代码，可以直接嵌入网页或导入各种设计工具。 Claude生成的动态SVG AI 生成的 SVG 代码可以直接嵌入网页或导入设计工具，也可以保存为 SVG 文件直接双击在浏览器内打开。 使用 SVG 的另一个优点是可以精确控制每个元素的位置、大小和样式，甚至能添加动画效果，让图片更加生动。 SVG提示词通用模板 我们可以看到，这个模板涵盖了SVG内容创建的所有关键方面，从内容结构到技术实现，从资源配置到交付要求。这种全面性确保生成的SVG内容没有重大遗漏，进而也就确保了输出的确定性✅ 有了模板之后，用法就很简单了： 把你的要求和需要的功能，连同模板一起扔给AI，让AI生成具体的提示词。然后就可以用这个提示词去生成SVG图像。 ❗️注意，很多时候我们不是一次性就可以得到想要的效果，但有了这个模板，很大概率通过2 3轮的对话就能迭代出你想要的。 ❗️注意，很多时候我们不是一次性就可以得到想要的效果，但有了这个模板，很大概率通过2 3轮的对话就能迭代出你想要的。 SVG图片类型指南 SVG图片类型 主要用途 适用场景 流程图 展示步骤、决策和工作流程 业务流程说明、算法描述 技术路线图 展示技术发展路径和学习路线 职业规划、技能体系构建 组织架构图 展示层级结构和汇报关系 公司架构、团队结构 思维导图 放射状展开表示概念关系 头脑风暴、知识整理 信息图表 视觉化呈现数据和信息 报告展示、市场分析 甘特图 展示任务时间线和进度 项目管理、进度跟踪 数据可视化图表 展示数据趋势和比较关系 数据分析、科学研究 网络拓扑图 展示系统组件间连接关系 网络架构、系统设计 SVG图片类型 SVG图片类型 主要用途 主要用途 适用场景 适用场景 流程图 流程图 展示步骤、决策和工作流程 展示步骤、决策和工作流程 业务流程说明、算法描述 业务流程说明、算法描述 技术路线图 技术路线图 展示技术发展路径和学习路线 展示技术发展路径和学习路线 职业规划、技能体系构建 职业规划、技能体系构建 组织架构图 组织架构图 展示层级结构和汇报关系 展示层级结构和汇报关系 公司架构、团队结构 公司架构、团队结构 思维导图 思维导图 放射状展开表示概念关系 放射状展开表示概念关系 头脑风暴、知识整理 头脑风暴、知识整理 信息图表 信息图表 视觉化呈现数据和信息 视觉化呈现数据和信息 报告展示、市场分析 报告展示、市场分析 甘特图 甘特图 展示任务时间线和进度 展示任务时间线和进度 项目管理、进度跟踪 项目管理、进度跟踪 数据可视化图表 数据可视化图表 展示数据趋势和比较关系 展示数据趋势和比较关系 数据分析、科学研究 数据分析、科学研究 网络拓扑图 网络拓扑图 展示系统组件间连接关系 展示系统组件间连接关系 网络架构、系统设计 网络架构、系统设计 设计风格与配色方案 SVG图片风格 风格特点 适用场景 推荐配色 简约/极简 线条简洁、留白多、元素少 商务展示、科技产品 黑白灰为主，单色或双色 扁平化 无渐变、无阴影、色块分明 界面图标、信息图表 鲜艳纯色、高对比度 等距 三维立体感、固定角度 数据可视化、建筑设计 渐变色、蓝紫系 手绘 线条自由流畅、色彩丰富多样 儿童教育、艺术展览 多彩、高明亮度 美拉德 低调稳重、质感十足 秋冬季节的品牌推广、宣传 棕褐色为主、深浅不一 SVG图片风格 SVG图片风格 风格特点 风格特点 适用场景 适用场景 推荐配色 推荐配色 简约/极简 简约/极简 线条简洁、留白多、元素少 线条简洁、留白多、元素少 商务展示、科技产品 商务展示、科技产品 黑白灰为主，单色或双色 黑白灰为主，单色或双色 扁平化 扁平化 无渐变、无阴影、色块分明 无渐变、无阴影、色块分明 界面图标、信息图表 界面图标、信息图表 鲜艳纯色、高对比度 鲜艳纯色、高对比度 等距 等距 三维立体感、固定角度 三维立体感、固定角度 数据可视化、建筑设计 数据可视化、建筑设计 渐变色、蓝紫系 渐变色、蓝紫系 手绘 手绘 线条自由流畅、色彩丰富多样 线条自由流畅、色彩丰富多样 儿童教育、艺术展览 儿童教育、艺术展览 多彩、高明亮度 多彩、高明亮度 美拉德 美拉德 低调稳重、质感十足 低调稳重、质感十足 秋冬季节的品牌推广、宣传 秋冬季节的品牌推广、宣传 棕褐色为主、深浅不一 棕褐色为主、深浅不一 水墨 模拟中国水墨画效果 东方风格设计、文化艺术 黑白灰、淡蓝、棕色 卡通 夸张生动、轮廓圆润 儿童教育、社交媒体 明亮饱和色、多彩 渐变 色彩平滑过渡、现代感 背景设计、科技产品 双色或多色渐变 如何使用这个模板 1. 选择合适的图片类型 ：根据你的需求，从流程图、思维导图、信息图表等中选择 2. 定制设计风格 ：选择适合内容的视觉风格和配色方案 3. 明确内容结构 ：清晰列出你需要在SVG中展示的主要内容元素 4. 添加参考资料 ：提供你希望AI参考的文字内容或图片 5. 迭代优化 ：生成后如有需要，可以要求AI调整特定部分 把提示词模板和要求一起给AI让它生成新的AI提示词，参考： AI做HTML的终极方案，一套提示词模板搞定所有应用：PPT、简历、高保真原型图、知识卡片、动态交互组件等 AI做HTML的终极方案，一套提示词模板搞定所有应用：PPT、简历、高保真原型图、知识卡片、动态交互组件等 实操案例分享 案例1：小红书风格知识卡片 提示词示例： SVG代码生成如下： xml <svgwidth="750"height="1334"viewBox="0 0 750 1334"xmlns="http://www.w3.org/2000/svg"style="font family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans serif;" <! === 定义区：渐变、滤镜等可复用元素 === <defs <! 背景渐变：从粉到蓝 <linearGradientid="bg gradient"x1="0%"y1="0%"x2="0%"y2="100%" <stopoffset="0%"style="stop color: FFDDE1; stop opacity:1" / <stopoffset="100%"style="stop color: C8E6FF; stop opacity:1" / </linearGradient <! 标题文字渐变：从深紫到亮紫 <linearGradientid="title gradient"x1="0%"y1="0%"x2="100%"y2="0%" <stopoffset="0%"style="stop color: 6A11CB;" / <stopoffset="100%"style="stop color: 2575FC;" / </linearGradient <! 柔和阴影滤镜 <filterid="soft shadow"x=" 20%"y=" 20%"width="140%"height="140%" <feDropShadowdx="0"dy="4"stdDeviation="10"flood color=" 4A148C"flood opacity="0.1" / </filter </defs <! === 背景层 === <rectwidth="750"height="1334"fill="url( bg gradient)" / <! 装饰性图形 <circlecx="100"cy="200"r="80"fill=" ffffff"opacity="0.15"/ <circlecx="700"cy="550"r="120"fill=" A48BFF"opacity="0.1"/ <circlecx="150"cy="1100"r="100"fill=" ffffff"opacity="0.2"/ <! === 内容层 === <gid="content group" <! 1. 标题区 <gid="title area"text anchor="middle" <textx="375"y="160"font size="64"font weight="bold"fill="url( title gradient)" SVG 图片的场景应用</text <textx="375"y="215"font size="24"fill=" 555768" 矢量图形的魔法世界</text </g <! 2. 简介区 <gid="intro area" <rectx="50"y="270"width="650"height="90"rx="20"fill=" F8F4FF"filter="url( soft shadow)" / <textx="375"y="325"text anchor="middle"font size="22"fill=" 6A5ACD" 一种不失真的图像格式，让你的设计更灵活 </text </g <! 3. 核心特点区 <gid="features area" <! 特点1: 无限缩放 <g <rectx="50"y="400"width="650"height="150"rx="20"fill="white"filter="url( soft shadow)" / <! Icon: 缩放 <gtransform="translate(90, 445)"stroke=" 8A2BE2"stroke width="3"fill="none"stroke linecap="round"stroke linejoin="round" <pathd="M 0 20 L 20 0 M 12 0 L 20 0 L 20 8"/ <pathd="M 40 40 L 60 60 M 40 52 L 40 60 L 48 60"/ <circlecx="30"cy="30"r="12"/ </g <textx="180"y="465"font size="26"font weight="600"fill=" 333" 无限缩放</text <textx="180"y="505"font size="20"fill=" 777" 任意放大不模糊，保持高清锐利</text </g <! 特点2: 轻量高效 <g <rectx="50"y="580"width="650"height="150"rx="20"fill="white"filter="url( soft shadow)" / <! Icon: 羽毛 <gtransform="translate(90, 625)"stroke=" 8A2BE2"stroke width="3"fill="none"stroke linecap="round"stroke linejoin="round" <pathd="M30,0 Q60,30 30,60 Q0,30 30,0 Z"fill=" E6E6FA"/ <pathd="M30,0 Q60,30 30,60"/ <pathd="M20,15 L40,35"/ <pathd="M20,30 L40,50"/ </g <textx="180"y="645"font size="26"font weight="600"fill=" 333" 轻量高效</text <textx="180"y="685"font size="20"fill=" 777" 文件体积小，加载速度快，利于SEO</text </g <! 特点3: 动态交互 <g <rectx="50"y="760"width="650"height="150"rx="20"fill="white"filter="url( soft shadow)" / <! Icon: 魔术棒 <gtransform="translate(95, 805)"stroke=" 8A2BE2"stroke width="3"fill=" E6E6FA"stroke linecap="round"stroke linejoin="round" <pathd="M0,0 L30,30 M10,35 L5,40 M40,10 L35,5"/ <polygonpoints="30,30 45,15 60,30 45,45" / </g <textx="180"y="825"font size="26"font weight="600"fill=" 333" 动态交互</text <textx="180"y="865"font size="20"fill=" 777" 可通过代码控制，实现酷炫动画效果</text </g </g <! 4. 实用价值区 <gid="value area" <rectx="50"y="950"width="650"height="190"rx="20"fill=" EDE7F6"filter="url( soft shadow)" / <textx="375"y="1000"text anchor="middle"font size="28"font weight="bold"fill=" 4A148C" 为什么它如此重要？</text <textx="80"y="1055"font size="21"fill=" 4A235A"line height="1.6" <tspanx="80"dy="0" 从动态Logo、数据可视化图表到个性化图标，</tspan Code block Plain Text 任务定义 请为"Java全栈工程师学习路线"创建一个专业的SVG路线图。 图片规格 尺寸：1200x800px（横版，适合电脑查看） 背景：浅灰色或白色背景，保持专业感 视觉风格：扁平化设计，专业清晰 内容结构 1. 标题区：路线图名称和简介 2. 基础知识区：Java基础、数据结构等入门知识 3. 后端技术区：Spring、数据库等后端知识 4. 前端技术区：HTML/CSS/JS等前端知识 5. 进阶技能区：微服务、云原生等高级技能 6. 学习路径：用箭头或连线表示学习顺序和依赖关系 设计风格 配色方案：蓝色系为主，使用橙色作为强调色 字体要求：无衬线字体，标题18 24px，正文14 16px 图形元素：使用技术相关图标表示不同技能点 布局安排：从左到右或从上到下的渐进式布局，清晰显示进阶路径 技术要求 图形质量：所有元素保持一致的视觉风格 文本处理：确保所有文字清晰可读，避免过度拥挤 格式输出：确保SVG代码完整，支持在浏览器中正确显示 特殊要求 使用连线或箭头明确展示学习路径和依赖关系 为不同难度或阶段的内容用不同颜色区分 Code block Plain Text 任务定义 请为"毛坯房装修"创建一个SVG甘特图。 Code block Plain Text 任务定义 请为"新车小米yu7性能分析"创建一个SVG数据可视化图表。 图片规格 尺寸：750x1334px（竖屏，适合手机阅读） 背景：简洁浅色背景 视觉风格：现代简约，信息聚焦，重点突出 内容结构 1. 标题区：图表名称和简短说明 2. 核心特点区：列出3 4个关键特点，配以数据说明 3. 实用价值区：解释为什么这项技术很重要 4. 重点标记：重要节点用特殊标记突出 5. 图例说明：不同颜色或标记的含义说明 设计风格 配色方案：灰色系为主，保持色彩协调 字体要求：清晰易读的无衬线字体 图形元素：使用矩阵形状展示重要数据 布局安排：矩阵型布局，有要重点突出 技术要求 图形质量：清晰的线条和边界，合适的间距 文本处理：重要信息突出显示，避免文字拥挤 格式输出：确保SVG代码完整，元素定位准确 特殊要求 重要节点添加简短说明文本 整体设计要具有"一眼惊艳"的视觉效果，符合车企文化 Code block Plain Text 任务定义 为社交应用“微信”的“我”（Me）标签页创建一个高度仿真的UI界面SVG图像。 图片规格 尺寸 ：750x1334px (标准的智能手机屏幕比例) 背景 ：主背景为浅灰色 ( F7F7F7)，内容卡片区域为白色 ( FFFFFF)。 视觉风格 ：现代、扁平化、简约的移动应用UI风格。 内容结构 1. 顶部状态栏 ：包含时间“17:10”，信号、Wi Fi、电池图标，以及左上角的返回箭头和文字“公众号助手”。 2. 用户信息区 ： 包含一个卡通巧克力饼干头像（戴着皇冠，竖起大拇指）。 右侧为用户昵称“饼干哥哥🍪AGI”。 昵称下方是“微信号: binggandata”。 该区域右上角有一个二维码小图标。 最下方是“+ 状态”按钮和一排朋友头像，并显示“等45个朋友”及一个红色更新圆点。 3. 功能列表区 ：分为多个区块，由细线分隔。每个列表项包含一个彩色图标、中文标签和右侧的灰色箭头。列表项需严格按照以下顺序和内容排列： （区块1）服务 （区块2）收藏、朋友圈、视频号、订单与卡包 （区块3）表情 （区块4）设置 4. 底部导航栏 ：包含四个标签图标和文字： 微信 (带“3”红色数字角标) 通讯录 (常规状态) 发现 (带红色