AI图文处理专用——图片命名规范/图片处理及上传html/案例转图文信息卡

图片处理与入库标准指令

一、命名规则
格式: 地点缩写-角色缩写-事件缩写-事件描述(全英文小写+连字符,按需加序号)

分解说明:

字段 缩写规则 示例
地点 项目/小区/门店英文缩写 lqhdlz=龙泉恒大绿洲、tfgywlc=天府公园未来城、snys=十年雅墅
角色 业主/施工方/品牌缩写 lls=李老师、zls=张老师、lmnt=龙脉暖通
事件 场景动作拼音首字母缩写 dnpg=地暖盘管、fjsq=分集水器、fsmp=反射膜铺设
描述 具体细节英文/拼音缩写 by=保压、dhw=大弧弯、cs=测试、dx=调试
序号 同场景编号 -01 -02 两位递增
示例:

lqhdlz-lls-dnpg-01.jpg → 龙泉恒大绿洲-李老师-地暖盘管-01
lqhdlz-lls-fjsq-by-01.jpg → 龙泉恒大绿洲-李老师-分集水器-保压-01
snys-zls-dnpg-01.jpg → 十年雅墅-张老师-地暖盘管-01
时间由媒体库自动记录,不在文件名中体现。

二、图片处理规格
类型 方向 目标尺寸 比例
证书类 纵向 1240×1754px —
门店/安装类 竖图 960×1280px 3:4
门店/安装类 横图 960×720px 4:3
统一参数: JPG 格式,quality 按需调整至 ~100KB,不做 PNG。LANCZOS 重采样。

三、存放路径
处理后的图片存入:D:\官网资料\工具\图片处理\

四、URL 规则
媒体库根路径:https://longmai-nt.com/wp-content/uploads/2026/07/

完整 URL = 根路径 + 文件名

五、工作流
发图片给 Marvis,告知地点、角色、事件信息
Marvis 按规范裁剪、压缩、命名,存入 D:\官网资料\工具\图片处理\
Marvis 输出英文文件名 + 中文描述清单
上传图片到媒体库后,给出任一条 URL,Marvis 推算全部 URL
Marvis 输出完整 URL + 中文描述对照表,供后续 HTML / 索引页调用


案例分享 → 小红书图文卡片生成 · 全流程指令

将此文档提供给任意 AI(Marvis / ChatGPT / Claude 等),配合案例页面 URL 即可生成无水印的小红书卡片。

第一步:获取案例内容

给 AI 发送案例页面 URL,例如:

根据这个案例页面 https://longmai-nt.com/?page_id=6106 生成小红书卡片

第二步:AI 自动执行流程

AI 应当依次完成以下操作,无需人工干预:

2.1 抓取页面内容

  • 使用 web_fetch 或浏览器抓取页面全部文本
  • 从 HTML 源码中提取所有图片 URL(正则 src="(https?://[^"]+)"
  • 按文件名模式对图片分组(如 dnpg = 盘管、dnzg = 主管、fjsq = 分集水器)

2.2 下载素材

  • 下载 6 张施工照片作为卡片背景(选代表性图片,不同卡片用不同背景)
  • 下载品牌 Logo 文件
  • 所有素材存入临时目录(避免系统扫描加 AI 水印)

2.3 分析参考卡片样式(如有)

  • 查看已有参考卡片确认尺寸和布局
  • 标准规格:1080×1440px(3:4 比例),JPG 格式,quality=92

2.4 卡片布局规范(6 张卡片)

每张卡片 1080×1440px,三层结构:

┌────────────────────────────────────┐
│  【上半部:英雄栏 ~45% = 0~648px】 │
│  · 施工照片铺满(background-cover) │
│  · 叠加暗色遮罩 rgba(0,0,0,0.55)   │
│  · 左上角:红色标签(圆角矩形)      │
│    - 红色 #C83C3C,白色文字 22px    │
│  · 主标题:白色粗体 52px,1-2行     │
├────────────────────────────────────┤
│  【下半部:正文区 ~47% = 660~1360】 │
│  · 纯白背景,黑字 #000              │
│  · 左对齐,行距适当                 │
│  · 红色小标题 (#C83C3C) 26px 加粗   │
│  · 正文 26px,说明 22px 灰色        │
├────────────────────────────────────┤
│  【底部:品牌条 80px = 1360~1440】  │
│  · 深红背景 #C83C3C                 │
│  · 右侧:Logo 图标 + "龙脉暖通"     │
└────────────────────────────────────┘

2.5 6 张卡片内容结构

序号标签主标题正文要点
01项目概况[项目名] · [面积/预算]项目简介、系统选型、核心理念
02客户画像客户信息 · 需求与痛点基本信息、现场痛点、客户原话、目标
03预算与痛点[预算金额]硬约束 · 如何倒推设计原则、服务理念
04系统配置方案配置 · 系统四要素热源/输配/末端/控制配置明细、配置逻辑
05精工施工六步精工流程 · 施工交付六步流程、龙脉精工 vs 行业常规对比
06客户价值省钱不省工艺 · 方案复盘亮点总结、品牌主张、联系方式

2.6 字体规格

用途字体字号颜色
主标题黑体 Bold52px#FFFFFF
标签微软雅黑22px#FFFFFF(红底)
正文标题微软雅黑 Bold26px#C83C3C
正文微软雅黑26px#000000
说明/备注微软雅黑22px#555555
品牌名黑体32px#FFFFFF(红底)

2.7 关键注意事项

  • 所有过程文件存入 temp 目录,不要存入 output 目录,output 会被系统扫描并添加”AI生成”水印
  • 卡片成品也保留在 temp 目录,或手动拷贝到 D:\官网资料\工具\图片处理\小红书卡片\
  • 页面禁止出现任何”AI生成””AI辅助生成”等文字标记

第三步:验收标准

生成后逐张检查:

检查项标准
右下角水印无”AI生成”字样,仅有品牌条
图片尺寸1080×1440px
文件大小200~300KB(quality=92)
格式JPG
文字可读性英雄栏文字不模糊、正文清晰
内容准确性数据与原页面一致(面积/预算/配置)
品牌一致性红色 #C83C3C、Logo 正确
卡片数量6张(项目概况/客户画像/预算痛点/系统配置/精工施工/客户价值)

第四步:小红书笔记文案

文档版本 1.0 | 2026-07-10(内容由马维斯的微信小龙虾助手生成,仅供参考)


龙脉暖通 · 文件命名规范 — 给伙伴讲清楚为什么必须用英文命名

给龙脉暖通伙伴看的 — 文件命名为什么很重要

文件命名规范直接影响网站稳定性、AI 协作效率与团队维护成本
Part 1 — 中文图片写入 HTML 的连锁问题
中文命名

图片用中文命名
南富森门店尊睿…jpg

URL 乱码

上传后URL变成
200+个%XX编码字符

代码不可读

写入 <img src> 后
代码行超长、易截断

AI 卡死

发给AI后对话
窗口直接卡死

无法检索

媒体库搜不到
几千张图靠肉眼翻

🔌 URL 乱码

中文文件名被浏览器编码成一长串 %E5%8D%97%E5%AF%8C%E6%A3%AE...,链接不可读、不可手打、不可调试。

🤖 AI 对话卡死

把含中文图片名的 HTML 代码发给 AI 分析时,200+ 字符的 URL 编码超出消息限制,AI 无法解析,整个协作中断。

🔍 媒体库无法检索

WordPress 媒体库搜索框打中文找不到、打拼音也找不到,几千张图全靠肉眼翻,团队协作效率极低。

📎 跨平台兼容差

不同操作系统/浏览器对中文 URL 处理不一致,部分环境直接 404 或乱码显示。

❌ 中文图片 → HTML 引用

<img src=“https://longmai-nt.com/…/%E5%8D%97%E5%AF%8C%E6%A3%AE%E9%97%A8%E5%BA%97%E5%B0%8A%E7%9D%BF%E5%85%A8%E6%95%88%E4%B8%89%E8%81%94%E4%BE%9B%E8%B0%83%E8%AF%95%E6%B0%B4%E6%A8%A1%E5%9D%97%E5%AE%9E%E6%99%AF%E5%9B%BE.jpg”> <!– URL 约 200+ 字符,不可读,复制必截断 –>

✅ 英文图片 → HTML 引用

<img src=“https://longmai-nt.com/…/nfs-zls-slgsmktz.jpg”> <!– URL 简短清晰,可手打、可搜索、可直接复制给 AI –>
一次教训:曾因图片文件名是中文,把代码复制给 AI 后整个对话窗口卡死,所有调试工作被迫中断。此后强制要求所有文件英文命名。
Part 2 — iframe 是什么?给伙伴解决什么问题?
💡 通俗理解:iframe 就是「网页套网页」

想象你在 WordPress 这个”大房子”里,开了一个独立的小窗口。这个窗口里运行的是一个完全独立的 HTML 页面——它有自己的 JS、自己的 CSS、自己的逻辑。就像一个国中国,里面的代码不会和外面的 WordPress 代码打架。

一句话:iframe 就是在 WordPress 页面里嵌入了一个独立的小浏览器,用来运行那些 WordPress 编辑器无法正常运行的 HTML 代码(如图片滑块、计算器、交互式对比表等)。

🎯 iframe 核心解决三个问题

🔒 1. 隔离冲突:让代码不打架

AI 生成的 HTML 代码直接粘贴到 WordPress 时,JS/CSS 与主题插件产生冲突。表现为:滑块卡住不滑动、按钮点不动、样式全乱、页面空白。用 iframe 后,HTML 在独立沙盒运行,所有冲突全部绕过。

🧩 2. 独立运行:不受任何干扰

iframe 里的代码完全自给自足。CSS 变量、JS 全局变量、事件监听器全部封装在 iframe 沙盒内,不会被 WordPress 全局样式或插件脚本覆盖。

🔄 3. 方便替换:改文件不改页面

需要更新内容时,只需在媒体库中替换 HTML 文件(重新上传同名覆盖),WordPress 页面本身不用动。所有引用该 iframe 的页面自动更新,省去反复编辑页面、重新发布的操作。

🧭 什么时候用 iframe?决策流程
方式A:直接粘贴代码到 WordPress ✅ 正常 → 继续用方式A
出现以下任一问题:
滑块不滑动 / 按钮无反应 / 样式全乱 / 页面空白
改用方式B:上传 HTML + iframe 引用

判断口诀:粘贴能用就粘贴,粘贴翻车就上传

🔧 iframe 代码示例

方式B 三步走:① 英文命名 HTML → ② 上传媒体库 → ③ 页面嵌入 iframe 代码

<iframe src=“https://longmai-nt.com/wp-content/uploads/2026/06/gw-lmnt-slider.html” width=“100%” height=“500px” style=“border:0;” title=“图片滑块”> </iframe> <!– 注意:src 中的文件名必须是英文,否则 URL 乱码 → iframe 加载失败 → 页面空白 –>
Part 3 — HTML 两种发布方式对比
方式A · 推荐首选
直接粘贴代码
WordPress 编辑器 → 添加「自定义HTML」区块 → 粘贴完整 HTML 代码 → 发布
  • ✓ 修改方便:后台直接编辑代码,无需重新上传文件
  • ✓ 即时生效:保存即更新,不需要操作媒体库
  • ⚠ 兼容风险:复杂 JS/CSS 可能与主题插件冲突
方式B · 兜底方案
上传 HTML + iframe 引用
HTML 文件上传媒体库 → 复制 URL → 页面嵌入 iframe 代码
  • ✓ 完全隔离:代码独立运行,不受 WordPress 任何干扰
  • ✓ 稳定可靠:滑块/按钮/动画全部正常运行
  • ⚠ 更新略慢:改内容需重新上传文件到媒体库
推荐策略:先试方式A。如果出现滑块不动、按钮无效、样式错乱、页面空白 → 立即改用方式B。两种方式覆盖 100% 场景。
Part 4 — 中文 HTML 上传媒体库的坑(比图片更严重)
中文HTML

文件用中文命名
韩超-三联供水模块调试.html

URL 乱码

文件名更长
编码后200+乱码字符

iframe乱码

src 里全是%XX
代码完全不可读

AI 卡死

发给AI后
对话窗口卡死

无法修复

重新上传也无效
只能从根上改正

❌ 中文 HTML → iframe 引用

<iframe src=“https://longmai-nt.com/…/%E9%9F%A9%E8%B6%85-%E4%B8%89%E8%81%94%E4%BE%9B%E6%B0%B4%E6%A8%A1%E5%9D%97%E8%B0%83%E8%AF%95.html” ></iframe> <!– 完整URL约200+字符,复制必截断,iframe加载失败 –>

✅ 英文 HTML → iframe 引用

<iframe src=“https://longmai-nt.com/…/nfs-zls-slgsmktz.html” ></iframe> <!– URL简短清晰,可手打、可搜索、稳定可靠 –>
问题 中文命名后果 英文命名效果
URL 乱码 iframe src 被编码为 %E9%9F%A9%E8%B6%85…,不可读、不可手打 URL 清晰可读,易于调试和分享
AI 卡死 代码发给 AI 分析时编码错乱,AI 输出异常或直接卡死 AI 正常解析,可快速定位问题
iframe 失效 乱码 URL 导致 iframe 加载失败,页面直接空白 100% 可靠加载,无兼容问题
无法调试 浏览器开发者工具中 URL 不可识别,排查困难 Network 面板中文件名一目了然
团队协作 同事无法直观理解文件用途,交接困难 规范命名语义清晰,一看就懂
中文 HTML 比中文图片更严重:HTML 文件名通常更长,编码后乱码字符更多;iframe 引用需要把完整 URL 写入代码 → 乱码 URL = 引用失败 = 页面空白。图片至少还能通过 WordPress 后台搜标题找到,HTML 通过 iframe 引用后完全不可控。
📚 Part 5 — 完整命名规范(扩展版)
【项目缩写-验收项缩写-位置缩写-序号.扩展名】
🏠 项目缩写小区名拼音首字母,3-6 字符。如 lhyz(龙湖原著)、lhyzdq(龙湖原著东区)
🔧 验收项缩写施工验收动作拼音首字母。如 cdbsy(充氮保压试验)、xtbsy(系统保压试验)
📍 位置缩写房间/区域拼音首字母。如 zwn(主卧南)、kt(客厅)
🔢 序号两位递增数字 0102,同场景多张照片时使用
📐 双层命名体系

文件层(拼音简写,URL 安全)

用于 <img src> 和文件系统。格式:项目缩写-验收项缩写-位置缩写-序号.jpg

示例:lhyz-cdbsy-zwn-01.jpg

元数据层(中文描述,可检索)

随验收回执存入 JSON 的 photo_meta 字段,用于 <img alt>、案例分享、档案检索。

示例:{"file":"lhyz-tghj-zwn-01.jpg","desc":"龙湖原著·铜管氮气保护焊·主卧南侧·李怀林","datetime":"2026-07-19 14:30"}

🎯 用途区分
场景用哪个
<img src>英文文件名(文件层)
<img alt> / <figcaption>中文描述(元数据层)
案例分享说明中文描述(元数据层)
档案内部材料中文描述 + 英文文件名交叉索引
💡 为什么文件名不含人物?
施工人员信息移至元数据层。文件名保持纯粹的项目-验收-位置三段,便于批量处理和自动化。人员归属通过 JSON 精确记录,不污染文件名字段。
📍 项目缩写标准
楼盘缩写示例文件
龙湖原著lhyzlhyz-cdbsy-zwn-01.jpg
龙湖原著东区lhyzdqlhyzdq-xfj-kt-01.jpg
天府公馆tfggtfgg-lnsg-ct-01.jpg
光华天玺ghtxghtx-fsx-sys-01.jpg
官网(公司级)gw公司网站层面的文档
📋 命名示例
场景文件名中文描述(元数据层)
龙湖原著·充氮保压·主卧南lhyz-cdbsy-zwn-01.jpg龙湖原著·充氮保压试验·主卧南
龙湖原著·系统保压·客厅lhyz-xtbsy-kt-01.jpg龙湖原著·系统保压试验·客厅
龙湖原著·铜管焊接·主卧南lhyz-tghj-zwn-01.jpg龙湖原著·铜管氮气保护焊·主卧南侧·李怀林
龙湖原著东区·新风机组·客厅lhyzdq-xfj-kt-01.jpg龙湖原著东区·新风机组安装·客厅
天府公馆·冷凝水管·餐厅tfgg-lnsg-ct-01.jpg天府公馆·冷凝水管施工·餐厅
光华天玺·分水器·水吧ghtx-fsx-sys-01.jpg光华天玺·分水器安装·水吧
📝 规则细则
规则项要求
🔁 分隔符统一使用中划线 -,禁止下划线 _、空格或其他符号
📜 字符集仅限小写英文字母 + 数字 + 中划线;禁止中文、空格、特殊符号
🏠 项目缩写小区名拼音首字母,3-6 字符
🔧 验收项缩写施工验收动作拼音首字母
📍 位置缩写房间/区域拼音首字母
🔢 序号两位递增数字 0102
📏 总长度控制在 50 字符以内(含扩展名)
📋 元数据中文描述、施工人员、时间等信息存入 JSON photo_meta,不入文件名
🚫 红线(禁止事项):文件名中出现中文 · 直接上传微信原图(微信图片_xxx.jpg)· 直接上传手机默认名(IMG_20260609.jpg)· 文件名中有空格 · 上传后再改文件名(会导致已发布链接失效)
🌐 媒体库 URL 格式
https://longmai-nt.com/wp-content/uploads/{年份}/{月份}/{项目缩写}-{验收项缩写}-{位置缩写}-{序号}.jpg

示例:https://longmai-nt.com/wp-content/uploads/2026/07/lhyz-cdbsy-zwn-01.jpg

📅 跨月施工怎么办?
{年份} 和 {月份} 由上传日期自动确定。7 月施工的照片 8 月才提交,只需将 URL 中的 /2026/07 改为 /2026/08 即可。
Part 6 — 完整工作流程 + 铁律总结
🔄 所有文件统一工作流程
1. 拍照/生成

拍照或
AI 生成文件

2. 英文命名

按规范重命名
项目-验收项-位置-序号.扩展名

3. 上传

拖入 WordPress
媒体库

4. 引用

复制 URL
写入页面/代码

关键步骤在第 2 步 — 上传前在电脑上先重命名为规范格式,一劳永逸

📄 HTML 文件两路子流程
方式A
直接粘贴
AI 生成英文命名 HTML → 复制代码 → WordPress「自定义HTML」区块粘贴 → 发布

适用:简单交互、代码短、无冲突

方式B
上传 + iframe
英文命名 HTML → 上传媒体库 → 复制 URL → 页面嵌入 iframe 代码

适用:复杂交互、代码长、方式A冲突

最终铁律 · 六条不可违背
① 所有文件
上传前必须在电脑上按规范重命名为英文格式
② 命名公式
【项目缩写-验收项缩写-位置缩写-序号.扩展名】
中文描述通过 JSON 元数据层记录
③ 没有时间字段
媒体库自动记录上传时间
文件名中无需重复
④ HTML 发布
先试方式A(直接粘贴)
出问题 → 换方式B(上传+iframe)
⑤ 旧文件不动
旧格式文件继续使用
新文件强制新格式
⑥ 不可通融
中文命名 = AI卡死 = 不可修复
没有例外
中文命名一时爽,AI 卡死火葬场。中划线,小写英,三段式,要记清。照片先改名,再传媒体库。HTML 两种法,粘贴不行就上传。
滚动至顶部