index.html
页面结构与可访问性标记
全部案例
示例工作流 · 页面制作
从桌面截图还原响应式产品落地页
这个示例展示 Flowmint 如何把单张桌面参考图转成可运行页面，并在没有移动端截图的情况下补齐合理的响应式行为。
这是用于展示产品能力的示例工作流，不是客户项目或效果承诺。
客户概览
活跃客户
1,284
近 30 天
+18%
激活率
42
需关注
8.6
健康度
每周活跃趋势
Acme 完成年度续约
Northwind 邀请 12 位成员
输入目标
“参考 dashboard-reference.png 还原页面。保持左侧导航、指标区和活动列表，移动端改为顶部导航；筛选按钮需要可切换，并检查 390px 和 1440px 视口。”
提供的材料
dashboard-reference.png
1440 × 980 的桌面界面截图
brand-notes.md
品牌色、字体偏好与按钮文案
Agent 的处理过程
- 1
拆解视觉结构
识别导航、指标卡、图表、列表和筛选状态。
- 2
建立响应式规则
桌面保留三栏关系，窄屏压缩为顶部导航和单列内容。
- 3
实现并验证
创建页面文件，打开浏览器检查两个视口和控制台。
- 4
针对问题修改
修正移动端表格溢出和筛选按钮的选中状态。
最终结果
最终得到可运行页面，而不是静态复刻图
页面保留参考图的信息层级，加入可用的筛选状态，并为移动端重新组织导航和数据区域。
styles.css
桌面和移动端布局、颜色与组件状态
app.js
筛选交互与数据展示逻辑
verification.md
测试视口、已检查交互与剩余差异
这个示例说明了什么
截图只能提供可见状态，交互和隐藏状态仍需要目标说明。
移动端不应机械缩小桌面版，而应根据内容优先级重新排布。
浏览器验证能发现图片生成或代码静态审阅看不到的溢出和运行错误。
用你自己的截图开始
上传截图并说明需要保留的结构、交互和技术约束。