技能介绍

解决的问题

把设计稿变成可上线的 H5 页面，通常要拆布局、抠文案、补样式、加动效。设计截图只能说明视觉结构，文档里的文案又散落在 PPT、Word 或 PDF 中，手工整理容易漏内容，也容易把响应式断点写散。design-to-h5 针对这类输入，把截图、文档和标注素材转成带基础交互的 H5 页面，减少从静态稿到前端代码之间的重复整理工作。

工作方式

这个技能的核心输入通常是三类：

页面截图或设计稿：用于识别页面结构、元素位置、背景色、内容区域和装饰素材。
文案文档：支持 txt、doc、docx、ppt、pptx、pdf 等格式，提取标题、正文、备注和分点内容。
标注图片素材：从图片中标注位置读取文案信息，辅助把文字落回对应区块。

工作流大致是：先解析多源素材，再把截图中的视觉结构映射到布局系统；接着从文档中提取文案，按标题、段落、按钮、说明文本等角色组织；最后生成响应式 HTML/CSS/JS，包含 PC 端和移动端布局、图片淡入淡出、文字 hover 呼吸感、悬停效果和平滑滚动等表现。

它比较适合以下场景：

已有高保真设计截图，但没有完整前端工程。
文案散落在 PPTX、DOCX 或 TXT 中，需要快速落到页面里。
需要一张可演示的活动页、产品页或内容页，而不是完整业务系统。

边界与注意点

这个技能更偏向页面生成和视觉还原，不负责复杂业务逻辑、登录态、数据请求或后端联调。输入质量会明显影响结果：截图模糊时建议提供 2x 以上分辨率；文档乱码时要确认编码为 UTF-8；如果移动端动画卡顿，优先用 transform 和 opacity 做动效；图片闪烁可加骨架屏或 blur-up 方案。输出页面适合作为前端起点，后续仍建议按真实业务需求补齐组件结构、路由、状态管理和测试。