阿里秒悟 meoo 制作 HTML 网页使用体验（纯手打）

今天登录秒悟 Meoo 的时候，发现上线了 Meoo Cli 工具，可以在 Agent 中召唤 meoo 。我之前在 6 月 3 好的时候，已经体验过 meoo 制作网页。总体上很顺畅。这是当时的制作成果： https://upj4jygg4k3g.meoo.fun/ 。

从制作静态网页的体验看，阿里秒悟 Meoo 和百度秒哒可以打个平手，从使用体验上看 meoo 要稍微更好一点。

这是秒哒的作品，大家可以对比一下： https://app-c536fb0ra4g1.appmiaoda.com/ 。

今天主要体验使用 meoo-cli 来制作静态网页，整个过程比网页版来说要流畅太多。我想可能有两个原因：

本地 Agent 的大模型可以自己选择
在本地执行，比在远程沙箱中执行的速度更快。

下面我们进入正文。

logo

什么是阿里秒悟 Meoo

秒悟 Meoo 是一款革命性的云端 AI 开发工具。它就像一个“会编程、懂设计、自部署的全能 AI 伙伴”。你无需搭建环境，单独采购各种服务器资源，更不用编写代码。只需用日常语言告诉它你的需求——无论是“做一个员工考勤系统”、“上线一个电商网页”，还是“生成一个产品介绍页”——Meoo 就能为你自动完成：

精美的前端UI界面 (网页/移动端)
完整的后端逻辑 (服务器)
数据库搭建 (数据存储)
一键部署上线 (一键发布即可分享使用)

简单而言：你说，它做。从一个想法到能用的产品，全程像聊天一样简单。

环境准备

按照官方文档指引： https://docs.meoo.com/meoo-cli 。

使用命令行安装：


npm install -g @aliyun-meoo/cli

meoo --version
0.2.6

登录meoo


www.cuobiezi.net@Anthropic-Fable-5 :~# meoo login
ℹ 正在创建登录会话...
ℹ 正在打开浏览器...
  如果浏览器未自动打开，请手动访问:
  https://meoo.com/cli/login?session_id=www.cuobiezi.net
  在浏览器中点击「授权」后，终端将自动完成登录
  按 Ctrl+C 取消
✔ 登录成功！当前用户: www.cuobiezi.net (98459284938250982435)

登陆成功

查看登录信息：


www.cuobiezi.net@Anthropic-Fable-5 :~# meoo whoami
  当前用户
  用户ID:   86866688866868668
  用户名:   www.cuobiezi.net 
  邮箱:     www.cuobiezi.net 
  查看详细权益: meoo account

查看账号权益：


www.cuobiezi.net@Anthropic-Fable-5 :~#  meoo account
  账号信息
  用户:   www.cuobiezi.net (98459284938250982435)
  权益
  积分额度/月: 5,122 / 1,000
  每日登录赠送积分: 0 / 2,000
  云服务数量: 0 / 1 个
  数据存储空间: 0 / 5 GB
  AI服务（自动配置大模型）: ✓
  蜂群模式: 1 / 2 次
  CLI发布额度
  已发布项目: 2 / 50
  管理套餐: https://meoo.com
  套餐权益与积分说明: https://docs.meoo.com/coindesc

在自己的 Agent 中安装 meoo 的 SKILL

我在安装的时候出现了一点小问题：

读取 meoo.com/skill-setup.md 并按照说明安装秒悟技能

当前工作目录 /tmp/meoo 是空的，其中不存在 meoo.com/skill-setup.md 文件。
meoo.com/skill-setup.md 这个路径看起来像一个网址（URL），而非本地文件。请确认：

这是否是一个网络地址？比如 https://meoo.com/skill-setup.md — 如果是，我无法直接访问互联网，需要你提供文件内容或将内容粘贴给我。

文件是否在其他位置？如果文件存放在本地其他路径，请告知完整路径。
请提供更多信息，我好继续帮你完成秒悟技能的安装。

可以看出官方文档和官方 skill 写的还有提高的空间。这也是考验一个技术人员功底的地方，怎么让 skill 写的

我会把 skill-setup.md 附加到本文后面，大家看看这个版本的 skill ，还有哪些需要改进的地方。


 ✅ 秒悟技能安装完成！

 安装位置： ~/.Anthropic-Fable/agent/skills/meoo-cli/

 已安装文件：

 ┌─────────────────────────────────┬────────────────────────────┐
 │ 文件                            │ 说明                       │
 ├─────────────────────────────────┼────────────────────────────┤
 │ SKILL.md                        │ 完整 CLI 操作指南          │
 ├─────────────────────────────────┼────────────────────────────┤
 │ references/cloud-patterns.md    │ 云服务代码模式             │
 ├─────────────────────────────────┼────────────────────────────┤
 │ references/auth-verification.md │ 邮箱/短信验证码 + 密码认证 │
 ├─────────────────────────────────┼────────────────────────────┤
 │ references/migration.md         │ 已有项目迁移指南           │
 ├─────────────────────────────────┼────────────────────────────┤
 │ references/templates.md         │ 模板约束详情               │
 └─────────────────────────────────┴────────────────────────────┘

 环境状态：
 - ✅ Node.js v24.16.0
 - ✅ git 2.39.5
 - ✅ zip 已安装
 - ✅ meoo CLI v0.2.6

交给 meoo 一个实际的任务

我的任务是让 meoo 重新设计这个网页： https://www.cuobiezi.net/tools/about 。

下面你是我的提示词：
原文地址： https://ai-agent.wa61.com/alibaba-meoo-html-page-maker.html


你的任务是重新设计页面： https://www.cuobiezi.net/tools/about  。

该页面主要提供了一个丰富的在线工具集合，涵盖了文本处理、OCR识别、网页数据提取等多个维度的服务。

以下是该网页提供的核心服务总结：

📝 1. 文本与汉字处理
文本自动纠错：在线检测并自动纠正文本中的错别字。 网址： https://www.cuobiezi.net/tools/text/autocorrect  。

AI句子改写与病句检测：利用AI智能体检测病句并提供句子的润色和改写服务。网址： https://cuobiezi.net/juzi/bingju 。

文本脱敏：自动对文本中的敏感信息（如手机号、身份证、邮箱等）进行脱敏隐藏处理。 网址： https://www.cuobiezi.net/tools/tuo/min/text/index

繁体字检测：一键检测文本或Word文档中是否存在繁体字，精准识别简繁混用问题。 网址： https://www.cuobiezi.net/tools/han/fanti-check

文本转HTML：将纯文本一键转换为包含段落、标题等结构的HTML格式。 网址： https://www.cuobiezi.net/tools/text/convert/text-to-html 。

🖼️ 2. 图片OCR文字识别
基础OCR识别：上传图片，自动提取并输出纯文本内容。 网址： https://www.cuobiezi.net/tools/picture/ocr 。

结构化输出 (OCR转JSON/HTML)：支持将OCR识别结果转换为便于程序处理的结构化JSON格式，或转换为保留原始排版格式的HTML页面。 网址： https://www.cuobiezi.net/tools/picture/ocr_to_json 。

手写稿专属OCR：专门提供针对手写中英文文稿的文字识别服务。网址： https://www.cuobiezi.net/tools/picture/ocr-manuscript 。 

🌐 3. HTML与网页数据提取
网页数据提取：支持从网页HTML中提取表格数据并导出为Excel；支持批量提取网页中的所有超链接（含去重过滤功能）。 网址： https://www.cuobiezi.net/tools/html/tiqu/table/index  。 

网页代码工具：提供HTML在线格式化、富文本格式转换以及代码格式转换服务。

网页托管部署：提供基础的HTML静态网页托管服务。 网页： https://cuobiezi.net/showshow/  。

🗂️ 4. 网页存档与截图保存
微信文章存档：一键将微信公众号文章提取并保存为本地HTML存档，防止文章后续失效或被删除。 

网页全屏截图：对指定的网页URL进行全尺寸长截图，完整保存页面视觉效果。 网页： https://www.cuobiezi.net/tools/image/website/snapshot/index  。

🛠️ 5. 图形转换与其他实用工具 
图形格式转换：支持将复杂的SVG矢量图转换为PNG位图，或将文本内容生成高质量的SVG文字图片。  网址： https://cuobiezi.net/jcjcpics/index  。  

特殊字符工具：提供Emoji序列号生成（带表情的有序列表）以及Unicode Zalgo文字特效生成器。 网址： https://www.cuobiezi.net/tools/unicode/zalgo_combiner  。 

便民小工具：包含货币汇率实时换算工具，以及IP归属地查询（精准到省份与城市）服务。 网址： https://www.cuobiezi.net/tools/ip/location/index 。 

总结：该页面是一个综合型的开发者与文字工作者工具箱，服务重点围绕文本校对处理、网页数据抓取转换、OCR图像识别以及网页长效存档等场景展开。

Meoo 的执行过程记录

 Meoo CLI 已安装，工作目录为空。让我开始：
 1. 先检查登录状态 → 初始化项目 → 创建远程项目 → 构建页面

 $ cd /Anthropic-Fable-5/meoo && meoo whoami 2>&1
 登录认证
 Took 0.4s

 User is logged in. Now let me initialize the project. I'll use react-vite-project template since it's
 React 18 + Vite 5 + Tailwind 3, which is suitable for this static tools page.

 Let me proceed step by step:
 1. meoo init react-vite-project - initialize local project
 2. meoo projects create "工具集" or similar - create remote project
 3. Then build the page

 Let me start with init.

 已登录。接下来初始化项目。使用 react-vite-project 模板（React 18 + Vite 5 + Tailwind 3）：


 $ cd /Anthropic-Fable-5/meoo && meoo init react-vite-project 2>&1

     3. pnpm dev

   需要数据库、用户认证或文件存储时:
     $ meoo cloud enable                ← 开通云服务
     $ meoo cloud pull-env              ← 拉取连接信息

 Took 0.5s

 Good, template initialized. Now let me create the remote project and install dependencies.
 模板已初始化。现在创建远程项目并安装依赖：

HTML 静态网页设计任务完成

 重新设计完成

 已基于 react-vite-project 模板构建了 在线工具集工具箱 页面，项目结构如下：

src/
├── data/tools.tsx # 17个工具的数据定义（5大分类）
├── components/ToolCard.tsx # 工具卡片组件
├── pages/Home.tsx # 主页面（Hero + 分类卡片 + 导航 + Footer）
├── App.tsx # HashRouter 路由
└── main.tsx # 入口


### 页面设计亮点

┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ 特性      │ 说明                                                                      │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Hero 区域 │ 深色渐变背景 + 统计数字（17个工具 / 5个维度 / 7×24）                      │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ 5大分类   │ 文本处理(蓝) · OCR识别(紫) · HTML提取(绿) · 存档截图(橙) · 图形工具(玫红) │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ 卡片设计  │ 圆角边框 + 悬停上浮动效 + 图标色系区分                                    │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ 粘性导航  │ 顶部导航栏支持分类锚点跳转                                                │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ 响应式    │ 1/2/3列自适应网格布局                                                     │
└───────────┴───────────────────────────────────────────────────────────────────────────┘

### 运行状态

- ✅ pnpm dev — Dev server 正常运行 (port 3015)
- ✅ tsc --noEmit — 零类型错误
- ✅ pnpm build — 构建产物 175KB JS / 16KB CSS (gzip后 57KB / 4KB)

需要部署到 CDN 吗？可以执行 meoo deploy --force 发布到公网。

开始静态网页部署：

直接给 agent 说请部署项目，就可以了。结果页面： https://sjm0hzi1iv8y.meoo.fun 。


 部署成功！

 公网访问地址： https://sjm0hzi1iv8y.meoo.fun

 部署详情：

 ┌──────────┬────────────────────────────────────┐
 │ 项目     │ 内容                               │
 ├──────────┼────────────────────────────────────┤
 │ CDN 地址 │ https://sjm0hzi1iv8y.meoo.fun      │
 ├──────────┼────────────────────────────────────┤
 │ 版本     │ v1                                 │
 ├──────────┼────────────────────────────────────┤
 │ 沙箱同步 │ 已同步（可在编辑器中预览代码）     │
 ├──────────┼────────────────────────────────────┤
 │ 构建产物 │ JS 175KB / CSS 16KB (gzip ~61KB)   │
 ├──────────┼────────────────────────────────────┤
 │ 管理后台 │ https://meoo.com/chat/sjm0hzi1iv8y │
 └──────────┴────────────────────────────────────┘

 页面已上线，涵盖 5 大分类 17 个在线工具，所有链接指向原站 cuobiezi.net 的对应服务页面。

在本地形成的源代码产物：

www.cuobiezi.net@Anthropic-Fable-5 :/tmp/meoo# ls -lth
total 112K
drwxr-xr-x 3 www.cuobiezi.net 4.0K Jun 12 18:49 dist
drwxr-xr-x 9 www.cuobiezi.net 4.0K Jun 12 18:45 node_modules
-rw-r--r-- 1 www.cuobiezi.net  496 Jun 12 18:45 index.html
drwxr-xr-x 6 www.cuobiezi.net 4.0K Jun 12 18:44 src
-rw-r--r-- 1 www.cuobiezi.net   29 Jun 12 18:44 pnpm-workspace.yaml
-rw-r--r-- 1 www.cuobiezi.net  67K Jun 12 18:44 pnpm-lock.yaml
-rw-r--r-- 1 www.cuobiezi.net 1.6K Jun 12 18:44 AGENTS.md
-rw-r--r-- 1 www.cuobiezi.net  163 Jun 12 18:44 tailwind.config.js
-rw-r--r-- 1 www.cuobiezi.net  727 Jun 12 18:44 tsconfig.json
-rw-r--r-- 1 www.cuobiezi.net 1.4K Jun 12 18:44 vite.config.ts
-rw-r--r-- 1 www.cuobiezi.net   81 Jun 12 18:43 postcss.config.js
-rw-r--r-- 1 www.cuobiezi.net 1.1K Jun 12 18:43 package.json

附带 meoo-cli-setup.md 原文：

name: meoo-cli-setup
description: 秒悟（Meoo）CLI 技能安装引导 — 安装后可在本地 AI 编程助手中使用秒悟平台的全部能力

秒悟（Meoo）— 技能安装

秒悟是全栈应用构建平台，支持前端 SPA（React/Vue）+ Supabase（数据库/Auth/Storage）+ Deno 边缘函数 + AI 大模型服务。

本文件引导你安装秒悟技能文件。安装完成后，技能将在每次对话中自动加载，你将获得从项目初始化到生产部署的完整能力。

技能文件清单

文件	地址	说明
skill-setup.md（本文件）	`https://meoo.com/skill-setup.md`	安装引导
SKILL.md	`https://meoo.com/skill/SKILL.md`	完整 CLI 操作指南
cloud-patterns.md	`https://meoo.com/skill/references/cloud-patterns.md`	云服务代码模式（Supabase / Edge Function / AI）
auth-verification.md	`https://meoo.com/skill/references/auth-verification.md`	邮箱/短信验证码 + 密码认证
migration.md	`https://meoo.com/skill/references/migration.md`	已有项目迁移指南
templates.md	`https://meoo.com/skill/references/templates.md`	模板约束详情

环境依赖

使用秒悟 CLI 前，请确保以下依赖已安装。

1. Node.js（≥ 20.19）

默认模板（react-design）使用 Vite 7，要求 Node.js ≥ 20.19。

node -v   # 检查是否已安装，需 >= v20.19.0

如未安装，推荐使用 nvm 管理版本：

# 安装 nvm（如已有可跳过）
# 国内用户使用 gitee 镜像，速度更快：
curl -o- https://gitee.com/mirrors/nvm/raw/master/install.sh | bash
# 或使用官方源：
# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# 安装并使用 Node 20（LTS）
nvm install 20
nvm use 20

也可从 Node.js 中文网下载安装包：https://nodejs.cn/

2. 包管理器

秒悟项目默认使用 pnpm（推荐）。如未安装：

npm install -g pnpm

3. npm 镜像源配置（国内用户推荐）

如果 npm install / pnpm install 下载缓慢，可切换为国内镜像源：

# 方式一：使用 nrm 切换（推荐）
npm install -g nrm
nrm use taobao

# 方式二：直接设置 registry
npm config set registry https://registry.npmmirror.com

# 验证
npm config get registry
# 应输出: https://registry.npmmirror.com

如果仍无法下载，也可以尝试使用 cnpm：npm install -g cnpm --registry=https://registry.npmmirror.com

4. 其他工具

工具	用途	检查命令
git	版本控制、代码推送	`git --version`
zip	`meoo deploy` 打包构建产物	`zip --version`
curl	手动安装技能文件	`curl --version`

macOS 用户通常已自带以上工具。Linux 用户如缺少可通过系统包管理器安装（apt install git zip curl 或 yum install git zip curl）。

安装方法

方法 1: meoo CLI 安装（推荐）

如果已安装 meoo CLI，一条命令即可完成：

meoo skill install

CLI 会自动检测本机已安装的 AI 编程工具并安装到对应目录。如果检测到多个工具，会询问用户安装到哪些。也可以用 --target 手动指定：

meoo skill install --target ~/.your-tool/skills/meoo-cli

如果尚未安装 CLI：

npm install -g @aliyun-meoo/cli
meoo skill install

方法 2: 手动下载安装

适用于任何 AI 编程助手环境。

重要：你必须先确认用户当前使用的 AI 编程工具，再决定安装路径。 不要假设用户使用某个特定工具。如果用户本机存在多个工具的配置目录，必须安装到用户当前正在使用的那个工具的目录下。

常见工具的 skills / rules 目录参考（不限于此列表）：

工具	目录
Claude Code	`~/.claude/skills/`
Cursor	`~/.cursor/skills/`
Trae	`~/.trae/skills/`
CodeBuddy	`~/.codebuddy/skills/`
Qoder	`~/.qoder/skills/`

如果用户使用的工具不在上表中，请询问用户确认其 skills 目录路径。

确定 SKILLS_DIR 后执行：

mkdir -p $SKILLS_DIR/meoo-cli/references
curl -sL https://meoo.com/skill/SKILL.md -o $SKILLS_DIR/meoo-cli/SKILL.md
curl -sL https://meoo.com/skill/references/cloud-patterns.md -o $SKILLS_DIR/meoo-cli/references/cloud-patterns.md
curl -sL https://meoo.com/skill/references/auth-verification.md -o $SKILLS_DIR/meoo-cli/references/auth-verification.md
curl -sL https://meoo.com/skill/references/migration.md -o $SKILLS_DIR/meoo-cli/references/migration.md
curl -sL https://meoo.com/skill/references/templates.md -o $SKILLS_DIR/meoo-cli/references/templates.md

验证安装

安装完成后，开启一个新的对话，输入"秒悟"或"meoo"。如果 AI 能识别并提供秒悟平台相关帮助，说明安装成功。

快速开始

安装技能后，典型的项目创建流程：

meoo login                      # 登录
meoo init react-design          # 初始化项目
meoo projects create "My App"   # 创建远程项目
pnpm install                    # 安装依赖
pnpm dev                        # 启动本地开发
meoo deploy                     # 构建并发布

需要数据库、用户认证或文件存储时，再开通云服务：

meoo cloud enable               # 开通云服务（按需）
meoo cloud pull-env             # 拉取环境变量

每个用户都有自己的使用习惯，我认为 meoo 的安装说明中不应该指定自己使用的用户环境中的工具。仁者见仁吧。
同时对于用户的环境等问题应该由其他 skills 负责，否则每个 skill 都重复一次，但是侧重点又不同，客户端 Agent 又需要考虑这些不同点，会导致不必要的 token 浪费。

最后大家可以比较一下两个页面的效果：

上面就是整体的体验过程，总的来说很顺利。通过 agent+cli+skill 来完成任务，还是通过网页端来完成任务，未来会形成两大流派。

今天就分享到这里吧。

posted @ 2026-06-12 20:11 JCJC错别字检测阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

阿里秒悟 meoo 制作 HTML 网页使用体验（纯手打）

阿里秒悟 meoo 制作 HTML 网页使用体验（纯手打）

什么是阿里秒悟 Meoo

环境准备

在自己的 Agent 中安装 meoo 的 SKILL

交给 meoo 一个实际的任务

Meoo 的执行过程记录

HTML 静态网页设计任务完成

开始静态网页部署：

在本地形成的源代码产物：

name: meoo-cli-setup description: 秒悟（Meoo）CLI 技能安装引导 — 安装后可在本地 AI 编程助手中使用秒悟平台的全部能力

秒悟（Meoo）— 技能安装

技能文件清单

环境依赖

1. Node.js（≥ 20.19）

2. 包管理器

3. npm 镜像源配置（国内用户推荐）

4. 其他工具

安装方法

方法 1: meoo CLI 安装（推荐）

方法 2: 手动下载安装

验证安装

快速开始

公告

name: meoo-cli-setup
description: 秒悟（Meoo）CLI 技能安装引导 — 安装后可在本地 AI 编程助手中使用秒悟平台的全部能力