gemini 3.1 pro可从设计图中结构化提取视觉要素并输出标准json，包含colors、typography、composition等字段，经校验后喂给nano banana即可生成同风格图像。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要从一张UI截图、一张海报或一段设计稿出发，快速获得可直接喂给Nano Banana等图像生成器的精准提示词，而不是每次都要靠肉眼观察+主观描述反复试错。手动写提示词容易漏掉光影层次、构图逻辑、色彩关系这些决定出图质量的关键变量，而Gemini反向提取能力恰恰能结构化还原这些隐性信息。
用Gemini 3.1 Pro反推视觉要素并输出JSON
第一步：打开MetaChat（https://metachat.work）→ 登录Google账号 → 确保使用的是Gemini 3.1 Pro模型
第二步：上传一张清晰的设计图（建议分辨率≥1080p，无强反光/遮挡，UI截图需包含完整导航栏与内容区）
第三步：粘贴以下提示词，**不增不减、不换行、不加空格**：
请从输入图像中智能、全面地提取视觉风格信息，并将结果以严格有效的 JSON格式输出。字段数量不做限制，可根据图像特征灵活增减，但需保持结构清晰、语义明确、分类合理。以下为建议的通用结构，请在此基础上根据实际情况动态调整、增删字段：
{"colors": {"palette": [], "dominant_colors": [], "accents": [], "tone_contrast": ""}, "typography": {"fonts": [], "style_features": [], "hierarchy": ""}, "composition": {"layout": "", "balance": "", "focal_points": [], "spacing_and_rhythm": ""}, "visual_effects": {"textures": [], "lighting": "", "shadows": "", "filters": []}, "overall_style": {"design_language": "", "emotional_tone": "", "reference_genres": []}}
要求：输出必须是纯JSON，不包含任何额外说明文字。无法判断的字段请使用空字符串、空数组或省略。
这一步必须严格按原样粘贴，【若删掉任一花括号或字段名，Gemini会降级为自由文本输出，JSON解析将失败】。
使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。
把JSON喂给Nano Banana生成同风格图
方法一：手动粘贴式（适合单次高精度交付）
① 复制上一步生成的完整JSON（含所有引号、逗号、方括号）
② 打开Nano Banana 2/Pro → 上传你想要重绘的原始图 → 在提示词框输入：
你是一位室内设计师，帮我根据以下json码，把给你的图片变成同样风格的渲染效果图
③ 换行后，直接粘贴JSON内容 → 点击生成
方法二：Gems封装式（适合高频复用）
① 登录gemini.google.com → 左下角点击“Gems” → “Create a new Gem”
② 在“Instructions”栏粘贴反推JSON的完整提示词模板，把图像上传动作替换为【视觉参考图】占位符
③ 在“Example conversation”中填1组真实输入（一张截图）+对应输出（已验证的JSON）
④ 保存命名为“反推_视觉要素_JSON”，后续只需点开该Gem，上传新图，一键运行即可
注意：Nano Banana对JSON中空字段容忍度低，若某字段返回空数组[]，请手动补上占位值如["none"]，否则可能触发默认风格覆盖。
校验JSON是否可用的三秒自测法
打开任意文本编辑器 → 粘贴刚生成的JSON → 按Ctrl+Shift+J（Chrome）或Cmd+Option+J（Mac）打开控制台 → 输入 JSON.parse(`你的JSON`) → 回车
若返回一个对象，说明JSON语法合法，可直接用于图像生成；若报错SyntaxError，则说明Gemini在某个字段里混入了中文冒号、全角引号或换行符——此时不要重试，直接复制报错位置前后的5个字符，追加到下一轮提示词末尾：“禁止在JSON中使用中文标点、全角符号、换行符”
