图片处理与入库标准指令
一、命名规则
格式: 地点缩写-角色缩写-事件缩写-事件描述(全英文小写+连字符,按需加序号)
分解说明:
字段 缩写规则 示例
地点 项目/小区/门店英文缩写 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 字体规格
| 用途 | 字体 | 字号 | 颜色 |
| 主标题 | 黑体 Bold | 52px | #FFFFFF |
| 标签 | 微软雅黑 | 22px | #FFFFFF(红底) |
| 正文标题 | 微软雅黑 Bold | 26px | #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(内容由马维斯的微信小龙虾助手生成,仅供参考)
给龙脉暖通伙伴看的 — 文件命名为什么很重要
图片用中文命名南富森门店尊睿…jpg
上传后URL变成
200+个%XX编码字符
写入 <img src> 后
代码行超长、易截断
发给AI后对话
窗口直接卡死
媒体库搜不到
几千张图靠肉眼翻
🔌 URL 乱码
中文文件名被浏览器编码成一长串 %E5%8D%97%E5%AF%8C%E6%A3%AE...,链接不可读、不可手打、不可调试。
🤖 AI 对话卡死
把含中文图片名的 HTML 代码发给 AI 分析时,200+ 字符的 URL 编码超出消息限制,AI 无法解析,整个协作中断。
🔍 媒体库无法检索
WordPress 媒体库搜索框打中文找不到、打拼音也找不到,几千张图全靠肉眼翻,团队协作效率极低。
📎 跨平台兼容差
不同操作系统/浏览器对中文 URL 处理不一致,部分环境直接 404 或乱码显示。
❌ 中文图片 → HTML 引用
✅ 英文图片 → HTML 引用
想象你在 WordPress 这个”大房子”里,开了一个独立的小窗口。这个窗口里运行的是一个完全独立的 HTML 页面——它有自己的 JS、自己的 CSS、自己的逻辑。就像一个国中国,里面的代码不会和外面的 WordPress 代码打架。
一句话:iframe 就是在 WordPress 页面里嵌入了一个独立的小浏览器,用来运行那些 WordPress 编辑器无法正常运行的 HTML 代码(如图片滑块、计算器、交互式对比表等)。
🔒 1. 隔离冲突:让代码不打架
AI 生成的 HTML 代码直接粘贴到 WordPress 时,JS/CSS 与主题插件产生冲突。表现为:滑块卡住不滑动、按钮点不动、样式全乱、页面空白。用 iframe 后,HTML 在独立沙盒运行,所有冲突全部绕过。
🧩 2. 独立运行:不受任何干扰
iframe 里的代码完全自给自足。CSS 变量、JS 全局变量、事件监听器全部封装在 iframe 沙盒内,不会被 WordPress 全局样式或插件脚本覆盖。
🔄 3. 方便替换:改文件不改页面
需要更新内容时,只需在媒体库中替换 HTML 文件(重新上传同名覆盖),WordPress 页面本身不用动。所有引用该 iframe 的页面自动更新,省去反复编辑页面、重新发布的操作。
| 方式A:直接粘贴代码到 WordPress | → | ✅ 正常 → 继续用方式A |
| 出现以下任一问题: 滑块不滑动 / 按钮无反应 / 样式全乱 / 页面空白 |
→ | 改用方式B:上传 HTML + iframe 引用 |
判断口诀:粘贴能用就粘贴,粘贴翻车就上传
方式B 三步走:① 英文命名 HTML → ② 上传媒体库 → ③ 页面嵌入 iframe 代码
- ✓ 修改方便:后台直接编辑代码,无需重新上传文件
- ✓ 即时生效:保存即更新,不需要操作媒体库
- ⚠ 兼容风险:复杂 JS/CSS 可能与主题插件冲突
- ✓ 完全隔离:代码独立运行,不受 WordPress 任何干扰
- ✓ 稳定可靠:滑块/按钮/动画全部正常运行
- ⚠ 更新略慢:改内容需重新上传文件到媒体库
文件用中文命名韩超-三联供水模块调试.html
文件名更长
编码后200+乱码字符
src 里全是%XX
代码完全不可读
发给AI后
对话窗口卡死
重新上传也无效
只能从根上改正
❌ 中文 HTML → iframe 引用
✅ 英文 HTML → iframe 引用
| 问题 | 中文命名后果 | 英文命名效果 |
|---|---|---|
| URL 乱码 | iframe src 被编码为 %E9%9F%A9%E8%B6%85…,不可读、不可手打 | URL 清晰可读,易于调试和分享 |
| AI 卡死 | 代码发给 AI 分析时编码错乱,AI 输出异常或直接卡死 | AI 正常解析,可快速定位问题 |
| iframe 失效 | 乱码 URL 导致 iframe 加载失败,页面直接空白 | 100% 可靠加载,无兼容问题 |
| 无法调试 | 浏览器开发者工具中 URL 不可识别,排查困难 | Network 面板中文件名一目了然 |
| 团队协作 | 同事无法直观理解文件用途,交接困难 | 规范命名语义清晰,一看就懂 |
| 🏠 项目缩写 | 小区名拼音首字母,3-6 字符。如 lhyz(龙湖原著)、lhyzdq(龙湖原著东区) |
| 🔧 验收项缩写 | 施工验收动作拼音首字母。如 cdbsy(充氮保压试验)、xtbsy(系统保压试验) |
| 📍 位置缩写 | 房间/区域拼音首字母。如 zwn(主卧南)、kt(客厅) |
| 🔢 序号 | 两位递增数字 01、02,同场景多张照片时使用 |
文件层(拼音简写,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 精确记录,不污染文件名字段。
| 楼盘 | 缩写 | 示例文件 |
|---|---|---|
| 龙湖原著 | lhyz | lhyz-cdbsy-zwn-01.jpg |
| 龙湖原著东区 | lhyzdq | lhyzdq-xfj-kt-01.jpg |
| 天府公馆 | tfgg | tfgg-lnsg-ct-01.jpg |
| 光华天玺 | ghtx | ghtx-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 字符 |
| 🔧 验收项缩写 | 施工验收动作拼音首字母 |
| 📍 位置缩写 | 房间/区域拼音首字母 |
| 🔢 序号 | 两位递增数字 01、02 |
| 📏 总长度 | 控制在 50 字符以内(含扩展名) |
| 📋 元数据 | 中文描述、施工人员、时间等信息存入 JSON photo_meta,不入文件名 |
微信图片_xxx.jpg)· 直接上传手机默认名(IMG_20260609.jpg)· 文件名中有空格 · 上传后再改文件名(会导致已发布链接失效)
示例:https://longmai-nt.com/wp-content/uploads/2026/07/lhyz-cdbsy-zwn-01.jpg
{年份} 和 {月份} 由上传日期自动确定。7 月施工的照片 8 月才提交,只需将 URL 中的
/2026/07 改为 /2026/08 即可。
拍照或
AI 生成文件
按规范重命名项目-验收项-位置-序号.扩展名
拖入 WordPress
媒体库
复制 URL
写入页面/代码
关键步骤在第 2 步 — 上传前在电脑上先重命名为规范格式,一劳永逸
适用:简单交互、代码短、无冲突
适用:复杂交互、代码长、方式A冲突
上传前必须在电脑上按规范重命名为英文格式
【项目缩写-验收项缩写-位置缩写-序号.扩展名】
中文描述通过 JSON 元数据层记录
媒体库自动记录上传时间
文件名中无需重复
先试方式A(直接粘贴)
出问题 → 换方式B(上传+iframe)
旧格式文件继续使用
新文件强制新格式
中文命名 = AI卡死 = 不可修复
没有例外
