sophhub 0.4.19 → 0.4.21

package/skills/website-builder/src/SKILL.md

@@ -1,266 +1,266 @@
----
-name: website-builder
-description: >
-  一键建站助手：根据用户需求生成完整网站（HTML/CSS/JS），自动部署到 moltbot 内置静态托管，
-  立即给出可公开访问的链接（http://<host>:18789/canvas/<site-name>/）。
-  支持：上传截图/UI图进行像素级复刻、多轮自然语言修改、响应式设计、多页面网站。
-  触发场景：用户说"帮我做一个网站"、"做一个landing page"、"做一个作品集"、"复刻这个界面"、
-  "帮我建一个xxx网站"等。
-metadata: { "openclaw": { "emoji": "🌐", "requires": { "bins": ["node"] } } }
----
-
-## 加载时说明
-
-当用户启用此 skill 时，发送以下欢迎语：
-
-> 🌐 **建站助手已就绪！**
->
-> 我可以帮你：
->
-> - 用一句话描述需求，自动生成并部署网站
-> - 上传截图 / UI 图，像素级复刻
-> - 多轮对话实时修改，所见即所得
->
-> 生成后你会收到一个可直接访问的链接，无需额外配置。
->
-> 你想做什么样的网站？
-
----
-
-# 建站助手 (Website Builder)
-
-根据需求生成完整网站，部署到 moltbot gateway 的 `/canvas/` 静态路由，立即可访问。
-
----
-
-## 一、访问路径说明
-
-网站文件存放在：
-
-```
-<workspace>/canvas/<site-name>/index.html
-```
-
-访问地址：
-
-```
-http://<moltbot-host>:18789/canvas/<site-name>/
-```
-
-其中 `<moltbot-host>` 是运行 moltbot 的服务器 IP 或域名（如 `192.168.1.100`）。
-
----
-
-## 二、工作流程
-
-### Step 1：理解需求，输出确认卡片
-
-收到建站需求后，先展示理解摘要让用户确认，**不要直接开始写代码**：
-
-```
-🌐 建站方案确认
-
-- 网站类型：个人作品集
-- 风格：极简黑白
-- 页面：首页、作品、关于、联系
-- 技术栈：纯 HTML + CSS + JS（无需构建）
-- 站点名称（URL路径）：portfolio
-- 访问地址：http://<your-ip>:18789/canvas/portfolio/
-
-确认开始生成？
-```
-
-### Step 2：生成网站文件
-
-用户确认后，调用部署脚本：
-
-```bash
-bash /app/skills/website-builder/scripts/deploy_site.sh \
-  --name "<site-name>" \
-  --workspace "<workspace-dir>"
-```
-
-脚本负责：
-
-1. 创建 `<workspace>/canvas/<site-name>/` 目录
-2. Agent 将生成的 HTML/CSS/JS 文件写入该目录
-3. 输出访问链接
-
-#### 生成代码的要求
-
-- **单文件优先**：能写在一个 `index.html` 里就不拆分（内联 CSS + JS），更易修改
-- **多页面**：每个页面一个 HTML 文件（`about.html`、`works.html` 等），共享一个 `style.css`
-- **响应式**：必须适配手机和桌面
-- **无外部依赖**：不引用 CDN，所有样式和脚本内联或本地，确保离线可用
-- **现代设计**：使用 CSS Grid / Flexbox，避免过时的表格布局
-
-### Step 3：写入文件
-
-使用 exec 工具直接写文件到 canvas 目录：
-
-```python
-# 写入 index.html
-with open('<workspace>/canvas/<site-name>/index.html', 'w') as f:
-    f.write('''...生成的HTML内容...''')
-```
-
-### Step 4：输出访问链接
-
-```
-✅ 网站已部署！
-
-🔗 访问链接：http://<your-ip>:18789/canvas/<site-name>/
-
-📁 文件位置：<workspace>/canvas/<site-name>/
-   ├── index.html
-   ├── about.html（如有）
-   └── style.css（如有）
-
-需要修改？直接告诉我（如"把导航栏改成深色"、"加一个联系表单"）。
-```
-
----
-
-## 三、获取 moltbot 访问地址
-
-Agent 需要告知用户正确的访问地址。通过以下方式获取 host：
-
-```bash
-# 获取容器内可用的网络地址
-hostname -I 2>/dev/null | awk '{print $1}'
-```
-
-或直接提示用户：
-
-> 请将 `<your-ip>` 替换为你访问 moltbot 的 IP 地址（就是你打开 moltbot 界面时用的那个 IP）。
-
----
-
-## 四、部署脚本
-
-```bash
-bash /app/skills/website-builder/scripts/deploy_site.sh --name <site-name> --workspace <workspace-dir>
-```
-
-脚本仅负责创建目录，文件由 agent 用 exec 写入。
-
----
-
-## 五、多轮修改流程
-
-用户发出修改指令后：
-
-1. 读取现有文件：`cat <workspace>/canvas/<site-name>/index.html`
-2. 按需修改代码
-3. 重新写入文件
-4. 告知用户刷新浏览器即可看到效果（支持 live reload 如已开启）
-
-**常见修改示例：**
-
-| 用户说                 | Agent 动作                         |
-| ---------------------- | ---------------------------------- |
-| "把导航栏改成深色背景" | 修改 CSS `.navbar` 背景色          |
-| "按钮换成蓝色渐变"     | 修改 button 样式                   |
-| "加一个联系我表单"     | 新增 form 区块 + 样式              |
-| "首页加个轮播图"       | 添加 JS 轮播逻辑                   |
-| "字体换成更现代的"     | 引入 Google Fonts 或换用系统字体栈 |
-| "把这个部分删掉"       | 删除对应 HTML 区块                 |
-
----
-
-## 六、上传截图复刻流程
-
-用户上传网页截图或 UI 图时：
-
-1. **读取图片描述**：系统会在消息上下文中提供图片的文字描述（`[Image] Description: ...`）
-2. **提取设计元素**：从描述中理解布局、配色、字体、组件结构
-3. **生成复刻代码**：按理解的设计还原 HTML/CSS
-4. **展示确认**：告知用户已识别的设计要素，确认后部署
-
-若需要更精确的 OCR 识别，可配合 `sophnet-image-ocr` skill 提取图片中的文字内容。
-
----
-
-## 七、站点命名规则
-
-站点名称（`<site-name>`）用于 URL 路径，规则：
-
-- 只含小写字母、数字、连字符
-- 不含空格和特殊字符
-- 示例：`portfolio`、`my-blog`、`landing-2026`
-
-若用户未指定，Agent 根据需求自动生成一个合适的名称并告知用户。
-
----
-
-## 八、管理已部署站点
-
-```bash
-# 查看所有已部署站点
-ls <workspace>/canvas/
-
-# 删除某个站点
-rm -rf <workspace>/canvas/<site-name>/
-
-# 更新站点（直接覆盖文件即可）
-```
-
----
-
-## 九、快速建站示例
-
-### 示例 A：个人作品集
-
-**用户**：帮我做一个极简风格的个人作品集网站，包含首页、作品、关于我三个页面
-
-**Bot**：
-
-```
-🌐 建站方案确认
-
-- 类型：个人作品集
-- 风格：极简（白底、细线、大量留白）
-- 页面：首页(index.html)、作品(works.html)、关于(about.html)
-- 站点名称：portfolio
-- 访问地址：http://<your-ip>:18789/canvas/portfolio/
-
-确认开始？
-```
-
-### 示例 B：产品 Landing Page
-
-**用户**：帮我做一个卖运动鞋的 landing page，苹果官网风格
-
-**Bot**：
-
-```
-🌐 建站方案确认
-
-- 类型：产品 Landing Page
-- 风格：极简（深色背景、全屏大图、苹果式排版）
-- 内容：Hero区、产品特性、图片展示、购买CTA
-- 站点名称：sneaker-landing
-- 访问地址：http://<your-ip>:18789/canvas/sneaker-landing/
-
-确认开始？
-```
-
-### 示例 C：复刻截图
-
-**用户**：（上传网页截图）帮我复刻这个界面
-
-**Bot**：
-
-```
-📸 识别到以下设计要素：
-
-- 布局：顶部导航 + Hero大图 + 三栏特性介绍 + 底部
-- 配色：深蓝主色 (#1a237e)，白色文字，橙色强调色
-- 字体：无衬线，标题大号加粗
-- 组件：固定导航栏、全屏背景图、卡片组件
-
-站点名称：cloned-site
-访问地址：http://<your-ip>:18789/canvas/cloned-site/
-
-开始复刻？
-```
+---
+name: website-builder
+description: >
+  一键建站助手：根据用户需求生成完整网站（HTML/CSS/JS），自动部署到 moltbot 内置静态托管，
+  立即给出可公开访问的链接（http://<host>:18789/canvas/<site-name>/）。
+  支持：上传截图/UI图进行像素级复刻、多轮自然语言修改、响应式设计、多页面网站。
+  触发场景：用户说"帮我做一个网站"、"做一个landing page"、"做一个作品集"、"复刻这个界面"、
+  "帮我建一个xxx网站"等。
+metadata: { "openclaw": { "emoji": "🌐", "requires": { "bins": ["node"] } } }
+---
+
+## 加载时说明
+
+当用户启用此 skill 时，发送以下欢迎语：
+
+> 🌐 **建站助手已就绪！**
+>
+> 我可以帮你：
+>
+> - 用一句话描述需求，自动生成并部署网站
+> - 上传截图 / UI 图，像素级复刻
+> - 多轮对话实时修改，所见即所得
+>
+> 生成后你会收到一个可直接访问的链接，无需额外配置。
+>
+> 你想做什么样的网站？
+
+---
+
+# 建站助手 (Website Builder)
+
+根据需求生成完整网站，部署到 moltbot gateway 的 `/canvas/` 静态路由，立即可访问。
+
+---
+
+## 一、访问路径说明
+
+网站文件存放在：
+
+```
+<workspace>/canvas/<site-name>/index.html
+```
+
+访问地址：
+
+```
+http://<moltbot-host>:18789/canvas/<site-name>/
+```
+
+其中 `<moltbot-host>` 是运行 moltbot 的服务器 IP 或域名（如 `192.168.1.100`）。
+
+---
+
+## 二、工作流程
+
+### Step 1：理解需求，输出确认卡片
+
+收到建站需求后，先展示理解摘要让用户确认，**不要直接开始写代码**：
+
+```
+🌐 建站方案确认
+
+- 网站类型：个人作品集
+- 风格：极简黑白
+- 页面：首页、作品、关于、联系
+- 技术栈：纯 HTML + CSS + JS（无需构建）
+- 站点名称（URL路径）：portfolio
+- 访问地址：http://<your-ip>:18789/canvas/portfolio/
+
+确认开始生成？
+```
+
+### Step 2：生成网站文件
+
+用户确认后，调用部署脚本：
+
+```bash
+bash /app/skills/website-builder/scripts/deploy_site.sh \
+  --name "<site-name>" \
+  --workspace "<workspace-dir>"
+```
+
+脚本负责：
+
+1. 创建 `<workspace>/canvas/<site-name>/` 目录
+2. Agent 将生成的 HTML/CSS/JS 文件写入该目录
+3. 输出访问链接
+
+#### 生成代码的要求
+
+- **单文件优先**：能写在一个 `index.html` 里就不拆分（内联 CSS + JS），更易修改
+- **多页面**：每个页面一个 HTML 文件（`about.html`、`works.html` 等），共享一个 `style.css`
+- **响应式**：必须适配手机和桌面
+- **无外部依赖**：不引用 CDN，所有样式和脚本内联或本地，确保离线可用
+- **现代设计**：使用 CSS Grid / Flexbox，避免过时的表格布局
+
+### Step 3：写入文件
+
+使用 exec 工具直接写文件到 canvas 目录：
+
+```python
+# 写入 index.html
+with open('<workspace>/canvas/<site-name>/index.html', 'w') as f:
+    f.write('''...生成的HTML内容...''')
+```
+
+### Step 4：输出访问链接
+
+```
+✅ 网站已部署！
+
+🔗 访问链接：http://<your-ip>:18789/canvas/<site-name>/
+
+📁 文件位置：<workspace>/canvas/<site-name>/
+   ├── index.html
+   ├── about.html（如有）
+   └── style.css（如有）
+
+需要修改？直接告诉我（如"把导航栏改成深色"、"加一个联系表单"）。
+```
+
+---
+
+## 三、获取 moltbot 访问地址
+
+Agent 需要告知用户正确的访问地址。通过以下方式获取 host：
+
+```bash
+# 获取容器内可用的网络地址
+hostname -I 2>/dev/null | awk '{print $1}'
+```
+
+或直接提示用户：
+
+> 请将 `<your-ip>` 替换为你访问 moltbot 的 IP 地址（就是你打开 moltbot 界面时用的那个 IP）。
+
+---
+
+## 四、部署脚本
+
+```bash
+bash /app/skills/website-builder/scripts/deploy_site.sh --name <site-name> --workspace <workspace-dir>
+```
+
+脚本仅负责创建目录，文件由 agent 用 exec 写入。
+
+---
+
+## 五、多轮修改流程
+
+用户发出修改指令后：
+
+1. 读取现有文件：`cat <workspace>/canvas/<site-name>/index.html`
+2. 按需修改代码
+3. 重新写入文件
+4. 告知用户刷新浏览器即可看到效果（支持 live reload 如已开启）
+
+**常见修改示例：**
+
+| 用户说                 | Agent 动作                         |
+| ---------------------- | ---------------------------------- |
+| "把导航栏改成深色背景" | 修改 CSS `.navbar` 背景色          |
+| "按钮换成蓝色渐变"     | 修改 button 样式                   |
+| "加一个联系我表单"     | 新增 form 区块 + 样式              |
+| "首页加个轮播图"       | 添加 JS 轮播逻辑                   |
+| "字体换成更现代的"     | 引入 Google Fonts 或换用系统字体栈 |
+| "把这个部分删掉"       | 删除对应 HTML 区块                 |
+
+---
+
+## 六、上传截图复刻流程
+
+用户上传网页截图或 UI 图时：
+
+1. **读取图片描述**：系统会在消息上下文中提供图片的文字描述（`[Image] Description: ...`）
+2. **提取设计元素**：从描述中理解布局、配色、字体、组件结构
+3. **生成复刻代码**：按理解的设计还原 HTML/CSS
+4. **展示确认**：告知用户已识别的设计要素，确认后部署
+
+若需要更精确的 OCR 识别，可配合 `sophnet-image-ocr` skill 提取图片中的文字内容。
+
+---
+
+## 七、站点命名规则
+
+站点名称（`<site-name>`）用于 URL 路径，规则：
+
+- 只含小写字母、数字、连字符
+- 不含空格和特殊字符
+- 示例：`portfolio`、`my-blog`、`landing-2026`
+
+若用户未指定，Agent 根据需求自动生成一个合适的名称并告知用户。
+
+---
+
+## 八、管理已部署站点
+
+```bash
+# 查看所有已部署站点
+ls <workspace>/canvas/
+
+# 删除某个站点
+rm -rf <workspace>/canvas/<site-name>/
+
+# 更新站点（直接覆盖文件即可）
+```
+
+---
+
+## 九、快速建站示例
+
+### 示例 A：个人作品集
+
+**用户**：帮我做一个极简风格的个人作品集网站，包含首页、作品、关于我三个页面
+
+**Bot**：
+
+```
+🌐 建站方案确认
+
+- 类型：个人作品集
+- 风格：极简（白底、细线、大量留白）
+- 页面：首页(index.html)、作品(works.html)、关于(about.html)
+- 站点名称：portfolio
+- 访问地址：http://<your-ip>:18789/canvas/portfolio/
+
+确认开始？
+```
+
+### 示例 B：产品 Landing Page
+
+**用户**：帮我做一个卖运动鞋的 landing page，苹果官网风格
+
+**Bot**：
+
+```
+🌐 建站方案确认
+
+- 类型：产品 Landing Page
+- 风格：极简（深色背景、全屏大图、苹果式排版）
+- 内容：Hero区、产品特性、图片展示、购买CTA
+- 站点名称：sneaker-landing
+- 访问地址：http://<your-ip>:18789/canvas/sneaker-landing/
+
+确认开始？
+```
+
+### 示例 C：复刻截图
+
+**用户**：（上传网页截图）帮我复刻这个界面
+
+**Bot**：
+
+```
+📸 识别到以下设计要素：
+
+- 布局：顶部导航 + Hero大图 + 三栏特性介绍 + 底部
+- 配色：深蓝主色 (#1a237e)，白色文字，橙色强调色
+- 字体：无衬线，标题大号加粗
+- 组件：固定导航栏、全屏背景图、卡片组件
+
+站点名称：cloned-site
+访问地址：http://<your-ip>:18789/canvas/cloned-site/
+
+开始复刻？
+```

package/skills/website-builder/src/scripts/deploy_site.sh

@@ -1,46 +1,46 @@
-#!/usr/bin/env bash
-#
-# deploy_site.sh - Create canvas directory for a website
-#
-# Usage:
-#   bash deploy_site.sh --name <site-name> --workspace <workspace-dir>
-#
-# Outputs:
-#   SITE_DIR=<absolute path to site directory>
-#   SITE_URL_PATH=/canvas/<site-name>/
-#
-
-set -euo pipefail
-
-SITE_NAME=""
-WORKSPACE_DIR=""
-
-while [[ $# -gt 0 ]]; do
-  case "$1" in
-    --name) SITE_NAME="$2"; shift 2 ;;
-    --workspace) WORKSPACE_DIR="$2"; shift 2 ;;
-    *) echo "Unknown option: $1" >&2; exit 1 ;;
-  esac
-done
-
-if [[ -z "$SITE_NAME" ]]; then
-  echo "Error: --name is required" >&2
-  exit 1
-fi
-
-# Sanitize site name
-SITE_NAME="$(echo "$SITE_NAME" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')"
-
-if [[ -z "$WORKSPACE_DIR" ]]; then
-  # Try to infer from environment
-  STATE_DIR="${HOME}/.openclaw"
-  WORKSPACE_DIR="${STATE_DIR}/workspace"
-fi
-
-CANVAS_ROOT="${WORKSPACE_DIR}/canvas"
-SITE_DIR="${CANVAS_ROOT}/${SITE_NAME}"
-
-mkdir -p "$SITE_DIR"
-
-echo "SITE_DIR=${SITE_DIR}"
-echo "SITE_URL_PATH=/canvas/${SITE_NAME}/"
+#!/usr/bin/env bash
+#
+# deploy_site.sh - Create canvas directory for a website
+#
+# Usage:
+#   bash deploy_site.sh --name <site-name> --workspace <workspace-dir>
+#
+# Outputs:
+#   SITE_DIR=<absolute path to site directory>
+#   SITE_URL_PATH=/canvas/<site-name>/
+#
+
+set -euo pipefail
+
+SITE_NAME=""
+WORKSPACE_DIR=""
+
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    --name) SITE_NAME="$2"; shift 2 ;;
+    --workspace) WORKSPACE_DIR="$2"; shift 2 ;;
+    *) echo "Unknown option: $1" >&2; exit 1 ;;
+  esac
+done
+
+if [[ -z "$SITE_NAME" ]]; then
+  echo "Error: --name is required" >&2
+  exit 1
+fi
+
+# Sanitize site name
+SITE_NAME="$(echo "$SITE_NAME" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')"
+
+if [[ -z "$WORKSPACE_DIR" ]]; then
+  # Try to infer from environment
+  STATE_DIR="${HOME}/.openclaw"
+  WORKSPACE_DIR="${STATE_DIR}/workspace"
+fi
+
+CANVAS_ROOT="${WORKSPACE_DIR}/canvas"
+SITE_DIR="${CANVAS_ROOT}/${SITE_NAME}"
+
+mkdir -p "$SITE_DIR"
+
+echo "SITE_DIR=${SITE_DIR}"
+echo "SITE_URL_PATH=/canvas/${SITE_NAME}/"

package/skills/wechat-article-publisher/skill.json

@@ -1,20 +1,20 @@
-{
-  "name": "wechat-article-publisher",
-  "version": "1.0.0",
-  "types": [
-    "store"
-  ],
-  "displayName": "微信公众号文章发布",
-  "description": "将 Markdown 文件或网页链接内容提取并发布到微信公众号，支持统一排版模板、草稿创建与发布状态查询。",
-  "changelog": [
-    {
-      "version": "1.0.0",
-      "date": "2026-04-13",
-      "changes": [
-        "初次提交"
-      ]
-    }
-  ],
-  "createdAt": "2026-04-13",
-  "updatedAt": "2026-04-13"
-}
+{
+  "name": "wechat-article-publisher",
+  "version": "1.0.0",
+  "types": [
+    "store"
+  ],
+  "displayName": "微信公众号文章发布",
+  "description": "将 Markdown 文件或网页链接内容提取并发布到微信公众号，支持统一排版模板、草稿创建与发布状态查询。",
+  "changelog": [
+    {
+      "version": "1.0.0",
+      "date": "2026-04-13",
+      "changes": [
+        "初次提交"
+      ]
+    }
+  ],
+  "createdAt": "2026-04-13",
+  "updatedAt": "2026-04-13"
+}