# Case 02 - Match-3 Visual Trial Before / After

## 案例定位

本案例展示真实图片参与后的 Sample Pack 价值：不是只给 prompt，而是让用户看到一张合格图、一张失败图，以及失败图如何被返修成可接受的 gameplay-first HUD。

案例选择：手机竖屏三消关卡 HUD。原因是三消画面能快速暴露 AI 游戏 UI 的常见问题：棋盘占比不足、海报化、商业入口过载、红点堆叠、角色抢主视觉、目标和步数压力被弱化。

## Source Rule Set

- `screen-types/hud.md`：约束顶部资源、目标、步数和可操作提示的层级。
- `genres/casual_puzzle.md`：约束棋盘占比、低步数压力、道具状态和休闲 UI 边界。
- `standards/layout_and_safe_area.md`：约束手机安全区、底部操作区和不遮挡规则。
- `standards/readability_and_accessibility.md`：约束文本可读性、颜色不作为唯一信息来源。
- `standards/gameplay_clarity.md`：约束目标、压力、反馈和下一步关系。
- `standards/anti_drift_rules.md`：识别海报化、商业入口过载和 HUD 信息过载。

## SCREEN_BRIEF

- Output type：Gameplay Demo Shot，偏真实游戏实机截图。
- Platform：mobile portrait，参考 1080 x 1920。
- Screen type：HUD + gameplay board。
- Genre：casual puzzle / match-3。
- Player state：玩家在第 18 关，剩余 3 步，目标还有 6 个冰块未清除。
- P0 information：棋盘、剩余步数、关卡目标、目标进度、推荐可操作点。
- P1 information：三个道具按钮、分数、关卡编号、连锁消除后的轻反馈。
- P2 information：少量资源、设置或暂停入口，必须低存在感。
- Text strategy：只允许短文本，如 `Level 18`、`Moves 3`、`Ice 6`、`Score 12,450`。
- Success criteria：截图一眼能看出“低步数三消关卡正在进行”，玩家知道目标、剩余压力和下一步可交换位置。

## LAYOUT_CONTRACT

- Canvas：1080 x 1920 portrait。
- Safe area：顶部 96px 和底部 80px 不放关键文字；所有按钮距离屏幕边缘至少 32px。
- Top HUD：高度不超过 220px；左侧关卡编号，中部目标胶囊，右侧设置或暂停。
- Main board：棋盘占屏幕高度约 58%-64%，位于垂直中段；棋盘为 8 x 8，格子必须清楚分隔。
- Goal panel：位于棋盘上方，不遮挡棋盘格子，显示冰块图标和剩余数量。
- Moves counter：靠近顶部中间或棋盘上沿，数字 `3` 必须比普通资源更醒目。
- Booster row：底部 3 个道具按钮，固定等宽，显示可用/不足/冷却状态。
- Forbidden overlap：特效、角色、促销入口不能遮挡推荐交换点、剩余步数、目标数量和底部道具按钮。
- Component count lock：顶部资源入口不超过 3 个；底部道具不超过 3 个；不得添加商城、活动、VIP、抽卡入口。

## VISUAL_STYLE_CONTRACT

- Style boundary：明亮、干净、偏休闲，UI 使用圆角但不过度拟物；颜色需要区分目标、压力和可点状态。
- State tokens：低步数用暖色描边或大号数字；推荐交换点用双向箭头和柔和外发光；不可用道具用灰度、锁或费用不足标记。
- Text visual：关键数字用高对比描边或底板承托；所有文本必须像运行时 UI，可替换、可本地化。
- Effects：允许少量粒子和碎冰反馈，但必须服务于“刚完成消除”的状态，不得变成全屏爆炸。
- Anti-drift：禁止广告海报构图、禁止角色半身像占据主画面、禁止随机促销红点、禁止把棋盘缩成背景装饰。

## IMAGE_PROMPT_LOCKED

### Pass Image Prompt

来源：本次 Sample Pack 全新内置生图。

```text
Create a realistic mobile portrait in-game screenshot for a casual match-3 puzzle level, 1080x1920. The player is on Level 18 with only 3 moves left and must clear 6 remaining ice tiles. The center gameplay board is an 8x8 match-3 grid occupying about 60% of screen height, with clearly separated tiles, several ice-covered cells, and one suggested swap highlighted with a subtle arrow and glow. The top HUD is compact: Level 18, goal icon "Ice 6", large readable "Moves 3", score 12,450, and one small settings icon. The bottom row has exactly three booster buttons with different states: usable, locked, and insufficient currency. Use clean bright casual puzzle game UI, readable runtime text, clear safe margins, and visible gameplay state. Make it look like a real playable game screenshot, not a poster or store page.

Forbid: fake unreadable text, VIP badge, gacha banner, sale popup, red-dot clutter, web dashboard layout, oversized character art, full-screen particle effects, hidden objective, hidden move counter, decorative board with no playable tiles.
```

### Failure Image Prompt

来源：本次 Sample Pack 全新内置生图。

```text
Create a deliberately flawed mobile casual puzzle screen that should be classified as revision_required. Include Level 18, Moves 3, Ice 6, a small match-3 board, a large mascot character overlapping the board, VIP badge, sale banner, red notification dots, event buttons, daily gift, starter pack, shop, collection and other clutter. Keep it visually polished but clearly violate gameplay-first HUD rules.
```

## TRUE IMAGE OUTPUT

### Pass - 低步数三消 HUD

![Mobile Match-3 HUD pass example](assets/mobile_match3_hud_pass.png)

### Before - 失败图，海报化与商业入口过载

![Match-3 cluttered before example](assets/match3_poster_clutter_before_revise.png)

### After - 按返修提示修复后通过

![Match-3 repaired after example](assets/match3_gameplay_first_after_pass.png)

## IMAGE_REVIEW

### Pass Image Review

- image_path：`assets/mobile_match3_hud_pass.png`
- generation_method：Codex built-in `image_gen`
- generated_at：2026-05-02
- final_score：91
- decision：pass

评分摘要：

- 玩法清晰度：19/20。低步数压力明确，目标 `Ice 6`、`Moves 3` 和推荐交换点清楚。
- UI 信息层级：14/15。顶部目标、步数和分数层级合理，底部 3 个道具状态分明。
- 真实游戏截图感：14/15。画面像可玩的三消关卡，不是海报或商店页。
- 技术可落地性：8/10。棋盘、HUD、道具和推荐交换点都可拆成运行时组件；部分数值和图标应由运行时代码覆盖。

结论：通过。它可以作为免费 Sample Pack 的代表性合格样例。

### Before Image Review

- image_path：`assets/match3_poster_clutter_before_revise.png`
- generation_method：Codex built-in `image_gen`
- generated_at：2026-05-02
- final_score：72
- decision：revise

失败原因：

- 棋盘过小，主视觉被角色、促销、VIP、礼包和红点抢走。
- P0 信息仍存在，因此不是 redo；但信息层级严重偏离 gameplay-first HUD。
- 图像质量高不等于任务成功。它更像运营促销页，不像关卡运行截图。

### After Image Review

- image_path：`assets/match3_gameplay_first_after_pass.png`
- generation_method：Codex built-in `image_gen`
- generated_at：2026-05-02
- final_score：89
- decision：pass

返修结果：

- 删除大型角色、VIP、sale、starter pack、event clutter、red-dot buttons 和底部导航过载。
- 放大 8x8 棋盘，让棋盘、`Moves 3`、`Ice 6` 重新成为 P0。
- 底部只保留 3 个 booster，画面重新像可玩的关卡运行截图。

## REVISION_PROMPT

来源：本次 Sample Pack 全新内置生图的修复合同。

```text
Revise the image into a real playable match-3 level screenshot. Preserve Level 18, Moves 3, Ice 6, the match-3 tile style, and the bright casual puzzle art direction. Remove the large mascot character, VIP badge, sale banner, starter pack, event clutter, side red-dot buttons, bottom navigation overload, and promotional treasure chest. Enlarge the playable 8x8 board to about 60% of screen height. Keep only a compact top HUD and exactly three bottom booster buttons. Make the move counter and ice objective more important than decorative rewards.
```

返修原则：

- 保留：Level 18、Moves 3、Ice 6、三消方块风格、明亮休闲方向。
- 只修改：棋盘占比、P0 层级、商业入口过载、角色遮挡。
- 删除：VIP、sale、礼包、活动、红点、底部导航堆叠。
- 禁止新增：商店、抽卡、任务墙、排行榜、长文案、网页后台卡片。

## IMPLEMENTATION_NOTES

### 运行时组件

```text
RootCanvas
  SafeArea
    TopHud
      LevelBadge
      GoalPill(goalType = ice, goalRemaining = 6)
      MovesCounter(remainingMoves = 3)
      PauseOrSettingsButton
    MatchGrid
      TileGrid(8 x 8)
      IceOverlayLayer
      SuggestedMoveMarker
      ChainFeedbackLayer
    BoosterBar
      BoosterButton_01(usable)
      BoosterButton_02(locked_or_cooldown)
      BoosterButton_03(insufficient_currency)
```

### 状态绑定

- `levelId = 18`
- `remainingMoves = 3`
- `goalType = ice`
- `goalRemaining = 6`
- `score`
- `boosterState[]`
- `tileState[]`
- `suggestedSwap`

### 切图与实现边界

- 可切图：棋盘底板、普通方块、冰块覆盖层、推荐箭头、道具图标、数字底板。
- 建议代码绘制：棋盘 grid、选中描边、推荐交换点、冷却环、状态遮罩。
- 必须运行时覆盖：全部数字、关卡编号、步数、目标数量、资源数量和道具库存。
- 不应直接使用整张图作为 UI 底图；它是参考图和验收证据，不是生产资产包。

## Sample Pack 结论

这组图片证明本 Skill 的关键价值不是“生成更好看的图”，而是：

1. 先把玩法目标、布局和状态锁住。
2. 让图像生成服务这个锁定目标。
3. 用分数判断 pass / revise / redo。
4. 用返修提示只改失败点，不重新发散。
5. 把视觉结果转成开发可执行的组件、状态和风险说明。
