Skip to main content

Screenshot to code · restore dashboard from structure

Upload a dashboard screenshot, Qwen3.8-flash vision restores it as a single-file HTML with pure-CSS charts and verbatim numbers, zero external dependencies.

Upload a dashboard screenshot; the model restores it as a single-file webpage—charts in pure CSS, numbers verbatim.
Disclaimer: All content on this page is AI-generated, for reference only, and does not constitute any performance guarantee. Actual results and Credits consumption are subject to the console "Usage Details".
This walkthrough uses a self-built e-commerce daily-ops dashboard: the screenshot has 4 KPI cards, a 7-day GMV bar chart, a channel-share bar chart, and a TOP5 product table—64 numbers total. Ask qwen3.8-flash to copy all numbers verbatim, draw charts with pure CSS only (no chart library), size bars proportionally to values, and output a single-file HTML that opens directly in a browser. The material is self-built with every number known, so the output page can be checked side-by-side with the original. Call chain: qwen3.8-flash (dashboard screenshot base64 input → single-file HTML). Vision understanding, zero external dependencies.

Measured output

The restored page after both rounds:
Measured output · model-restored page
Measured output · model-restored page Click to try: Ops daily dashboard · restored output page

Example input

Example input · full dashboard screenshot fed to the model (self-built material, not from the web)
Example input · full dashboard screenshot fed to the model (self-built material, not from the web)

Step 1: upload screenshot and give restore requirements

Send the dashboard screenshot along with the prompt below to qwen3.8-flash: 
<image_url: base64 149 KB>
Restore this ops dashboard screenshot into HTML/CSS code. Requirements:
① All numbers, product names, SKU codes, dates: copy verbatim from the screenshot; do not fabricate;
② Bar chart and horizontal bar chart: draw with pure CSS; bar heights and bar lengths must be proportional to the values in the screenshot; do not introduce ECharts or any external dependency;
③ KPI card up/down deltas: keep screenshot colors (up=red, down=green); inventory status three-color tags must have correct semantic colors;
④ Layout: use Flex/Grid, responsive;
⑤ Output a single complete HTML file that can be opened directly in a browser.

Step 2: paste the output back, add button interaction

Round 1 only asked for "restore structure," so the "Export Report" button on the output page is static. Paste the previous HTML back, add only the interaction requirement (and write "everything else must not change" into the prompt): 
This is the complete HTML you produced last round from the ops dashboard screenshot. Now add one thing.

Problem: the "Export Report" button in the top-right doesn't respond when clicked.

Requirements:
① Add working interaction to "Export Report"; pure front-end mock, no external dependencies or network resources;
② On click, export the "Top 5 Products" table headers and all rows as CSV and trigger a browser download;
   filename should include the data date from the page header; CSV must have UTF-8 BOM to avoid Chinese garbling in Excel;
③ On click, also provide an in-page visible status feedback (e.g., button briefly changes to "exporting,"
   then a success toast that auto-dismisses after 2-3 seconds), because some browsers block downloads;
   as long as the feedback is shown, the user can confirm the button responded;
④ Except for the new code needed to implement the above interaction, all numbers, copy, tags,
   structure hierarchy, colors and spacing must not be changed—not a single character;
⑤ Still output only one complete HTML file that can be opened directly in a browser.

<Previous-round output pasted back with the prompt: 247 lines of HTML>

Notes

  • Consumption: This playbook uses vision understanding + text generation (qwen3.8-flash). The screenshot converts to image_tokens on the input side; larger/clearer images mean higher input cost. Output is a complete single-file HTML, so output-side consumption is higher than plain-text Q&A—normal.
  • Note: Layout is rewritten with Flex/Grid—structural-level restore, not pixel-perfect reproduction. Colors and spacing have minor differences from the original. For high-fidelity reproduction, use the design mockup as the source of truth.
  • Note: Before screenshot restoration, confirm you have the right to use the page's design and data. The material in this example is self-built.
Get Started
Billing
Token Plan
Model Playground
Clients and Developer Tools
Model Inference
Fine-tuning
Evaluation
Model Compression
Statistics and Monitoring
Model Data
Security and Compliance
Best Practices
Support
Changelog