360 Secure SkillHub
360 安全技能中心

Mockplus Reader

该 Skill 通过浏览器工具打开 MockPlus 设计页面链接并获取页面快照,再整理项目名称、页面结构、组件树、交互说明与评论等设计信息,按固定格式输出。使用需要网络访问,页面可能需登录才能查看完整内容;Skill 未提供自动解析脚本,正文还提到基于链接生成的 uni-app + Vue3 本地项目及其运行命令。

a-din
a-din
热度 79.18
最近更新 2026-05-11 17:34:28
分类:效率依赖:联网浏览搜索 / 代码执行 / 读写文件应用场景:UI 原型 / 工作流 / 摘要总结

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add mockplus-reader
Metadata
name
mockplus-reader
description
读取和分析 MockPlus 在线设计页面。用于:(1)打开并解析 MockPlus 网页链接,(2)提取页面中的设计信息、结构、组件,(3)分析原型稿内容和交互说明。当用户发送 MockPlus 链接或要求分析原型稿时使用此技能。
version
1.0.0
author
虾皮

MockPlus Reader

读取和分析 MockPlus 在线设计页面。

使用方法

1. 打开 MockPlus 链接

使用 browser 工具打开 MockPlus 网页链接:

browser action=open url="<MockPlus链接>"

2. 获取页面快照

打开后获取页面内容:

browser action=snapshot targetId="<targetId>"

3. 分析内容

MockPlus 页面通常包含:

  • 项目名称 - 页面标题
  • 设计稿缩略图 - 右侧面板的项目截图
  • 组件树 - 左侧面板的页面结构
  • 交互说明 - 组件的交互描述(点击、跳转等)
  • 评论区 - 用户的反馈和评论

4. 常见 MockPlus 域名

  • https://www.mockplus.com/
  • https:// MockPlus.cn
  • https://rp.mockplus.com/

输出格式

解析后按以下格式整理信息:

## 项目信息
- 项目名称:
- 更新时间:

## 页面结构
(列出主要页面和组件)

## 交互说明
(提取关键交互流程)

## 备注
(其他重要信息)

已实现项目

基于 MockPlus 链接已生成 uni-app + Vue3 项目:

项目路径: C:\Users\Ding\.openclaw\workspace\lutixia\

已实现页面:

  • pages/index/index.vue - 开屏页
  • pages/library/library.vue - 题库首页
  • pages/practice/practice.vue - 练习页
  • pages/exam/exam.vue - AI模考页
  • pages/profile/profile.vue - 用户中心
  • pages/login/login.vue - 登录注册页

运行方式:

cd lutixia
npm install -g @dcloudio/uni-cli
npm install
npm run dev:%PLATFORM%

注意事项

  • MockPlus 页面可能需要登录才能查看完整内容
  • 某些项目链接可能有访问权限限制
  • 移动端原型可能无法完全展示交互效果