What I do

我可以帮助你：

•自动化登录蓝湖账号
•导出蓝湖设计稿、标注和切图资源
•提取蓝湖页面的 CSS/HTML 样式代码
•管理蓝湖项目和设计资源
•将设计资源集成到开发工作流

技术栈：

•pnpm / Bun + TypeScript
•Playwright 浏览器自动化
•与 Python MCP Server 功能兼容

When to use me

当你需要：

•保存蓝湖配置 - 首次使用时保存账号密码到配置文件
•登录蓝湖 - 使用保存的配置或手动提供账号密码登录
•导出设计资源 - 从蓝湖导出设计图、CSS 样式、切图等
•提取样式代码 - 快速获取页面的 CSS/HTML 代码标注
•自动化设计工作流 - 将设计资源自动同步到项目中
•批量处理设计文件 - 批量导出多个页面或项目

Examples

1. 保存蓝湖账号配置

方式一：通过 OpenCode Agent 保存

在 OpenCode 中告诉我你的账号密码，我会自动保存到配置文件：

txt

请保存我的蓝湖配置：
账号：your@email.com
密码：yourpassword

Agent 会将配置保存到 .opencode/skills/lan-hu-app/config/credentials.json

方式二：手动编辑配置文件

直接编辑配置文件：

bash

# 编辑配置文件
nano .opencode/skills/lan-hu-app/config/credentials.json

json

{
  "lanhu": {
    "email": "your@email.com",
    "password": "yourpassword"
  },
  "outputDir": "./lanhu-export"
}

保存后设置文件权限：

bash

chmod 600 .opencode/skills/lan-hu-app/config/credentials.json

2. 登录蓝湖账号

bash

# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts

# 首次使用需要安装依赖 (推荐使用 pnpm)
pnpm install # 如果没有 pnpm，请使用 bun install

# 安装 Playwright 浏览器（仅首次）
pnpm dlx playwright install chromium # 如果没有 pnpm，请使用 bunx playwright install chromium

# 登录蓝湖（会打开浏览器窗口）
pnpm run login your@email.com yourpassword # 如果没有 pnpm，请使用 bun run login.ts ...

# 或使用无头模式（后台运行）
pnpm run login your@email.com yourpassword true

登录成功后，状态会保存到 .opencode/skills/lan-hu-app/config/auth-state.json 文件中，后续操作将自动使用此状态，无需重复登录。

3. 导出蓝湖设计稿页面

你可以直接导出蓝湖设计稿，包括设计图、CSS/HTML 代码和切图资源。

导出的文件结构如下：

•design.png: 高清设计图
•index.html: 结构代码
•index.css: 样式代码
•common.css: 基础公共样式（自动拷贝）
•images/: 切图资源
•meta.json: 导出元数据

通过命令行导出：

bash

# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts

# 导出指定页面
pnpm run export "https://lanhuapp.com/web/#/item/board?pid=xxx&image_id=yyy"

# 强制更新已存在的资源
pnpm run export "URL" --force

# 指定输出目录
pnpm run export "URL" ./my-assets

通过 OpenCode Agent 导出：

在对话框中提供页面链接，我会自动帮你下载资源：

code

请帮我导出这个蓝湖页面：https://lanhuapp.com/web/#/item/board?pid=...

4. 提取页面样式代码

如果你只需要获取页面的 CSS 或 HTML 代码而不需要下载图片，可以使用提取样式功能。

通过命令行提取：

bash

# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts

# 提取并打印样式 (JSON 格式输出)
pnpm run get-styles "URL"

通过 OpenCode Agent 提取：

code

请帮我提取这个蓝湖页面的样式代码：https://lanhuapp.com/...

5. 在代码中调用

typescript

import { login } from './.opencode/skills/lan-hu-app/scripts/login.ts'
import { LanhuExporter } from './.opencode/skills/lan-hu-app/scripts/export.ts'

// 使用配置登录
const result = await login({ email, password })

// 导出页面
const exporter = new LanhuExporter()
await exporter.export({ pageUrl: "..." })

Technical Details

文件结构

code

.opencode/skills/lan-hu-app/
├── SKILL.md                      # 技能说明文档
├── config/                       # 配置目录
│   ├── credentials.json         # 账号密码配置
│   ├── auth-state.json          # 浏览器登录状态
│   ├── credentials.json.template # 配置模板
│   └── README.md                # 配置说明
└── scripts/                     # 自动化脚本
    ├── login.ts                 # 登录脚本
    ├── save-config.ts           # 保存配置脚本
    ├── export.ts                # 页面导出脚本
    ├── get-styles.ts            # 样式提取脚本
    ├── package.json             # 依赖配置
    └── README.md                # 脚本使用说明

浏览器状态数据

•状态文件: .opencode/skills/lan-hu-app/config/auth-state.json
•包含内容: Cookies、LocalStorage、Session 等登录凭证
•安全性: 数据存储在本地配置目录中，已添加到 .gitignore

常见问题

Q: 配置文件安全吗？ A: 配置文件和状态文件已设置权限为 600（仅所有者可读写），并已添加到 .gitignore，不会被提交到版本控制。

Q: 登录凭证保存在哪里？ A: 保存在 .opencode/skills/lan-hu-app/config/ 目录下：

•credentials.json: 账号密码
•auth-state.json: 浏览器登录状态

Q: 如何退出登录？ A: 删除 .opencode/skills/lan-hu-app/config/auth-state.json 文件即可清除登录状态。