Menu
将设计稿转换后的 index.html 文件转换为目标平台代码（H5/React/Vue），包括样式抽离、语义化命名、交互实现和循环渲染支持。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
根据vlm_result.json识别 JSON 文件中的列表控件，并调整 HTML 代码中的布局结构，使其更符合语义化和响应式布局要求。
控件分类。根据vlm_result.json中的控件类型，给index.html中的数据打上类型标记
将设计稿/HTML 转为 Android Kotlin 原生代码的规范与检查清单。包含文件结构、样式与语义化命名、交互与循环渲染、验证项。
将设计稿/HTML 转为 iOS Objective-C原生代码的规范与检查清单。包含文件结构、样式与语义化命名、交互与循环渲染、验证项。
将 HTML/Web 设计稿转换为 React Native 代码，包含文件结构、StyleSheet 样式、语义化命名、交互状态与循环渲染。在用户要求将 Figma/HTML 转成 React Native 或进行 RN 代码转换时使用。
| name | react-vue-H5-convert |
| description | 将设计稿转换后的 index.html 文件转换为目标平台代码（H5/React/Vue），包括样式抽离、语义化命名、交互实现和循环渲染支持。 |
将 UI2Code 工具生成的 index.html 转换为规范的前端代码，支持 H5、React、Vue 平台。
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
source_dir | string | - | ZIP 包解压后的目录路径 |
target_dir | string | ${source_dir}/target_code | 代码输出目录 |
platform | string | H5 | 目标平台：H5、React、Vue |
${source_dir} 中创建子文件夹 target_code 存储代码完整读取：读取 ${source_dir}/index.html 文件
结构分析：
样式提取：提取所有行内样式属性，包括：
图片路径提取：提取所有 <img src> 和 background-image 路径
文本内容提取：提取所有文本内容，特别注意需要精确宽度的文本元素
${source_dir} 下是否包含 images/ 目录（图片资源）${source_dir} 下是否包含 fonts/ 目录（字体资源）⚠️ 强制要求
| 优先级 | 命名来源 |
|---|---|
| 1 | 附近文本内容 |
| 2 | 用途功能 |
| 3 | 位置作用 |
命名格式：
favorite-driver-icon.png、back-arrow-icon.png、user-avatar.png禁止：使用 UUID、随机字符串、image_{序号} 或中文命名
| 资源类型 | 源目录 | 目标目录 | 命名规则 |
|---|---|---|---|
| 图片 | ${source_dir}/images/ | ${target_dir}/images/ | 语义化命名 |
| 字体 | ${source_dir}/fonts/ | ${target_dir}/fonts/ | 保持原有文件名 |
⚠️ 强制要求：更新所有代码文件中的路径引用
默认文件结构：
| 平台 | 文件结构 |
|---|---|
| H5 | index.html、styles.css、script.js |
| React | index.jsx、styles.css |
| Vue | index.vue |
如果用户指定了文件结构，以用户要求为准。
| 组件类型 | 命名规则 | 示例 |
|---|---|---|
| 文本组件 | 根据文本内容 | nav-title、driver-name |
| 容器组件 | 根据功能 | nav-bar、driver-card |
| 图片组件 | 根据用途 | back-icon、driver-avatar |
禁止：container-{ID} 或 comp-{ID} 格式
class="driver-name driver-name-common"⚠️ 强制要求
| 属性类型 | 要求 |
|---|---|
| 数值属性 | width、height、margin、padding、font-size、line-height 等必须精确匹配原始值（包括小数） |
| 定位属性 | position、top、left、right、bottom 必须精确匹配 |
| 颜色值 | rgba 颜色值必须完全一致 |
⚠️ 强制要求：公共样式 + 单独样式 = 原始行内样式的完整集合
常见遗漏属性：flex-direction、justify-content、align-items、align-self、flex-wrap、column-gap 等 flexbox 属性
filter-tab-active、filter-tab-inactive| 样式类型 | 位置 class | 状态 class |
|---|---|---|
| 圆角位置 | ✓ | - |
| 布局/尺寸/间距/定位 | ✓ | - |
| 默认边框 | ✓ | - |
| 选中态背景色 | - | ✓ |
| 选中态边框处理 | - | ✓ |
| 文本颜色变化 | - | ✓ |
| 场景 | 位置 class | 状态 class |
|---|---|---|
| 未选中有边框，选中无边框 | 设置默认边框 | border: none |
| 未选中无边框，选中有边框 | 不设置边框 | 添加边框 |
| 边框颜色不同 | 设置默认颜色 | 覆盖边框颜色 |
| 平台 | 实现方式 |
|---|---|
| H5 | addEventListener + classList.add/remove |
| React | onClick + 组件状态管理 |
| Vue | @click + methods |
⚠️ 不支持循环渲染
document.createElement() 或 innerHTML 创建 DOM 元素循环组件识别条件（必须全部满足）：
实现方式：
{items.map((item, index) => (
<div key={index} className="item">
<img src={item.icon} alt={item.name} />
<span>{item.name}</span>
</div>
))}
⚠️ 强制要求：必须为每个循环项添加
key属性
实现方式：
<div v-for="(item, index) in items" :key="index" class="item">
<img :src="item.icon" :alt="item.name" />
<span>{{ item.name }}</span>
</div>
⚠️ 强制要求：必须为每个循环项添加
:key属性
| 验证项 | 说明 |
|---|---|
| 结构一致性 | HTML 结构必须与原始 index.html 完全一致 |
| 语义化命名 | class 和图片名称都是语义化的 |
| 样式完整性 | 所有行内样式已抽离，公共+单独样式组合正确 |
| 资源完整性 | 图片/字体路径正确，文件存在 |
| 交互功能 | 识别了选中态组件和按钮，添加了交互样式和逻辑 |
| 循环渲染 | React/Vue 平台正确使用循环渲染（H5 忽略） |
✅ 代码转换验证：
- 结构一致性：通过/失败
- 语义化命名：通过/失败
- 样式完整性：通过/失败
- 资源完整性：通过/失败
- 交互功能：通过/失败
- 循环渲染：通过/失败（H5 平台忽略）
- 验证结果：通过/失败
- 问题列表：[如果有问题，列出所有问题]