Wechat Prototype Creator

本 Skill 用于引导 AI 针对各种业务需求（如：物业管理系统、企业会议室预定、二手交易市场等），快速构建出一个高保真、高颜值的微信小程序前端原型模拟器。

模拟器包含两大核心部分：

1. 左侧（手机预览区）：物理手机外壳（Notch、时间状态栏、微信胶囊按钮、导航栏、底部 Tabbar），内部采用单页应用（SPA）机制进行流畅的页面穿梭与交互。
2. 右侧（控制面板区）：提供全局模拟状态控制器（如登录状态、角色切换、配置选项）、一键页面穿梭目录、以及实时交互系统日志，极其适合进行演示和快速验证。

---

核心工作流

当你（AI）触发此 Skill 并承接新的原型开发需求时，请严格执行以下步骤：

1. 业务与页面规划 (Planning)

与用户对齐该原型小程序的页面与流程。明确以下核心要素：

• 目标用户与主要角色（例如：物业系统的业主与保安、商城系统的买家与卖家）。
• 页面路由目录：定义各个原型页面的 pageId，例如：home（首页）、list（列表页）、detail（详情页）、form（表单提交页）、my（个人中心）。
• 状态控制项：确定右侧面板需要模拟的全局状态（例如：登录身份、会员等级、是否支付、审核结果等）。

2. 初始化原型骨架 (Initialization)

在目标目录（通常是 prototype/ 目录）下，将本 Skill 自带的参考模板（Boilerplate）文件拷贝为基础：

• 读取 boilerplate.html 写入为新项目的 index.html。
• 读取 boilerplate.css 写入为新项目的 style.css。
• 读取 boilerplate.js 写入为新项目的 script.js。

[!NOTE] boilerplate.html 默认为了在 references 目录下可被直接双击预览，其内部的样式与脚本链接直接指向了 boilerplate.css 和 boilerplate.js。 当你把它们写入为新项目的 index.html 并搭配 style.css / script.js 时，请务必将 index.html 头部与尾部的引用路径修改为 style.css 和 script.js。

3. 定制 HTML 骨架 (HTML Structuring)

在 index.html 中进行如下定制：

• 页面标题：修改 <title> 和左上角 header 中的系统名称。
• 添加/修改单页：在 #pageContainer 内部删除演示的 Demo 页面，为每个业务页面新建一个容器：

  <div class="page" id="page-[pageId]">
    <!-- 编写该页面的高保真微信风格内容 -->
  </div>
  

• 配置 Tab 栏：如果系统使用底部导航，在底部的 .tab-bar 中，为每个 Tab 页配置对应的图标与标签名，绑定 switchTab('[pageId]')。
• 自定义右侧控制台：
  • 在 .control-grid 下添加特异性的选择器或输入框以映射全局模拟状态（如“当前身份：业主/物业”）。
  • 在 .nav-grid 中，为每个单页面配置穿梭按钮，绑定 shuttleNavigate('[pageId]')。

4. 应用微信风格 UI 组件 (UI/UX Styling)

在各单页内编写内容时，必须遵循高颜值微信组件库 of CSS 规范，使界面呈现出极佳的精致感：

• 卡片容器：使用 .card，子标题使用 .card-title。
• 按钮：主操作使用 .btn-primary，辅助操作使用 .btn-secondary。
• 表单输入：使用 .form-group 包装，内部包含 .form-label 和 .form-input / .form-select。
• 步骤条：使用 .form-step-compact 进行引导。
• 胶囊选项：使用 .chip-group 容器，内部使用 .chip 进行选项排列，选中项赋予 .chip.selected。
• 只读列表/条目：使用 .confirm-item，内部两端对齐展示 .label 和 .value。
• 浮动/弹窗提示：利用通用的 showToast('提示内容') 模拟原生微信 Toast。

5. 编写交互与状态控制逻辑 (JS Scripting)

在 script.js 中编写控制原型交互的代码：

• 全局状态：在 simState 中定义你所需要的业务模拟数据和交互状态。
• 页面映射：在 pageTitles 对象中为所有 pageId 配置中文说明，便于日志和 NavBar 动态更新。
• 日志埋点：在页面切换、表单提交、按钮点击等所有关键交互触发时，必须调用 addLog('描述交互...')，将事件输出到右侧的日志视窗中。
• 模拟器状态监听：编写 updateSimState() 函数，获取右侧控制台表单的值并同步更新 simState。例如，当选择“未登录”状态时，页面跳转到登录页；当选择“已支付”状态时，页面内的一些受限元素解锁。
• 业务函数：实现表单校验、数据追加至列表、模拟异步加载（例如使用 setTimeout 切换至生成中 loading 页，再到结果页）等交互逻辑。

---

示例与最佳实践

页面平滑过渡与路由

模板内置了 .page 的激活控制和平滑的侧滑进入效果。 当你需要跳转页面时，请调用 navigateTo('[pageId]')，它会自动 handle：

1. 拦截未登录等权限检查。
2. 为新页面添加 .active 并触发 CSS 的 slide-in 动画。
3. 维护 pageHistory 导航栈，控制顶部导航栏返回键 ‹ 的显示和隐藏。

CSS 换肤设计

可以通过在最外层 #app 节点上切换类名来实现主题切换。 Boilerplate 支持以下预置类名：

• .skin-default：微信经典绿主题（主打微信原生感、服务类、生活类应用）。
• .skin-blue：暗夜太空蓝主题（主打科技感、AI 智能、大数据类应用）。
• .skin-gold：温润宣纸金红主题（主打高端、国风、文娱、教育类应用）。
• .skin-eye：安静墨绿护眼主题（主打工具、阅读、健康类应用）。 可以通过控制台直接进行换肤测试，提升原型的质感和趣味性。