菜单
基于用户提供的设计稿图片还原真实网页。该 skill 可用于任意前端项目，但强依赖本地已启动且已授权的 JarvisHub vision 工作流；视觉模型由服务端默认配置决定，支持外部传入 vision prompt，且不可静默降级。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/LYL1015/JarvisHub --skill canvas-design-to-web命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | canvas-design-to-web |
| description | 基于用户提供的设计稿图片还原真实网页。该 skill 可用于任意前端项目，但强依赖本地已启动且已授权的 JarvisHub vision 工作流；视觉模型由服务端默认配置决定，支持外部传入 vision prompt，且不可静默降级。 |
webHero 画布流程中，只生成 HTML/CSS，并通过 readiness -> 两字段 stage -> commit 提交；webHeroDocumentHtml 必须由服务端派生，不能写进 text node 或 generic node patch。canvas_read_node_media_for_context 读取这些预览图，让模型真实看到图片后再写最终代码。<section>；CSS/JS 引用的 section id 必须存在于 DOM 中。assets/，并要求还原为 React/Mantine 页面。缺少上述信息时，先指出缺失项，不要假设页面归属或交互细节。
优先使用本地 JarvisHub vision 工作流，对设计稿做结构化取证。目标不是“看图讲故事”，而是提取可编码的界面事实。
建议分析维度：
调用时默认要求：
layoutdesignTokenscomponentsvisualHierarchymotionHintsuncertainties如果设计稿有多个画板或多张图片：
先形成一个简短实施计划，再开始改代码：
webHero 目标节点 id，以及最终要写入的 webHero* 字段坚持单一职责：
webHero，用 canvas_create_webhero_node 确保存在目标节点；先通过 canvas_webhero_check_readiness，再用稳定 session ID 只 stage HTML/CSS，最后调用 canvas_webhero_code_commit。若宿主是严格 JSON 的前端 WebHero runner，只把 HTML/CSS JSON 返回给宿主，由 runner 执行同一事务；任何路径都不得用 canvas_update_node_data 写最终代码。className。any，不写 as any。至少做一次“设计稿 vs 页面实现”的回看，重点检查：
如果差异明显，继续修，不要在“已经能跑”时提前停止。
对用户汇报时必须包含：
imageUrl 资源不可读，例如供应商侧无法访问 127.0.0.1 / 本机局域地址：直接按阻塞失败处理，不得把空结构当成功分析。