What makes 别整乱七八糟的原型 notable?

1.1K downloads. Trust evidence available

How should 别整乱七八糟的原型 be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

别整乱七八糟的原型

将产品原型转换为详细技术规范的技能。深度解析HTML原型，提取完整的菜单结构、筛选条件、表格列、操作按钮等信息。支持URL原型、本地HTML文件、图片原型、XMind文件四种输入类型。输出包含前端组件描述、后端接口设计、数据库表设计的完整技术文档。增强版包含智能路由推断、业务API接口推断、完整数据库表结构设计、... Skill: 别整乱七八糟的原型 Owner: jermyn-zmj Summary: 将产品原型转换为详细技术规范的技能。深度解析HTML原型，提取完整的菜单结构、筛选条件、表格列、操作按钮等信息。支持URL原型、本地HTML文件、图片原型、XMind文件四种输入类型。输出包含前端组件描述、后端接口设计、数据库表设计的完整技术文档。增强版包含智能路由推断、业务API接口推断、完整数据库表结构设计、... Tags: latest:2.3.3 Version history: v2.3.3 | 2026-05-18T10:30:00.234Z | user **Version 2.3.3 Changelog** - 新增 scripts/html_extractor/analyzer.py 核心模块。 - 补充并上线 scripts/html_extractor/ 包的各个 Python 字节码缓存（__pycache__）文件

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.1k

Updated

Oct 11, 2026

Version

2.3.3

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1.1K downloadsadoption · observed Oct 11, 2026
Latest release: 2.3.3release · observed May 18, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17amrmvhq1brb5t8e6n3ced2h85c1v1:bie-zheng-luan-prototype

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-jermyn-zmj-bie-zheng-luan-prototype/snapshot"

Documentation

CLAWHUB

149,280 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: bie-zheng-luan-prototype
description: "将产品原型转换为详细技术规范的技能。深度解析HTML原型，提取完整的菜单结构、筛选条件、表格列、操作按钮等信息。支持URL原型、本地HTML文件、图片原型、XMind文件四种输入类型。输出包含前端组件描述、后端接口设计、数据库表设计的完整技术文档。增强版包含智能路由推断、业务API接口推断、完整数据库表结构设计、实体关系图、状态枚举定义。新增交互式业务分析功能，可从原型推断业务流程、状态流转，生成问题让用户确认。"
---

# 别整乱七八糟原型分析技能 (bie-zheng-luan-prototype)

本技能将产品原型转换为详细的技术实现规范文档，**深度解析HTML结构**，提取完整的界面信息，并通过**交互式分析**推断业务流程。

## ✨ 核心能力

### 深度HTML解析
本技能可从HTML原型中完整提取：

| 提取内容 | 说明 | 输出格式 |
|---------|------|---------|
| **菜单结构** | 侧边栏菜单分组、菜单项、图标、页面标识 | 表格形式，含分组信息 |
| **筛选条件** | 字段名、类型（select/input）、下拉选项列表 | 表格形式，含完整选项 |
| **表格列** | 列名、数据类型推断（text/number/date/link等） | 表格形式 |
| **操作按钮** | 按钮名、分类（search/action/delete等）、样式、位置 | 表格形式 |
| **统计卡片** | 卡片标题、数值、说明 | 表格形式 |
| **页面视图** | 多页面识别，每个页面独立分析 | 按页面分章节输出 |
| **状态Tab** | 状态名称、数量、颜色类型 | 表格形式 |
| **抽屉/弹窗** | 标题、锚点导航、表单字段、统计信息 | 分章节输出 |

### 数据类型智能推断
表格列数据类型自动推断：
- `text` - 普通文本
- `number` - 数值（含逗号分隔）
- `date` - 日期格式（YYYY-MM-DD）
- `link` - 可点击链接/单号
- `badge` - 状态标签
- `progress` - 进度条
- `image` - 图片列
- `currency` - 金额（含¥符号）
- `percentage` - 百分比

### 交互式业务分析（v3.0 新增）
从HTML原型自动推断业务逻辑，生成问题让用户确认：

| 分析内容 | 说明 |
|---------|------|
| **页面角色推断** | 识别入口页面、处理页面、查看页面、配置页面 |
| **业务流程推断** | 基于菜单顺序、字段关联推断页面流转顺序 |
| **状态流转推断** | 从按钮操作和状态Tab推断状态值和流转规则 |
| **操作条件推断** | 推断操作是否需要勾选记录、特定状态等条件 |
| **生成确认问题** | 按优先级生成问题，让用户确认或修正推断 |

> ⚠️ **安全警告（重要）**
>
> 使用本技能前请阅读以下安全注意事项：
>
> 1. **内网URL需确认**：内网URL默认被阻止。如需分析内部原型，需使用 `--allow-internal` 参数确认风险。请勿分析不应被访问的内部系统。
>
> 2. **外部API默认禁用**：视觉增强分析功能需要设置 `ANTHROPIC_API_KEY` 环境变量才会启用。**默认情况下不调用外部API**，图片分析仅使用本地基础功能（颜色提取、布局推断）。启用外部API会将图片发送到Anthropic服务器，请确认图片不含敏感内容。
>
> 3. **手动安装依赖**：Shell脚本**不会自动安装Python依赖**。请在运行前手动执行：`pip install beautifulsoup4 pillow lxml`
>
> 4. **本地文件访问**：技能会读取您指定的本地文件。请确保文件路径指向预期内容。

## 🛡️ 已实施的安全措施

本技能实施了以下安全防护措施：

### 命令注入防护
- URL验证：只允许 `http://` 和 `https://` 协议
- 危险字符检测：阻止Shell特殊字符（`;|&$`'\"()<>`）
- 长度限制：URL最大2048字符

### SSRF防护（用户确认模式）
- **默认阻止内网URL**：检测私有网络地址自动拒绝
- **用户确认机制**：需使用 `--allow-internal` 参数才能访问内网
- 检测范围：`localhost`、`127.x`、`10.x`、`172.16-31.x`、`192.168.x`、`169.254.x`

### 外部API控制
- **默认禁用**：未设置 `ANTHROPIC_API_KEY` 时，不调用任何外部API
- **用户触发**：仅在用户主动设置环境变量后启用
- **数据传输明确**：启用后图片会通过base64发送到Anthropic

### 无自动安装
- Shell脚本**不执行** `pip install`
- 仅检查依赖并提示用户手动安装
- 避免运行时写入操作

### 路径安全验证
- 检测敏感路径关键词并发出警告
- 限制路径长度
- 验证文件存在性

## 🎯 技能用途

当产品经理提供以下任意形式的原型时，使用本技能：

1. **URL原型** - Figma、墨刀、Axure、蓝湖、内网分享链接等
2. **本地HTML文件** - 导出的HTML原型文件、本地保存的网页原型
3. **图片原型** - 设计稿截图、高保真原型图
4. **XMind文件** - 产品功能脑图、信息架构

**输出目标**：生成一份详细的技术规范文档，让大模型能据此生成相似度90%以上的系统。

## 🔧 当前版本能力（v3.1.0）

### ✅ 已支持
- **URL原型分析**：支持Figma、墨刀、Axure等主流工具的公开/内网URL
- **本地HTML文件分析**：支持本地导出的HTML原型文件，直接读取文件系统路径
- **网页内容解析**：提取DOM结构、样式信息、交互元素
- **图片原型分析**：支持PNG、JPG、JPEG、GIF、WebP、BMP等格式，提取颜色方案、布局区域，生成分析报告
- **XMind文件分析**：解析.xmind文件（zip格式），提取思维导图节点层级，推断功能模块、页面结构、功能点
- **交互式业务分析**：从原型推断业务流程，生成问题让用户确认，循环迭代直到理解完整业务逻辑
- **多UI框架适配**：自动检测并适配企业后台、标准后台、移动端H5等UI框架

## 📋 工作流程

### 第1步：原型内容解析
根据输入类型选择合适的解析方式：

#### A. URL原型解析
```bash
# 使用 web_fetch 获取页面内容
# 分析HTML结构，提取关键信息
```

**提取

README.md

# bie-zheng-luan-prototype (别整乱原型分析技能)

> **作者**: 杰哥 | **主页**: https://clawhub.ai/skills/bie-zheng-luan-prototype | **源码**: https://github.com/jermyn-zmj/bie-zheng-luan-prototype

将产品原型转换为详细技术规范的技能，支持4种输入类型：URL原型、本地HTML文件、图片原型、XMind文件。新增交互式业务分析功能，可从原型推断业务流程。

## 🎯 功能特性

### ✅ 支持的输入类型
1. **URL原型** - Figma、墨刀、Axure、蓝湖等设计工具的公开/内网链接
2. **本地HTML文件** - 导出的HTML原型文件、本地保存的网页原型
3. **图片原型** - 设计稿截图、高保真原型图（PNG/JPG/WebP等）
4. **XMind文件** - 产品功能脑图、信息架构图

### ✅ 核心能力
- **智能解析**：自动识别输入类型并选择相应解析方式
- **深度HTML解析**：提取菜单、筛选条件、表格列、操作按钮、状态Tab、抽屉面板等完整信息
- **多UI框架适配**：自动检测并适配企业后台、标准后台、移动端H5等UI框架
- **交互式业务分析**：从原型推断业务流程、状态流转，生成问题让用户确认
- **功能拆解**：将原型元素拆解为前端组件、后端接口、数据库设计
- **技术文档生成**：输出完整的技术规范文档
- **多格式支持**：HTML、图片、思维导图全面覆盖

## 📦 安装

### 通过OpenClaw安装
```bash
openclaw skills install https://clawhub.ai/skills/bie-zheng-luan-prototype
```

### 手动安装
```bash
# 克隆仓库
git clone https://github.com/[your-username]/bie-zheng-luan-prototype.git

# 复制到技能目录
cp -r bie-zheng-luan-prototype ~/.openclaw/workspace/skills/
```

## 🚀 使用方法

### 基本调用
当用户提供原型时，直接使用本技能：

```bash
# 分析URL原型
分析这个Figma原型：https://www.figma.com/file/xxx

# 分析本地HTML文件
分析这个HTML原型文件：/path/to/prototype.html

# 分析图片原型
分析这张设计稿截图：/path/to/design.png

# 分析XMind文件
分析这个产品脑图：/path/to/product.xmind
```

### HTML分析输出格式
```bash
# 标准分析报告（默认）
python scripts/html-extractor.py prototype.html markdown

# JSON格式数据
python scripts/html-extractor.py prototype.html json

# 交互式业务分析（包含流程推断和问题）
python scripts/html-extractor.py prototype.html interactive
```

### 输入类型自动识别
技能会根据输入内容自动判断解析方式：

| 输入内容 | 识别方式 | 解析方式 |
|---------|---------|---------|
| `https://...` 或 `http://...` | 以http/https开头 | URL原型解析 |
| `/path/to/file.html` | 文件路径，以.html结尾 | 本地HTML文件解析 |
| `<!DOCTYPE html>...` | 以HTML标签开头 | 直接解析粘贴的HTML内容 |
| `/path/to/file.png/.jpg/.jpeg/.gif/.webp/.bmp` | 图片格式文件路径 | 图片原型解析 |
| `/path/to/file.xmind` | .xmind后缀文件路径 | XMind文件解析 |

## 📋 输出文档

技能会生成包含以下内容的技术规范文档：

### 1. 系统概览
- 原型来源和类型
- 分析时间和版本
- 总体功能描述
- 技术栈建议

### 2. 页面结构分析
- 布局分解（头部、侧边栏、主内容区、底部）
- 功能模块清单
- 交互元素识别

### 3. 业务流程分析（交互式模式）
- 业务流程顺序（页面流转图）
- 每个页面的操作列表和执行条件
- 状态流转规则（状态机图）
- 关键字段和筛选维度
- 需要用户确认的问题清单

### 4. 前端实现方案
- 页面路由规划
- 组件清单（名称、props、状态、交互逻辑）
- 样式方案（CSS框架、设计系统）
- 交互细节

### 5. 后端实现方案
- API接口设计（路由、HTTP方法、参数、返回值）
- 业务逻辑伪代码
- 数据库表设计
- 第三方服务集成

### 6. 开发注意事项
- 技术栈建议
- 特殊依赖说明
- 性能和安全考虑
- 测试要点

## 🔧 内置工具

### 脚本文件及功能说明

| 脚本文件 | 功能 | 网络访问 | 文件操作 | 安全措施 |
|---------|------|---------|---------|---------|
| `url-prototype-analyzer.sh` | URL原型解析主脚本 | curl/wget下载公开URL | 读取HTML、写入输出文件 | URL验证、SSRF检测、命令注入防护 |
| `run_analysis.sh` | 本地HTML综合分析入口 | 无 | 读取本地HTML、写入输出文件 | 路径验证、敏感路径警告 |
| `html-extractor.py` | HTML内容深度提取 | 无 | 读取HTML文件 | 纯Python解析，无外部调用 |
| `html_extractor/analyzer.py` | 业务流程分析 | 无 | 无 | 纯Python分析 |
| `spec-generator.py` | 技术文档生成 | 无 | 写入输出文件 | 纯Python生成 |
| `image-prototype-analyzer.py` | 图片原型分析 | 仅在设置ANTHROPIC_API_KEY时调用Claude API | 读取图片文件 | 默认本地分析，外部API需手动启用 |
| `xmind-analyzer.py` | XMind文件分析 | 无 | 读取.xmind文件（zip解压） | 纯Python解析 |

**脚本详细行为说明：**

1. **url-prototype-analyzer.sh**

_meta.json

{
  "ownerId": "kn73wmmkp7pzethhh52mkcsb6n85c3h4",
  "slug": "bie-zheng-luan-prototype",
  "version": "2.3.3",
  "publishedAt": 1779100200234
}

references/api-design.md

# API设计规范参考

本文档提供RESTful API设计的标准规范，用于技术文档生成时的参考。

## 设计原则

### 1. RESTful原则
- **资源导向**：API围绕资源设计，而非操作
- **统一接口**：使用标准HTTP方法
- **无状态**：每个请求包含所有必要信息
- **可缓存**：适当使用缓存头
- **分层系统**：客户端不依赖直接连接
- **按需代码**：可选支持客户端代码扩展

### 2. 版本管理
- URL路径包含版本：`/api/v1/resource`
- 使用Accept头：`Accept: application/vnd.company.v1+json`
- **推荐**：URL路径版本控制，简单明确

### 3. 安全原则
- 所有API强制HTTPS
- 身份验证和授权分离
- 输入验证和输出过滤
- 速率限制和配额管理

## API结构规范

### 1. 资源命名
- 使用名词复数形式：`/users` 而非 `/user`
- 小写字母，单词间用连字符：`/user-roles`
- 避免动词：使用HTTP方法表示操作

### 2. HTTP方法使用
| 方法 | 用途 | 幂等性 | 安全性 |
|------|------|--------|--------|
| GET | 获取资源 | 是 | 是 |
| POST | 创建资源 | 否 | 否 |
| PUT | 全量更新资源 | 是 | 否 |
| PATCH | 部分更新资源 | 否 | 否 |
| DELETE | 删除资源 | 是 | 否 |

### 3. 端点设计示例
```
# 资源集合操作
GET    /api/v1/users          # 获取用户列表
POST   /api/v1/users          # 创建新用户

# 单个资源操作
GET    /api/v1/users/{id}     # 获取指定用户
PUT    /api/v1/users/{id}     # 全量更新用户
PATCH  /api/v1/users/{id}     # 部分更新用户
DELETE /api/v1/users/{id}     # 删除用户

# 子资源操作
GET    /api/v1/users/{id}/orders      # 获取用户的订单
POST   /api/v1/users/{id}/orders      # 为用户创建订单
GET    /api/v1/users/{id}/orders/{orderId}  # 获取用户特定订单
```

## 请求与响应规范

### 1. 请求头标准
```http
# 必需头
Content-Type: application/json
Authorization: Bearer {token}
Accept: application/json

# 推荐头
X-Request-ID: {uuid}          # 请求跟踪
X-Client-Version: 1.0.0       # 客户端版本
X-Device-Info: {device_info}  # 设备信息
```

### 2. 请求参数类型
| 参数位置 | 用途 | 示例 |
|----------|------|------|
| 路径参数 | 资源标识 | `/users/{id}` |
| 查询参数 | 筛选、排序、分页 | `?page=1&size=10` |
| 请求体 | 创建/更新数据 | JSON对象 |
| 请求头 | 元数据、认证 | `Authorization` |

### 3. 响应格式标准

#### 成功响应 (HTTP 2xx)
```json
{
  "code": 200,
  "message": "success",
  "data": {
    // 业务数据
  },
  "meta": {
    // 分页、时间戳等元数据
  }
}
```

#### 分页响应
```json
{
  "code": 200,
  "message": "success",
  "data": {
    "items": [...],        // 当前页数据
    "total": 100,          // 总记录数
    "page": 1,             // 当前页码
    "size": 10,            // 每页大小
    "pages": 10            // 总页数
  }
}
```

#### 错误响应 (HTTP 4xx/5xx)
```json
{
  "code": 400,
  "message": "参数验证失败",
  "errors": [
    {
      "field": "username",
      "code": "REQUIRED",
      "message": "用户名不能为空"
    },
    {
      "field": "email",
      "code": "INVALID_FORMAT",
      "message": "邮箱格式不正确"
    }
  ],
  "request_id": "req_123456",
  "timestamp": "2026-04-21T10:00:00Z"
}
```

### 4. HTTP状态码使用
| 状态码 | 含义 | 使用场景 |
|--------|------|----------|
| 200 | OK | 成功获取或更新资源 |
| 201 | Created | 资源创建成功 |
| 204 | No Content | 成功但无返回内容 |
| 400 | Bad Request | 请求参数错误 |
| 401 | Unauthorized | 未认证或认证失败 |
| 403 | Forbidden | 无访问权限 |
| 404 | Not Found | 资源不存在 |
| 409 | Conflict | 资源冲突（如重复创建） |
| 422 | Unprocessable Entity | 业务逻辑验证失败 |
| 429 | Too Many Requests | 请求过于频繁 |
| 500 | Internal Server Error | 服务器内部错误 |
| 503 | Service Unavailable | 服务暂时不可用 |

## 分页、排序和筛选

### 1. 分页参数
```http

references/component-catalog.md

# 前端组件目录参考

本文档提供前端组件的标准描述格式和常见组件模式，用于技术文档生成时的参考。

## 组件描述标准格式

### 1. 基础信息
```markdown
**组件名**: [组件名称]
**位置**: [在页面中的位置]
**功能**: [简要描述组件功能]
```

### 2. Props接口
```javascript
interface ComponentProps {
  // 数据相关
  data?: any;           // 组件显示的数据
  loading?: boolean;    // 加载状态
  
  // 交互回调
  onClick?: () => void;     // 点击事件
  onChange?: (value) => void; // 值变化事件
  onSubmit?: (data) => void; // 提交事件
  
  // 样式控制
  className?: string;   // 自定义样式类
  style?: React.CSSProperties; // 内联样式
  
  // 配置选项
  options?: any[];      // 下拉选项等配置
  disabled?: boolean;   // 是否禁用
  required?: boolean;   // 是否必填
  
  // 子内容
  children?: React.ReactNode;
}
```

### 3. 状态管理
```javascript
interface ComponentState {
  // 数据状态
  selectedItems: any[];     // 选中的项
  currentPage: number;      // 当前页码
  
  // UI状态
  isOpen: boolean;         // 是否展开/打开
  isLoading: boolean;      // 加载状态
  error: string | null;    // 错误信息
  
  // 表单状态
  formData: object;        // 表单数据
  validationErrors: object; // 验证错误
}
```

### 4. 交互逻辑
```markdown
- **初始化**: 组件挂载时执行的操作
- **用户交互**: 用户操作触发的行为
- **数据变化**: props变化时的响应
- **清理**: 组件卸载时的清理操作
```

## 常见组件模式

### 1. 数据展示组件

#### 表格组件 (DataTable)
```markdown
**组件名**: DataTable
**功能**: 展示结构化数据，支持排序、筛选、分页

**Props**:
- `columns`: Column[] - 列配置
- `dataSource`: any[] - 数据源
- `pagination`: Pagination - 分页配置
- `rowKey`: string - 行唯一键
- `onRowClick`: (record) => void - 行点击事件

**交互逻辑**:
1. 表头点击切换排序
2. 筛选器输入实时过滤
3. 分页器切换页面
4. 行选择/取消选择
```

#### 卡片组件 (Card)
```markdown
**组件名**: Card
**功能**: 信息卡片容器，支持标题、内容、操作区

**Props**:
- `title`: string | ReactNode - 卡片标题
- `extra`: ReactNode - 额外内容（通常为操作按钮）
- `cover`: ReactNode - 封面图片
- `actions`: ReactNode[] - 底部操作按钮

**样式特点**:
- 阴影效果增强层次感
- 圆角边框
- 悬停效果（可选）
```

### 2. 表单组件

#### 输入框 (Input)
```markdown
**组件名**: Input
**功能**: 文本输入控件

**Props**:
- `type`: 'text' | 'password' | 'email' | 'number' - 输入类型
- `placeholder`: string - 占位文本
- `value`: string - 当前值
- `onChange`: (e) => void - 值变化事件
- `prefix`: ReactNode - 前缀图标
- `suffix`: ReactNode - 后缀图标
- `allowClear`: boolean - 是否显示清除按钮

**验证规则**:
- 必填验证
- 格式验证（邮箱、手机号等）
- 长度限制
```

#### 下拉选择 (Select)
```markdown
**组件名**: Select
**功能**: 下拉选择控件

**Props**:
- `options`: Option[] - 选项列表
- `value`: string | string[] - 当前值
- `onChange`: (value) => void - 值变化事件
- `mode`: 'single' | 'multiple' - 单选/多选模式
- `placeholder`: string - 占位文本
- `loading`: boolean - 加载状态

**交互逻辑**:
1. 点击触发下拉菜单
2. 搜索框输入过滤选项
3. 选项点击选中
4. 多选模式下标签展示
```

### 3. 布局组件

#### 栅格布局 (Grid)
```markdown
**组件名**: Grid
**功能**: 响应式栅格布局系统

**Props**:
- `cols`: number - 列数（默认24）
- `gutter`: number | [number, number] - 栅格间距
- `span`: number - 栅格占位格数
- `offset`: number - 栅格左侧偏移格数

**响应式规则**:
- xs (<576px): 1-4列
- sm (≥576px): 1-8列  
- md (≥768px): 1-12列
- lg (≥992px): 1-16列
- xl (≥1200px): 1-24列
```

#### 布局容器 (Layout)
```markdown
**组件名**: Layout
**功能**: 页面整体布局

Github ReposUpdated 1d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.