---
name: lanhu-design-to-html
version: 1.0.0
category: 内容创作
trigger_words:
tags:
- design
platform: coze
source: DeepseekModel
source_url: https://deepseekmodel.com/skill?id=apeman1024-lanhu-design-to-html-skill-md
---
name lanhu-design-to-html description 从蓝湖设计稿链接获取设计信息并还原为HTML页面。Invoke when user provides a lanhuapp.com link, asks to analyze/restore a Lanhu design mockup, or needs to extract design specs from Lanhu. Lanhu Design to HTML 从蓝湖设计稿链接自动获取设计数据、分析图层结构、提取元素样式，并还原为 HTML 页面。 When to Use 当用户提供 lanhuapp.com 链接，或要求分析/还原蓝湖设计稿时调用此 skill。 Prerequisites playwright-cli 已安装（运行 npx --no-install playwright-cli --version 检查） Node.js 已安装（用于解析设计数据） Workflow Overview 蓝湖链接 → 打开浏览器 → 获取Sketch JSON → 解析图层/样式 → 下载切图到本地 → 分析结构 → 生成HTML → 验证效果 核心原则：切图本地化（必须遵守） 所有切图必须下载到本地 assets/images/ 目录，HTML 中只引用本地相对路径，禁止使用蓝湖 CDN 链接 （如 lanhu.oss-cn-beijing.aliyuncs.com 、 alipic.lanhuapp.com ）。原因： CDN 链接可能因权限/防盗链/链接失效导致图片无法显示 本地化后页面可离线运行、便于部署、加载更稳定 切图通过 download-images.js 统一下载，并生成 image-map.json （URL → 本地路径映射），生成 HTML 时按映射表替换为本地路径 Quick Start Step 1: 打开蓝湖设计稿（含登录检测） # 1. 以持久化模式打开浏览器（默认 headless，高效） playwright-cli open --persistent # 2. 导航到蓝湖链接（URL含&时必须用双引号包裹） playwright-cli goto "https://lanhuapp.com/web/#/item/project/detailDetach?pid=XXX&image_id=XXX&project_id=XXX&fromEditor=true&type=image" # 3. 等待页面加载后检测登录状态 Start-Sleep -Seconds 3 playwright-cli eval "document.querySelector('.layers_item, .image-wrapper, canvas') ? 'logged-in' : 'NOT-logged-in'" 关键点 ： URL 中的 & 在 PowerShell 中会被解释为命令分隔符，必须用双引号 "..." 包裹整个 URL 使用 --persistent 保持登录状态（蓝湖需要登录才能查看设计稿） 等待 3-5 秒让页面完全加载 未登录处理（自动切换 headed 模式） 如果 Step 3 返回 NOT-logged-in ，说明用户未登录蓝湖。此时关闭 headless 浏览器，切换到 --headed 模式，让用户在可见的浏览器窗口中手动登录： # 1. 关闭 headless 浏览器 playwright-cli close # 2. 以 headed + persistent 模式重新打开浏览器（窗口可见，用户可操作） playwright-cli open --persistent --headed # 3. 重新导航到蓝湖设计稿链接 playwright-cli goto "https://lanhuapp.com/web/#/item/project/detailDetach?pid=XXX&image_id=XXX&project_id=XXX&fromEditor=true&type=image" # 此时浏览器窗口可见，页面显示蓝湖登录界面 # 提示用户：请在弹出的浏览器窗口中登录蓝湖（支持扫码 / 账号密码登录） # 4. 轮询检测登录是否完成（每 3-5 秒重复执行，直到返回 logged-in） playwright-cli eval "document.querySelector('input[type=password], .login-form, .login-container') ? 'waiting' : 'logged-in'" # 5. 登录完成后，重新导航到设计稿链接（登录后页面会跳转到蓝湖首页） playwright-cli goto "https://lanhuapp.com/web/#/item/project/detailDetach?pid=XXX&image_id=XXX&project_id=XXX&fromEditor=true&type=image" Start-Sleep -Seconds 3 注意 ： --headed 让浏览器窗口可见，用户可在页面上操作登录（扫码、输入账号密码等） --persistent 确保登录状态保存到磁盘，下次运行自动保持登录（headless 即可） 登录完成后必须重新导航到设计稿链接，因为登录后页面会跳转到蓝湖首页 登录只需一次，后续运行会自动保持登录状态 Step 2: 获取 Sketch JSON 设计数据 蓝湖页面加载时会通过 API 请求获取完整的 Sketch JSON 数据，包含所有图层、样式、切图信息。 # 查看网络请求，找到 SketchJSON URL playwright-cli requests # 找到包含 "SketchJSON" 或 "alipic.lanhuapp.com" 的请求编号 # 获取响应体（文本类型直接显示，二进制保存到文件） playwright-cli response-body 识别 Sketch JSON 请求 ： URL 通常包含 alipic.lanhuapp.com 或 SketchJSON Content-Type 为 application/json 或 application/octet-stream 文件较大（通常 100KB+） Step 3: 解析设计数据 使用辅助脚本解析 Sketch JSON，提取所有图层信息。 # 将响应体文件路径传给解析脚本 node .trae/skills/lanhu-design-to-html/scripts/parse-design.js 脚本会生成： design-analysis.txt - 人类可读的图层分析报告 design-layers.json - 结构化的图层数据（供 HTML 生成使用） Step 4: 下载切图到本地（必做） 生成 HTML 之前，必须先把所有切图下载到本地。 解析脚本会在控制台末尾打印下载命令，直接复制执行即可： # 将 design-layers.json 中的所有切图下载到本地 assets/images/ node .trae/skills/lanhu-design-to-html/scripts/download-images.js 脚本会： 读取 design-layers.json ，按优先级 SVG > PNG > DDS 收集所有切图 URL 下载到 /assets/images/ 目录（文件名取自图层名，自动去重） 生成 image-map.json — 原始 URL 到本地相对路径的映射表（如 {"https://lanhu.../SketchPngxxx": "./assets/images/apeman.png"} ） 失败的切图单独记录到 image-download-failures.json ，可重试 生成 HTML 时，所有 ![]()
必须查 image-map.json 替换为本地路径，不得直接写蓝湖 CDN 链接。 Step 5: 分析图层结构 根据解析结果，识别页面的组成结构： 画板信息 ：尺寸、名称 文本图层 ：内容、字体、字号、颜色、对齐方式、行高 图片/切图图层 ：图片 URL、尺寸、位置 形状图层 ：填充色、圆角、边框、阴影 分组图层 ：层级关系 重点：检查切图可用性 。解析报告会为每个图层标注 ⭐ 切图可用 字段，并在末尾汇总"切图实现建议"。凡是标记为"是"的图层，说明设计稿已提供切图， 必须直接用 ![]()
实现，不要用 CSS 还原 。 Step 6: 生成 HTML 使用 generate-html.js 自动生成 HTML 文件，遵循"切图优先"原则： # 自动生成 index.html（切图优先 + Flexbox 布局 + 切图本地化校验） node .trae/skills/lanhu-design-to-html/scripts/generate-html.js [output.html] 脚本会： 读取 design-layers.json 与 image-map.json ，自动构建图层树 按 SVG > PNG > DDS 优先级选取切图，用 ![]()
引用本地路径（从 image-map.json 查找） 无切图的文本用 CSS 文字样式还原，无切图的形状用 CSS div 还原 对同组元素进行布局分析，优先使用 Flexbox 排列（自动检测行/列、计算 gap） 生成 375×812px 容器的自包含 index.html （CSS 内嵌于