Back to Details

lanhu-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

蓝湖设计稿分析

Lanhu Design Draft Analysis

前置条件

Prerequisites

lanhu MCP Server 已注册在 
.claude/settings.json
。首次使用需配置蓝湖 Cookie：
  1. 浏览器登录蓝湖 → F12 开发者工具 → Network → 复制请求头中的 Cookie
  2. 填入 
    .claude/settings.json
    的 
    lanhu.env.LANHU_COOKIE
lanhu MCP Server is registered in 
.claude/settings.json
. For first-time use, you need to configure Lanhu Cookie:
  1. Log in to Lanhu via browser → F12 Developer Tools → Network → Copy the Cookie from the request header
  2. Fill in 
    lanhu.env.LANHU_COOKIE
    in 
    .claude/settings.json

MCP 工具清单

MCP Tool List

工具用途输入
lanhu_resolve_invite_link
解析蓝湖邀请链接邀请链接 URL
lanhu_get_pages
获取原型文档页面列表+截图含 docId 的蓝湖 URL
lanhu_get_ai_analyze_page_result
AI 分析原型页面（开发/测试/探索视角）含 docId 的 URL + 页面名 + 模式
lanhu_get_designs
获取 UI 设计图列表不含 docId 的蓝湖 URL
lanhu_get_ai_analyze_design_result
AI 分析设计图（含尺寸/颜色/CSS）不含 docId 的 URL + 设计图名
lanhu_get_design_slices
提取设计稿切图资源不含 docId 的 URL + 设计图名
lanhu_say
发送团队留言URL + 内容
lanhu_say_list
查询留言列表URL 或 'all'
lanhu_say_detail
查看留言详情消息 ID
lanhu_say_edit
编辑留言URL + 消息 ID + 新内容
lanhu_say_delete
删除留言URL + 消息 ID
lanhu_get_members
获取项目成员URL
ToolPurposeInput
lanhu_resolve_invite_link
Parse Lanhu invitation linksInvite link URL
lanhu_get_pages
Get prototype document page list + screenshotsLanhu URL containing docId
lanhu_get_ai_analyze_page_result
AI analyze prototype pages (from development/testing/exploration perspectives)URL with docId + page name + mode
lanhu_get_designs
Get UI design draft listLanhu URL without docId
lanhu_get_ai_analyze_design_result
AI analyze design drafts (including size/color/CSS)URL without docId + design draft name
lanhu_get_design_slices
Extract slice resources from design draftsURL without docId + design draft name
lanhu_say
Send team messagesURL + content
lanhu_say_list
Query message listURL or 'all'
lanhu_say_detail
View message detailsMessage ID
lanhu_say_edit
Edit messagesURL + message ID + new content
lanhu_say_delete
Delete messagesURL + message ID
lanhu_get_members
Get project membersURL

URL 类型区分（重要）

URL Type Differentiation (Important)

URL 类型特征用于
原型文档 URL含 
docId
参数
lanhu_get_pages
、
lanhu_get_ai_analyze_page_result
设计项目 URL不含 
docId
lanhu_get_designs
、
lanhu_get_design_slices
邀请链接
lanhuapp.com/link/#/invite?sid=xxx
先用 
lanhu_resolve_invite_link
解析
URL TypeFeatureUsed For
Prototype Document URLContains 
docId
parameter
lanhu_get_pages
, 
lanhu_get_ai_analyze_page_result
Design Project URLNo 
docId
lanhu_get_designs
, 
lanhu_get_design_slices
Invitation Link
lanhuapp.com/link/#/invite?sid=xxx
First use 
lanhu_resolve_invite_link
to parse

典型工作流

Typical Workflows

1. 需求分析（与 analyze-requirements 联动）

1. Requirement Analysis (Integration with analyze-requirements)

收到蓝湖链接
  │
  ├─ 邀请链接？ → lanhu_resolve_invite_link → 获取真实 URL
  │
  ├─ 含 docId？（原型文档）
  │   ├─ lanhu_get_pages → 获取页面列表和截图
  │   └─ lanhu_get_ai_analyze_page_result(mode="development") → 获取字段/逻辑/流程
  │
  └─ 不含 docId？（设计项目）
      ├─ lanhu_get_designs → 获取设计图列表
      └─ lanhu_get_ai_analyze_design_result → 获取尺寸/颜色/CSS
Receive Lanhu link
  │
  ├─ Is it an invitation link? → lanhu_resolve_invite_link → Get real URL
  │
  ├─ Contains docId? (Prototype Document)
  │   ├─ lanhu_get_pages → Get page list and screenshots
  │   └─ lanhu_get_ai_analyze_page_result(mode="development") → Get fields/logic/processes
  │
  └─ No docId? (Design Project)
      ├─ lanhu_get_designs → Get design draft list
      └─ lanhu_get_ai_analyze_design_result → Get size/color/CSS

2. 前端开发（获取设计参数）

2. Frontend Development (Obtain Design Parameters)

lanhu_get_designs → 查看设计图列表
  → lanhu_get_ai_analyze_design_result → 获取精确设计参数（尺寸/间距/颜色/字体）+ HTML+CSS 代码
  → lanhu_get_design_slices → 提取切图/图标资源
lanhu_get_designs → View design draft list
  → lanhu_get_ai_analyze_design_result → Obtain precise design parameters (size/spacing/color/font) + HTML+CSS code
  → lanhu_get_design_slices → Extract slice/icon resources

3. 分析模式选择

3. Analysis Mode Selection

lanhu_get_ai_analyze_page_result
支持 3 种模式：
模式关注点适用场景
development
字段规则、业务逻辑、全局流程图后端/前端开发
testing
测试场景、用例、边界值、校验规则测试编写
exploration
核心功能概览、模块依赖、评审要点需求评审
lanhu_get_ai_analyze_page_result
supports 3 modes:
ModeFocusApplicable Scenario
development
Field rules, business logic, global flow chartBackend/frontend development
testing
Test scenarios, use cases, boundary values, validation rulesTest case writing
exploration
Core function overview, module dependencies, review key pointsRequirement review

与其他技能联动

Integration with Other Skills

场景先用 lanhu-design再用
需求分析获取原型截图和页面结构
analyze-requirements
输出开发任务清单
前端开发获取设计参数和切图
ui-pc
实现页面
接口开发从原型推导接口字段
api-development
/ 
crud-development
ScenarioFirst Use lanhu-designThen Use
Requirement AnalysisObtain prototype screenshots and page structure
analyze-requirements
to output development task list
Frontend DevelopmentObtain design parameters and slices
ui-pc
to implement pages
Interface DevelopmentDerive interface fields from prototypes
api-development
/ 
crud-development

注意

Notes

  • 蓝湖 Cookie 有效期有限，过期需重新获取
  • 原型文档和设计项目使用不同的 URL 格式，工具不能混用
  • 大型原型建议分页面分析，避免单次请求过大
  • 与 
    analyze-requirements
    的区别：本技能负责从蓝湖获取数据，
    analyze-requirements
    负责分析数据输出任务
  • Lanhu Cookie has a limited validity period; re-obtain it when expired
  • Prototype documents and design projects use different URL formats, tools cannot be mixed
  • For large prototypes, it is recommended to analyze by page to avoid excessive single requests
  • Difference from 
    analyze-requirements
    : This skill is responsible for obtaining data from Lanhu, while 
    analyze-requirements
    is responsible for analyzing data and outputting tasks