技能介绍

要解决的问题

当页面需求还停留在口头描述、截图或手绘草图时，直接写 HTML 容易遗漏布局层级、配色、组件状态和交互细节，最后往往要反复返工。这个技能把“想法到页面”拆成先整理、后执行的两段流程，让需求在进入代码前形成可确认的清单。

技能如何工作

输入识别：支持纯文字描述、参考图片，或图片加文字补充；图片会被拆解为布局结构、配色、字体层级、组件类型、间距和对齐关系。
需求整理：输出页面概览、布局结构、组件清单、配色方案、字体层级、数据内容与交互说明，并可用 ASCII 线框图辅助表达。
确认机制：在用户确认前不开始写 HTML，避免带着模糊理解进入实现阶段。
文件生成：确认后生成单文件、自包含的 HTML，优先内联 CSS 与 JS，尽量不依赖外部 CDN，并适配 1280px 到 1920px 桌面场景。
结果交付：支持在浏览器面板预览，并把文件作为附件交付，便于继续迭代。

适用边界与注意点

它适合 Landing Page、表单、数据看板、详情页等可直接用单文件 HTML 表达的场景。若图片不清晰或需求模糊，技能会主动追问；超过 8 个区域时建议先确认整体布局再确认细节。图表默认倾向纯 CSS/SVG 或轻量内联方案，只有用户明确要求时才通过 CDN 引入 Chart.js 等库。它不是设计稿生产工具，而是把已有想法快速变成可运行页面原型。