---
name: "miniprogram-h5-conversion"
displayName: "H5 → 微信小程序转换规范"
description: "H5 原型转微信小程序页面的完整开发规范体系。覆盖截图、审计、修正、验证四阶段流水线，89 单元批量编排，半自动/新页面开发模式。核心硬性规则在 always-on steering 中始终生效，本 Power 提供操作手册。"
keywords: ["微信小程序", "miniprogram", "wxml", "wxss", "H5", "转换", "迁移", "rpx", "截图", "审计", "修正", "验证", "视觉还原", "TDesign", "Tailwind"]
author: "NeoZQYY"
---

# H5 → 微信小程序转换规范

核心硬性规则已提取到 always-on steering `mp-h5-rules.md`（每次对话自动生效），详细开发参考值在 fileMatch steering `mp-h5-dev.md`（读取 wxml/wxss/h5_ui 文件时自动加载）。

本 Power 提供操作手册——截图、审计、修正、验证的具体执行流程。

## 使用方式

### 确认工作模式后加载对应 steering

| 我要做什么 | 加载的 steering |
|-----------|----------------|
| 批量执行 89 单元视觉还原 | `batch-auto.md` |
| 用户指定页面/区域做开发或修正 | `user-guided.md` |
| 从零开发新页面 | `user-guided.md`（场景二） |
| 执行截图+审计+修正+验证流程 | `action-manual.md` |
| 查 Power/MCP 调用方式 | `power-integration.md` |

### 实时数据（仓库内，不在 Power 中）

| 资源 | 路径 |
|------|------|
| 迁移进度 | `docs/miniprogram-dev/04-audit/PROGRESS.md` |
| 踩坑速查 | `docs/miniprogram-dev/05-lessons/pitfalls.md` |
| 收敛模式 | `docs/miniprogram-dev/05-lessons/convergence-patterns.md` |
| 页面结构速查 | `docs/miniprogram-dev/03-reference/page-structure-map.md` |
| 基准测试历史 | `docs/miniprogram-dev/03-reference/benchmark-history.md` |

### 关联资源

| 资源 | 路径 |
|------|------|
| H5 原型 | `docs/h5_ui/pages/*.html` |
| 设计 Token | `docs/h5_ui/design-tokens.json` |
| 图标映射 | `docs/h5_ui/icon-mapping.md` |
| 截图产物 | `docs/h5_ui/compare/<page>/` |
| MP 源码 | `apps/miniprogram/miniprogram/pages/` |

## Steering 文件清单

本 Power 包含 4 个 steering 文件：

### 调度层（做什么、什么顺序）
- `batch-auto.md` — 89 单元批量编排 + 4 代理流水线
- `user-guided.md` — 半自动/新页面开发模式

### 行动层（怎么做）
- `action-manual.md` — 截图+审计+修正+验证的完整执行手册（合并原 screenshot/audit/fix/verify 四个文件）

### 集成层
- `power-integration.md` — 4 个外部 Power 的调用方式 + MCP 连接规范

## 与 Steering 的分工

| 内容 | 位置 | 加载方式 |
|------|------|---------|
| 硬性规则（标签映射、rpx、颜色、截图禁令） | `mp-h5-rules.md` | always-on |
| 开发参考值（灰阶全表、圆角、阴影、CSS 风险） | `mp-h5-dev.md` | fileMatch 自动 |
| 操作手册（截图流程、审计方法、修正策略） | 本 Power steering | 按需 readSteering |