№ · 活跃设计 CH.07.07
主页 · 📐 活跃设计 · 《同福客栈》封面出图指南 v1.0

《同福客栈》封面出图指南 v1.0

📅 2026-07-07 · 📦 15.9 KB · 📐 活跃设计 · 📝 MD 文档 🆕 14d 🏷️ 规范🏷️ 设计

目标：给 AI 出图工具（midjourney / 即梦 / sora / DALL·E / 豆包）一套切割友好的 prompt 模板，重新生成可入仓的封面/背景/装饰素材。

配套：docs/design/active/Phase1实施切片-v1.md + src/data/scenes/backgrounds.tsx

落点：出图 → pic/封面/inbox/{scene}/ → 切割 → pic/封面/extracted/{scene}.png → 接入 → public/bg/scenes/{scene}.png

0. 这次为什么重出图

之前用现成主页 UI 截图（1393×1129 RGB 无 alpha）切了 13 个区块切片，落在 pic/封面/extracted/elements/。3 个硬伤：

| 问题 | 影响 | 解决 | | :-: | :--- | :--- | | RGB 无 alpha | 切出来全带米黄底，不能用作可复用 UI 组件 | 重出图时强制带 alpha 通道 | | 带文字 / 运行时数据 | 切出来的元素"金 5两55文"等数据是当前进度的快照，不是素材 | 重出图时纯视觉、不带文字 | | 单图、非网格 | 13 块要手标矩形框、不能批量出 | 重出图时走 3x2 网格，一张设计稿切 6 张同款 |

1. 技术硬规范（出图前必读）

1.1 文件层

| 项 | 规范 | 原因 | | :-: | :--- | :--- | | 格式 | PNG（必须带 alpha 通道） | 切割后能直接当组件用 | | 分辨率 | 短边 ≥ 1280px（推荐 1920×1280） | 1920 宽 hero 直接用 | | 位深 | 8bit RGBA | 避免 16bit 体积爆炸 | | 色彩空间 | sRGB | 跟 web / 游戏内一致 | | DPI | 72 | web 用 | | 压缩 | PNG-8 不可逆 → 出 PNG-24 原始 | 进 sharp / ps 二次处理 |

1.2 内容层

| 项 | 规范 | | :-: | :--- | | 文字 | ❌ 禁止（AI 出图填字会变乱码或错字） | | UI 元素 | ❌ 禁止（按钮、tab、卡片、进度条都不要） | | 品牌水印 | ❌ 禁止 | | 人脸 | 中性即可，不强求具体人物（游戏内已有立绘） | | 现代物件 | ❌ 禁止（手表 / 玻璃 / 钢筋 / 电线） | | 儿童 / 血腥 | ❌ 禁止 |

1.3 构图层

| 项 | 规范 | | :-: | :--- | | 画风 | 中国风水墨 + 工笔，参考"古风手绘 + 米黄底" | | 主色调 | 米黄 #F5E6C8 + 朱红 #C23A2E + 金 #D4A24C + 墨黑 #1A1A1A | | 笔触 | 偏写意，不要超写实 CG、不要 Q 版、不要像素 | | 主体位置 | 居中或左 1/3 处，留 10% 边距 | | 背景层次 | 至少 2 层（前景主体 + 中景装饰 + 远景虚化） | | 统一感 | 6 张图必须同笔触 / 同色温 / 同饱和度 |

1.4 负面 prompt（每个图都加）

modern objects, glass, steel, neon, electric lights, watch, car,
text, watermark, logo, signature, child, blood, gore,
3D render, CGI, photorealistic, anime, cartoon, pixel art,
blurry, low quality, cropped, jpeg artifacts

2. 3x2 网格（一张图切 6 张同款不同主题）

思路：出一张 3840×2560 的"6 宫格"设计稿，每格 1920×1280，统一笔触、统一色温，格子之间用细缝隔开。

┌──────────────────┬──────────────────┬──────────────────┐
│  1 accountEmpty  │  2 saveEmpty     │  3 statusDanger  │
│  (未开档)        │  (存档空)        │  (破败)          │
│                  │                  │                  │
├──────────────────┼──────────────────┼──────────────────┤
│  4 statusGood    │  5 gameoverP     │  6 gameoverW     │
│  (繁华)          │  (催债)          │  (官府查封)      │
│                  │                  │                  │
└──────────────────┴──────────────────┴──────────────────┘

切割脚本（直接用，跑完出 6 张到 extracted/）：

// tools/cut-cover-3x2.cjs —— sharp extract，每格 1920x1280
const sharp = require('sharp');
const SRC = process.argv[2]; // pic/封面/inbox/grid-3x2.png
const OUT = 'E:/同福客栈挂机游戏/pic/封面/extracted';
const W = 1920, H = 1280;
const keys = ['accountEmpty','saveEmpty','statusDanger','statusGood','gameoverPressure','gameoverWarning'];
(async () => {
  for (let i=0;i<6;i++) {
    const r = Math.floor(i/3), c = i%3;
    await sharp(SRC)
      .extract({ left: c*W, top: r*H, width: W, height: H })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT}/bg_${keys[i]}.png`);
  }
})();

3. 6 张背景 prompt（直接复制）

3.1 accountEmpty（未开档 / 账簿空白）

中文版：

中国风水墨工笔画,一间古代客栈的清晨,大门半开,门内空无一人,长条木桌整齐
排列,桌面落满薄尘,角落里立着一只空酒坛,晨光从窗棂透入,远处有鸡鸣,色调
以米黄为底,朱红门柱,墨黑屋檐,笔触写意留白,无文字,无水印,无现代物件

English version：

Chinese ink and gongbi painting, an ancient inn at dawn, half-open wooden
door, no one inside, long wooden tables covered in thin dust, an empty wine
jar in the corner, morning light filtering through lattice windows, distant
rooster crow, palette of rice-yellow base, vermilion door pillars, ink-black
eaves, freehand brushwork with empty space, no text, no watermark

3.2 saveEmpty（存档空 / 古卷留白）

中文版：

中国风水墨工笔画,一张展开的羊皮古卷平铺在木桌上,卷面空白未书,卷边微卷,
笔架上搁着一支湖笔,砚台里墨汁未干,背景是米黄暖色的木桌纹理,色调以米黄
为底,朱红印章,墨黑笔触,无文字,无水印

English version：

Chinese ink and gongbi painting, an unfolded parchment scroll laid flat on
a wooden table, the scroll surface blank and unwritten, the edge slightly
curled, a lake-brush resting on a brush stand, an inkstone with fresh ink,
rice-yellow warm wooden table texture in background, palette of rice-yellow
base, vermilion seal, ink-black brushwork, no text, no watermark

3.3 statusDanger（客栈破败 / 状态危险）

中文版：

中国风水墨工笔画,一间破败的古代客栈内景,屋顶蛛网密布,横梁倾斜,桌椅翻倒,
烛台倾倒烛火摇曳将灭,墙皮剥落,角落有老鼠探头,色调以暗米黄为底,灰黑
蛛网,残红烛光,墨黑阴影,笔触写意萧瑟,无文字,无水印

English version：

Chinese ink and gongbi painting, the interior of a dilapidated ancient inn,
cobwebs covering the ceiling, slanted crossbeams, overturned tables and
chairs, a tilted candlestick with a guttering flame about to die, peeling
wall plaster, a mouse peeking from the corner, palette of dark rice-yellow
base, gray-black cobwebs, residual red candlelight, ink-black shadows,
freehand brushwork with desolate mood, no text, no watermark

3.4 statusGood（客栈繁华 / 状态良好）

中文版：

中国风水墨工笔画,一间古代客栈内景灯火通明,宾客满座,长条木桌摆满酒菜,
跑堂小二穿梭端盘,柜台后掌柜笑迎客人,屋顶悬挂红灯笼,窗外夜色中可见
挑担货郎,色调以暖米黄为底,朱红灯笼,金黄酒光,墨黑人影,笔触写意热闹,
无文字,无水印

English version：

Chinese ink and gongbi painting, a brightly-lit ancient inn interior, full
of guests at long wooden tables laden with food and wine, waiters shuttling
with trays, the innkeeper smiling behind the counter, red lanterns hanging
from the ceiling, a night vendor visible through the window, palette of
warm rice-yellow base, vermilion lanterns, golden wine light, ink-black
figures, freehand brushwork with bustling mood, no text, no watermark

3.5 gameoverPressure（终局 · 财务崩盘 / 催债）

中文版：

中国风水墨工笔画,一张写满朱红数字的账本摊在桌上,旁边散落催债信函,
信函上盖着醒目红印,窗外阴云压城,烛火幽暗,桌上有折断的算盘,色调以
暗米黄为底,朱红数字,墨黑阴云,笔触写意压抑,无文字(除印章外),无水印

English version：

Chinese ink and gongbi painting, a ledger filled with vermilion numbers
laid open on a desk, debt-collection letters scattered beside it, the
letters stamped with prominent red seals, overcast sky pressing down
outside the window, dim candlelight, a broken abacus on the desk,
palette of dark rice-yellow base, vermilion numbers, ink-black clouds,
freehand brushwork with oppressive mood, no text (except seals),
no watermark

3.6 gameoverWarning（终局 · 官府查封 / 警告）

中文版：

中国风水墨工笔画,一座古代客栈大门被官兵贴上封条,封条醒目朱红,两侧立着
持枪官兵,门环下垂,门前的石狮子上落满灰尘,门楣上"同福客栈"牌匾蒙尘,
色调以灰米黄为底,朱红封条,墨黑兵甲,笔触写意肃杀,无文字(除封条外),
无水印

English version：

Chinese ink and gongbi painting, the front gate of an ancient inn sealed
with official notice by soldiers, the notice in striking vermilion, two
spear-bearing soldiers flanking the gate, drooping door rings, dust on
the stone lion at the gate, the "Tonfu Inn" signboard above dust-laden,
palette of gray rice-yellow base, vermilion seal, ink-black armor,
freehand brushwork with stern mood, no text (except the notice),
no watermark

4. 边角料 prompt（可选 · 装饰元素库）

这些不是必须有，但有了之后主页能更精致。

4.1 同福客栈 logo 牌匾

Chinese ink and gongbi painting, a horizontal wooden inn signboard with
weathered texture, blank sign face without text, ornate carved wooden
frame with traditional cloud patterns, vermilion and gold accents, hung
by two iron rings, isolated on transparent background, no text on
signboard, no watermark

→ 用途：替换 App.tsx 顶部现有 logo；游戏内 / 启动页通用

4.2 卷轴边框（带状）

Chinese ink painting, a long horizontal scroll border element, rice-yellow
parchment with rough torn edges, faint ink cloud patterns, designed to be
used as a top/bottom border, isolated on transparent background, no text

→ 用途：任务条 / sidebar 顶部 / 底部的卷轴装饰

4.3 米黄底羊皮纸纹理（tileable）

seamless tileable texture, ancient Chinese rice-yellow parchment paper,
subtle fiber pattern, light aged stains, soft warm tone, top-down view,
no text, no logo

→ 用途：作为 CSS 背景图替代纯色 #F5E6C8

4.4 边框花纹（4 角 + 4 边可拼接）

Chinese traditional decorative corner ornament, ink-painted cloud and
floral pattern, vintage brown-gold color, single corner piece, isolated
on transparent background, no text

→ 用途：卡片 / 弹窗的边角装饰

4.5 红灯笼挂饰（单只）

Chinese red paper lantern, single lantern, intricate gold tassel, lit
from within with warm glow, isolated on transparent background, slightly
tilted, no text

→ 用途：主页顶部 nav 装饰 / 节日活动

5. 出图 → 落地流程

5.1 出图

  1. 打开 AI 出图工具（推荐即梦 / midjourney，国产风国风水墨最强）
  2. 选一个 3x2 prompt 模板（§3 任一）
  3. 调成"3x2 网格 / 9:16 不行"→ 横版 3:2 比例（如 3840×2560）
  4. 一次性出 6 张
  5. 检查：每张不带文字、同笔触、无水印、主体居中留 10% 边距
  6. 满意后存到 pic/封面/inbox/grid-3x2-v{N}.png

5.2 切割

node E:\同福客栈挂机游戏\tools\cut-cover-3x2.cjs `
  "E:\同福客栈挂机游戏\pic\封面\inbox\grid-3x2-v1.png"

→ 6 张落到 pic/封面/extracted/bg_{key}.png，每张 1920×1280

5.3 命名 + 替换

| 切出来的文件 | 替换到 | 当前大小 | 期望大小 | | :-: | :-: | :-: | :-: | | bg_accountEmpty.png | public/bg/scenes/account_empty.png | 350KB | ≤ 500KB | | bg_saveEmpty.png | public/bg/scenes/save_empty.png | 320KB | ≤ 500KB | | bg_statusDanger.png | public/bg/scenes/status_danger.png | 322KB | ≤ 500KB | | bg_statusGood.png | public/bg/scenes/status_good.png | 358KB | ≤ 500KB | | bg_gameoverPressure.png | public/bg/scenes/gameover_pressure.png | 325KB | ≤ 500KB | | bg_gameoverWarning.png | public/bg/scenes/gameover_warning.png | 346KB | ≤ 500KB |

如果出图超过 500KB，用 sharp 再压一遍：

sharp(src).resize({ width: 1920, withoutEnlargement: true })
  .jpeg({ quality: 78, mozjpeg: true }).toFile(dst)
// 或
sharp(src).resize({ width: 1920 })
  .png({ quality: 88, compressionLevel: 9 }).toFile(dst)

5.4 接入验证

npm run build

→ 现有 src/data/scenes/backgrounds.tsx 已经把路径写死成 account_empty / save_empty / status_danger / status_good / gameover_pressure / gameover_warning，文件名不变，替换即生效，零代码改动。

5.5 验收

  • [ ] 6 张图都是 PNG，带 alpha（用 sharp xxx.png | .metadata() 看 hasAlpha）
  • [ ] 6 张图同笔触 / 同色温，肉眼能看出"一套"
  • [ ] 每张图主体居中，留 10% 边距
  • [ ] 没有任何文字（除 gameover 封条上的"封"字外）
  • [ ] 替换后 npm run build 通过
  • [ ] 进游戏能看到新背景（开档/存档/终结/状态好 4 个节点）

6. 风格参考

| 关键词 | 参考作 | | :-: | :--- | | 水墨 + 工笔 | "陈洪绶《水浒叶子》" + "张乐平《三毛》" | | 暖米黄 + 朱红 | "故宫博物院藏·清宫旧藏画谱" | | 客栈热闹感 | "《武林外传》片头动画" + "《天书奇谭》" | | 古风 UI 边角 | "江南百景图" + "忘川风华录" |

7. 不要做的事

  1. ❌ 不要出带文字的图（AI 填字 95% 错字，浪费时间）
  2. ❌ 不要出 Q 版 / 二次元（跟现有立绘风格冲突）
  3. ❌ 不要用白色 / 黑色纯色背景（要米黄 / 渐变 / 场景）
  4. ❌ 不要现代元素（手表 / 玻璃 / 钢筋）
  5. ❌ 不要 16:9（接 1920 宽浪费边距，用 3:2 = 1920×1280）
  6. ❌ 不要 6 张分 6 次出（色温/笔触会飘，一次出 3x2 网格再切）

8. 一次性出 3x2 网格的 prompt 模板

省事版（一次出 6 张同款不同主题，用 §3 的 6 个 prompt 做"3x2 grid layout"指令）：

I will give you 6 prompts. Render all 6 in a single image arranged as
3 columns × 2 rows grid, each cell exactly 1280×1920 pixels, with thin
neutral gap (10px) between cells. All 6 cells must share the same
art style (Chinese ink and gongbi painting, rice-yellow base, vermilion
+ gold + ink-black palette), same brushwork, same color temperature,
same level of detail. NO TEXT anywhere. NO watermark. NO modern objects.
NO children. NO blood.

Cell (1,1) top-left: [粘贴 3.1 中文版]
Cell (1,2) top-center: [粘贴 3.2 中文版]
Cell (1,3) top-right: [粘贴 3.3 中文版]
Cell (2,1) bottom-left: [粘贴 3.4 中文版]
Cell (2,2) bottom-center: [粘贴 3.5 中文版]
Cell (2,3) bottom-right: [粘贴 3.6 中文版]

→ 给 midjourney / 即梦 / sora 都能用。一次性出图保证 6 张"同源"。

9. 关联文档

| 文档 | 用途 | | :--- | :--- | | docs/design/active/Phase1实施切片-v1.md | 道具系统重构施工蓝图 | | docs/design/active/道具系统新核心UI视觉规范-v1.md | 色板 / 组件 / 界面 | | src/data/scenes/backgrounds.tsx | 6 张背景的中央注册表（替换即生效） | | tools/cut-cover-3x2.cjs | 本指南配套切割脚本（待创建，参考 §2 代码） | | tools/cut-cover-elements.cjs | 13 区块矩形框切割脚本（已有，本次产出） | | pic/封面/extracted/elements/manifest.json | 13 区块矩形坐标清单 |

版本：v1.0 / 2026-07-07 配套：src/data/scenes/backgrounds.tsx（路径约定已锁） 下次更新：等用户实际出图后，根据"出图效果 vs 设计预期"差异补 v1.1