---
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/

开始复刻？
```
