Requirement-to-HTML（需求整理 → HTML 输出）
概述
此 Skill 将用户提供的文字描述或手绘草图/参考图片转化为结构化的需求文档，并基于确认后的需求生成高保真 HTML 文件。
适用场景
- 用户用文字描述一个页面/组件/看板的需求，想快速看到 HTML 效果
- 用户上传手绘草图或参考截图，希望还原为 HTML 页面
- 用户需要把模糊的想法整理为清晰的需求，再落地为可交互的 HTML
- 演示文稿、数据仪表盘、产品 Landing Page、表单页面等任何 HTML 产出场景
工作流程
第一步：接收与分析输入
-
识别输入类型
- 纯文字描述：用户用自然语言描述想要的页面效果
- 图片参考：用户上传手绘草图、UI 截图、设计稿或参考图
- 混合输入：文字 + 图片的组合 -
图片分析（如有图片输入）
- 使用 Read 工具读取图片，仔细分析其中的：- 整体布局结构（header、sidebar、主内容区、footer 等）
- 颜色方案与配色
- 字体大小与层级关系
- 组件类型（按钮、表格、卡片、图表、表单等）
- 间距与对齐关系
- 交互元素（导航、标签页、下拉菜单等）
- 将视觉分析结果转化为结构化的布局描述
-
文字分析（如有文字输入）
- 提取关键需求要素：- 页面类型（展示页/表单/看板/列表/详情页等）
- 核心功能点
- 数据展示需求
- 交互需求
- 风格偏好
第二步：需求整理与输出
将分析结果整理为结构化的需求清单，以清晰的中文呈现给用户确认。需求整理应包含：
- 页面概览：一句话描述页面是什么
- 布局结构：区域划分（用文字描述 + ASCII 线框图）
- 组件清单：每个区域包含哪些组件
- 配色方案：主色、辅色、背景色、文字颜色
- 字体层级：标题、副标题、正文的字号与字重
- 数据与内容：展示什么数据、什么内容
- 交互说明：hover 效果、点击行为、过渡动画等
第三步：用户确认
将整理好的需求以清晰的结构呈现给用户，询问：
- 需求理解是否正确？
- 是否有需要补充或修改的地方？
- 确认后进入 HTML 生成阶段
用户确认之前，不要开始写 HTML。
第四步：HTML 生成
用户确认需求后，基于确认的需求生成完整的 HTML 文件。
HTML 生成规范：
-
单文件自包含
- 所有 CSS 写在<style>标签内
- 所有 JS 写在<script>标签内
- 不依赖外部 CDN（除非用户明确需要图表库等）
- 可直接在浏览器中打开 -
视觉还原精度
- 严格遵循需求中的配色方案
- 严格遵循布局结构
- 对字号、间距、圆角等细节精确还原
- 拒绝简化或近似处理 -
代码质量
- 语义化 HTML5 标签（header、main、section、nav 等）
- CSS 使用合理的 class 命名
- 响应式设计考虑（至少适配 1280px-1920px 主流桌面分辨率）
- 添加适当的 hover/focus 交互效果 -
交互与动效
- 按钮 hover 效果
- 卡片 hover 阴影
- 页面加载淡入动画（可选）
- 导航高亮状态
- 适当的 CSS transition -
文件管理
- 默认输出路径：当前工作区根目录
- 命名规则：{页面功能描述}.html（中文或英文均可）
- 如用户指定了路径，则输出到指定路径
第五步：呈现结果
- HTML 文件写好后，使用
preview_url工具直接在浏览器面板中展示效果 - 使用
deliver_attachments工具将 HTML 文件作为附件交付给用户 - 简要说明页面包含的功能和设计要点
关键原则
- 精确还原：不简化、不近似，力求像素级还原用户意图
- 先整理后执行：绝不跳过需求确认步骤就直接写 HTML
- 中文优先：所有面向用户的沟通使用简体中文
- 迭代友好：用户提出修改意见后，基于现有 HTML 进行编辑而非重写
- 高保真：输出的 HTML 应该是可直接使用的成品，而非草稿
交互示例
示例 1：纯文字描述
用户：我想要一个工业公司 CFO 的数据看板，左侧是导航栏，顶部有公司 logo 和标题，
主区域显示关键财务指标卡片（收入、利润、现金流），下面是一个趋势图表区域，
右侧是最近的通知列表。
→ 分析需求 → 整理为结构化清单 → 确认 → 生成 HTML
示例 2：图片参考
用户：[上传一张手绘布局草图]
按照这个布局，做一个产品展示页面。
→ 读取图片 → 分析布局/配色/组件 → 整理为结构化清单 → 确认 → 生成 HTML
示例 3：图片 + 文字补充
用户：[上传参考截图]
参考这个风格，但把颜色换成深蓝色系，卡片改成 4 列布局，加上数据动画效果。
→ 读取图片 → 结合文字修改要求 → 整理为结构化清单 → 确认 → 生成 HTML
注意事项
- 如果用户提供的图片不清晰或需求描述模糊，主动向用户提问澄清
- 对于复杂页面（超过 8 个不同区域），建议分步确认，先确认整体布局再确认细节
- 如果用户需求涉及图表（折线图、柱状图等），使用纯 CSS/SVG 实现或内联轻量方案，避免引入大型图表库
- 如果用户明确要求使用图表库（如 Chart.js），则通过 CDN 引入
