lanhu-design

Original：🇨🇳 Chinese

Translated

Analysis of Lanhu design drafts and Axure prototypes. Directly read prototype pages, design drafts, and slice resources of Lanhu projects via lanhu MCP Server. Trigger scenarios: - Need to obtain Axure prototype pages from Lanhu for requirement analysis - Need to view Lanhu UI design drafts and design parameters - Need to extract slice resources from Lanhu design drafts - Need to collaborate via Lanhu team message board - Need to parse Lanhu invitation links Trigger words: Lanhu, lanhu, design draft, prototype, Lanhu link, design image, slice

1installs

Sourcexu-cell/ai-engineering-init

Added on2026-03-28

NPX Install

npx skill4agent add xu-cell/ai-engineering-init lanhu-design

SKILL.md Content (Chinese)

View Translation Comparison →

Lanhu Design Draft Analysis

Prerequisites

lanhu MCP Server is registered in

.claude/settings.json

. For first-time use, you need to configure Lanhu Cookie:

Log in to Lanhu via browser → F12 Developer Tools → Network → Copy the Cookie from the request header

Fill in

lanhu.env.LANHU_COOKIE

in

.claude/settings.json

MCP Tool List

Tool	Purpose	Input
`lanhu_resolve_invite_link`	Parse Lanhu invitation links	Invite link URL
`lanhu_get_pages`	Get prototype document page list + screenshots	Lanhu 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 list	Lanhu 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 drafts	URL without docId + design draft name
`lanhu_say`	Send team messages	URL + content
`lanhu_say_list`	Query message list	URL or 'all'
`lanhu_say_detail`	View message details	Message ID
`lanhu_say_edit`	Edit messages	URL + message ID + new content
`lanhu_say_delete`	Delete messages	URL + message ID
`lanhu_get_members`	Get project members	URL

URL Type Differentiation (Important)

URL Type	Feature	Used For
Prototype Document URL	Contains `docId` parameter	`lanhu_get_pages` , `lanhu_get_ai_analyze_page_result`
Design Project URL	No `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. Requirement Analysis (Integration with analyze-requirements)

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. Frontend Development (Obtain Design Parameters)

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. Analysis Mode Selection

lanhu_get_ai_analyze_page_result

supports 3 modes:

Mode	Focus	Applicable Scenario
`development`	Field rules, business logic, global flow chart	Backend/frontend development
`testing`	Test scenarios, use cases, boundary values, validation rules	Test case writing
`exploration`	Core function overview, module dependencies, review key points	Requirement review

Integration with Other Skills

Scenario	First Use lanhu-design	Then Use
Requirement Analysis	Obtain prototype screenshots and page structure	`analyze-requirements` to output development task list
Frontend Development	Obtain design parameters and slices	`ui-pc` to implement pages
Interface Development	Derive interface fields from prototypes	`api-development` / `crud-development`

Notes

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