一张或多张截图
支持完整页面、局部组件、桌面端和移动端参考图。
从现有界面开始，不必重新写完整需求
只需要提供有助于理解目标和验证结果的材料。
用途与约束
说明页面面向谁、需要哪些交互、使用什么技术或品牌规范。
现有项目，可选
也可以上传已有代码，让 Agent 在当前文件上局部修改。
可交付结果
拿到的是网页文件，不是一张新的图片
响应式页面
适配常见桌面和移动视口，文字与控件不会挤出容器。
真实交互
导航、按钮、筛选、表单和状态切换可以按需求实现。
完整源文件
HTML、CSS、JavaScript、图片与字体都保留在工作区。
浏览器验证
Agent 可以打开页面、检查控制台和截图，再继续修正。
处理过程
从视觉参考到可继续开发的版本
01
理解截图
识别页面区域、对齐关系、组件层级和可复用样式。
02
补齐行为
结合你的说明判断哪些元素需要交互以及不同状态。
03
创建文件
在独立工作区编写页面和资源，而不是只返回代码片段。
04
打开验证
检查实际渲染、响应式布局和运行错误并继续修改。
“参考这张产品截图，做成响应式网页。保留信息结构，补齐移动端布局，并让按钮和筛选可以交互。”
截图转网页常见问题
能做到和截图完全一致吗？
Agent 会尽量还原可见布局和样式，但字体、原始素材、隐藏状态与业务逻辑需要由现有文件或补充说明提供。
只有一张桌面截图，也能做移动端吗？
可以。Agent 会根据内容层级设计合理的响应式布局，你也可以继续上传移动端参考或提出具体调整。
可以使用 React、Vue 或现有设计系统吗？
可以。说明技术栈，或上传现有项目，Agent 会优先沿用项目已有结构和组件。
生成后还能只改一个区域吗？
可以。文件持续保存在工作区，后续可以针对导航、某个区块或某个视口做小范围修改。
从一张截图开始制作
上传参考图，说明页面用途和必须保留的部分。