index.html
Page structure and accessibility markup
All examples
Example workflow · Page building
Rebuild a responsive product landing page from a desktop screenshot
This example shows how Flowmint turns one desktop reference into a working page and adds sensible responsive behavior without a separate mobile screenshot.
This is a product capability example, not a customer project or performance claim.
Customer overview
Active accounts
1,284
30 days
+18%
Activation
42
At risk
8.6
Health
Weekly activity
Acme renewed annual plan
Northwind invited 12 members
The request
“Rebuild dashboard-reference.png. Preserve the sidebar, metric area, and activity list. Use top navigation on mobile, make filters interactive, and verify 390px and 1440px viewports.”
Source material
dashboard-reference.png
A 1440 × 980 desktop interface screenshot
brand-notes.md
Brand colors, type preferences, and button copy
What the agent did
- 1
Decompose the interface
Identify navigation, metrics, charts, lists, and filter states.
- 2
Define responsive rules
Keep the desktop hierarchy and reorganize narrow screens into one column.
- 3
Implement and verify
Create the files and inspect both viewports and the browser console.
- 4
Fix observed issues
Resolve mobile table overflow and filter selection behavior.
Result
The result is a working page, not a static reproduction
The page preserves the reference hierarchy, adds usable filter states, and reorganizes navigation and data for mobile.
styles.css
Desktop and mobile layouts, colors, and component states
app.js
Filter interactions and data display logic
verification.md
Tested viewports, checked interactions, and remaining differences
What this example demonstrates
A screenshot shows only visible states; behavior still needs a clear goal.
Mobile should reorganize priorities instead of mechanically shrinking desktop.
Browser verification catches overflow and runtime errors that static review misses.
Start with your own screenshot
Upload the reference and describe the required structure, interactions, and technical constraints.