starql/lanhu-mcp

Browser automation

This page was translated automatically. Technical details may differ from the original. View the original

11 stars 3 forks Quality 64 Trend 18MIT

Repository Install

为了打造 ai 工作流，实现自动化 ui 功能而尝试的 lanhu-mcp

Overview

通过 Model Context Protocol 将蓝湖设计稿的结构化数据、预览图和切图资源提供给 Claude Code 等 AI 工具，作为前端还原的参考资料。 - — 将蓝湖 Sketch JSON 清洗为精简图层树，剔除不可见图层、标注图层、空容器 - — 直接从图层属性生成标准 UnoCSS class（宽高、圆角、背景色、字号、阴影等） - — 自动识别 text / image / icon / shape / container 五种类型 - — 按尺寸分为 bg（背景图 ≥600px）、icon（图标 ≤128px）、img（普通图片），自动去重 - — 过期时自动弹出浏览器引导登录，登录后持久化到本地 - — 自动检测设计稿来源，适配不同的切图识别逻辑将 UI 设计师分享的蓝湖链接发给 Claude Code。以下是一些提示词示例：帮我分析这个设计稿 https://lanhuapp.com/web/#/item/project/detailDetach?tid=xxx&pid=xxx&image_id=xxx 根据这个蓝湖设计稿还原页面，技术栈用 Vue 3 + UnoCSS https://lanhuapp.com/web/#/item/... 帮我下载这个设计稿的切图资源 https://lanhuapp.com/web/#/item/... 这个项目有多个页面，先列出所有设计图让我选 https://lanhuapp.com/web/#/item/project/stage?tid=xxx&pid=xxx 首次使用或 Cookie 过期时，会自动弹出浏览器窗口，手动扫码或输入密码登录蓝湖即可。登录成功后 Cookie 保存到 ~/.lanhu-mcp/cookie.json，后续请求自动复用。

Install

npx @star_work/lanhu-mcp

New to MCP? Start with the mcpskill.org guide →

Configuration

{
  "mcpServers": {
    "lanhu": {
      "command": "lanhu-mcp"
    }
  }
}