静态原型拆分工具 是做什么的？
使用此技能将已完成或半完成的静态原型转换为更清晰的交付物，用于演示、迭代、迁移或交接。
目标不是重新设计产品。保留现有的视觉方向和交互意图，同时使原型更易于打开、检查、修改和迁移。
范围与交接
- 此技能用于从现有静态原型创建新的拆分、组件化或交接交付物。如需对已整理的原型进行持续编辑，请使用
prototype-maintenance（如果可用）；这不是必需的依赖项。 - 对于小规模的复制或样式更改，直接进行更改，无需重构原型。
- 保留现有框架项目在其既定的技术栈中；除非用户要求，否则不要将React/Vue或类似项目扁平化为静态HTML。
- 遵守用户的文件替换、配置、依赖项、网络访问、本地服务器和存储数据的授权规则。此技能不授予这些权限。
默认原则
- 保留源文件。除非用户明确要求，否则不要覆盖原始原型。
- 为生成的交付物创建带时间戳的输出文件夹。
- 将编辑重点放在结构、路径、可复用资源和基本交互连接上。
- 保留原始语言、产品术语、视觉样式和页面层次结构。
- 除非用户要求使用框架，否则优先使用纯静态HTML/CSS/JS。
- 避免无关的重新设计、依赖项安装、构建工具或框架迁移。
- 当原型既需要拆分页面又需要完整预览时，将拆分页面文件视为唯一可信源。避免在组合入口中维护页面内容或交互逻辑的第二个不同副本。
- 组合入口应通过路由、模板、共享模块或小型构建/同步脚本，从拆分页面源组合、加载或生成。如果临时的组合实现对于可靠性是必要的，请指出重复问题，并建议在进一步进行页面级迭代之前进行整合。
- 对于后续的页面编辑，首先修改特定的拆分页面及其页面级脚本，然后刷新或重新生成组合预览，这样用户就不必重复进行相同的更改。
何时触发
当用户要求执行以下操作时触发此技能：
- 将大型HTML原型拆分为单独的页面。
- 将静态原型整理为交付文件夹。
- 将静态HTML原型组件化。
- 打包原型以供交接或演示。
- 为产品设计原型创建更清晰的版本。
- 将单文件静态应用转换为多页面或静态组件结构。
- 准备原型以供后续迁移到Vue、React、Taro、uni-app、微信小程序或其他前端技术栈。
推荐的输出形态
根据请求选择一种或多种形态。
拆分文件版
当用户需要简单的静态演示页面或逐页的设计迭代时使用。
推荐结构：
输出目录_YYYYMMDD-HHMMSS/
├── 拆分文件版/
│ ├── index.html
│ ├── page-a.html
│ ├── page-b.html
│ └── assets/
│ ├── styles.css
│ └── app.js
└── README.md
指南：
- 每个主要视图对应一个HTML文件。
- 在可行的情况下，通过普通链接保留页面导航。
- 将共享的CSS和轻量级JS提取到
assets/中。 - 确保每个页面可以独立在浏览器中打开。
- 保持页面名称有意义且稳定。
组件化静态版
当原型应更易于以后迁移到前端框架时使用。
推荐结构：
输出目录_YYYYMMDD-HHMMSS/
├── 组件化版/
│ ├── index.html
│ └── assets/
│ ├── styles.css
│ ├── components.js
│ ├── data.js
│ └── app.js
└── README.md
指南：
index.html：外壳、根容器、脚本/样式引用。assets/styles.css：共享样式。assets/data.js：模拟数据和业务数据（如有用）。assets/components.js：可复用的HTML渲染函数或组件模板。assets/app.js：路由切换、状态、事件绑定和简单交互。- 除非用户要求特定框架，否则保持此版本无框架。
- 如果同时存在拆分的HTML页面，不要手动将其内容复制到
app.js中。优先导入共享模板、加载页面片段或使用确定的同步步骤，使拆分页面保持为维护源。
从拆分页面生成的组合预览
当用户希望每个页面可独立编辑，同时还需要一个完整的交互式预览时使用。
推荐结构：
prototype/
├── app.html # 完整预览外壳
├── pages/
│ ├── welcome.html
│ ├── templates.html
│ └── ...
├── assets/
│ ├── css/styles.css
│ ├── js/common.js
│ ├── js/router.js # 仅用于预览路由/组合
│ └── js/pages/
│ ├── templates.js
│ └── ...
└── README.md
指南：
- 将页面标记和页面特定行为保留在
pages/和assets/js/pages/中。 - 将
app.html作为外壳：设备框架、导航、路由容器以及共享脚本/样式引用。 - 将
router.js专注于加载页面、绑定共享导航、保留状态以及仅与预览相关的问题。 - 避免编写冗长的
app-combined.js来手动重写每个页面。如果存在这样的文件作为短期解决方案，请将其标记为生成或临时文件，并在进行大量页面编辑之前与拆分页面进行整合。 - 当用户要求修改一个页面时，仅编辑该页面及其页面脚本，除非预览外壳或共享样式确实需要调整。
打包的交接文件夹
当用户要求完整的包或交付捆绑包时使用。
推荐结构：
产品原型完整包_YYYYMMDD-HHMMSS/
├── 使用说明.md
├── 原始文件/
├── 拆分文件版/
└── 组件化版/
指南：
- 仅包含演示和交接所需的文件。
- 保持源文件名可识别。
- 如果创建归档文件，请使用带时间戳的名称。
- 除非用户确认，否则不要删除中间生成的文件夹。
工作流程
-
检查原型文件。
- 识别入口文件、主要视图、共享CSS、共享JS、内联事件处理程序、资源、外部CDN依赖项、对话框、抽屉、标签页和页面导航。
- 在编辑之前使用
rg --files和有针对性的读取。
-
决定输出形态。
- 如果用户只要求拆分：创建
拆分文件版。 - 如果用户要求迁移准备或组件化：创建
组件化版。 - 如果用户要求交付：创建包含使用说明的完整包。
- 如果不确定，选择满足请求的最小输出。仅当服务明确需求时才创建多个版本；对于共享内容和行为，保持一个权威来源。
- 如果用户只要求拆分：创建
-
创建带时间戳的输出文件夹。
- 推荐的时间戳格式：
YYYYMMDD-HHMMSS。 - 保持原始文件不变。
- 推荐的时间戳格式：
-
提取并组织。
- 将共享CSS移入通用样式表。
- 将共享JS移入通用脚本。
- 规范化资源路径。
- 将主要视图转换为单独的HTML文件或组件模板。
- 保留对演示重要的交互：导航、标签页、抽屉、模态框、切换、列表-详情过渡、基本表单和文件输入。
-
解决运行时和提取细节。
- 在实施之前选择打开模式：直接
file://页面，或使用获取的片段或ES模块时的HTTP预览。对于需要HTTP的设计，不要承诺双击即可运行。尽可能复用现有的预览服务器；启动预览服务器需遵守用户的授权规则。 - 区分完整的HTML文档和可加载的片段。将片段加载到外壳中时，相对于外壳的基准路径规范化其相对资源和导航URL；原始片段插入不会保留源文档的基准URL，也无法可靠地运行其脚本。
- 将内联CSS移入样式表时，重新基于新样式表调整
url(...)、字体和导入路径。保留级联顺序、特异性和响应式行为。 - 保持一致的脚本模型。保留经典脚本的加载顺序和共享状态；保留模块的导入/导出边界。内联处理程序无法访问模块本地函数，除非有显式的桥接。
- 显式挂载页面行为，并在离开视图时清理监听器或计时器。验证重新访问页面时不会导致动作重复注册。
- 在拆分之前盘点现有的存储键和状态转换。不要为了演示而清除存储或静默覆盖用户创建的数据。
- 在实施之前选择打开模式：直接
-
编写交接文档。
- 包括源文件、生成时间、入口页面、文件夹用途和推荐的后续步骤。
- 保持文档简短有用。
-
验证。
- 检查入口HTML文件是否存在。
- 检查每个入口或组合视图中的链接CSS/JS路径、CSS资源URL、片段资源和导航目标。
- 在可行的情况下本地打开或预览。
- 对于视觉原型，如果浏览器工具可用，请验证桌面/移动端布局。
- 将关键路由和交互与原始版本进行比较：初始渲染、前进/后退导航、重新访问视图、模态框确认/取消以及刷新后的状态保存（如果适用）。
- 提及任何未验证的行为或外部CDN依赖项的风险。未经检查外部资源，不要声称支持离线。
README / 使用说明模板
使用用户或项目的语言编写简洁的README。以下中文示例可供参考；仅列出实际生成的项目，并说明是否需要HTTP：
# 项目原型整理
生成时间：YYYY-MM-DD HH:mm:ss
来源文件：原始文件名.html
## 推荐打开
- `拆分文件版/index.html`
- `组件化版/index.html`
## 拆分文件版
适合静态原型演示和逐页设计调整。每个页面是独立HTML，页面之间通过文件链接跳转。
## 组件化版
适合继续演进为Vue、React、Taro、uni-app、微信小程序或其他前端结构。
## 说明
- 原始文件未被修改。
- 公共样式和脚本已整理到 `assets/`。
- 如需继续工程化，可优先迁移 `components.js`、`data.js` 和 `app.js`。
质量检查清单
在给出最终响应之前，请检查：
- 原始源文件已保留。
- 输出文件夹带有时间戳。
- 入口文件命名清晰。
- 资源路径相对于每个HTML文件有效。
- 页面/视图之间的导航仍然有效。
- 重要的交互未丢失。
- README或使用说明解释了要打开的内容。
- 最终响应包括保存路径和验证结果。