The fastest path from a mockup to a real build
You don't always have access to the original design files. Maybe a client sent JPEGs. Maybe the design lives in a deck. Maybe you sketched it in Photoshop or scanned a whiteboard. Wyvid accepts any flat image — PNG, JPEG, even PDF screenshots — and produces a working Bootstrap 5 sitebuild from it.
What you get
Each upload becomes a multi-page site with a sensible structure: a header, sections that match the layout you provided, footers, and any forms or CTAs visible in the design. The output uses the actual Bootstrap 5 grid (rows, columns, breakpoints) and standard components (navbar, cards, buttons, accordions) where they fit — not a soup of divs with hand-rolled classes.
- Semantic HTML — proper headings, landmarks, alt-text scaffolding, and accessible form labels.
- Responsive by default — the desktop layout you uploaded plus tablet and mobile breakpoints derived from it.
- Asset extraction — recognizable photographs and graphic elements are pulled out as separate image files and referenced cleanly.
- Browser preview — a hosted URL you can open immediately, no local setup.
How it works under the hood
You upload your screenshots through the dashboard. Each file is validated, queued, and picked up by a worker that runs a focused agent over the visual input. The agent has access only to the assets you uploaded — no other projects, no other users — and produces a self-contained build folder. When it's done, the build is zipped, stored, and a hosted preview is published for you.
Best results when…
- You upload one screenshot per page (homepage, about, pricing, contact, etc.).
- Screenshots are 1440px wide or larger so layout details are crisp.
- You include any second-state visuals (mobile, modal-open, hover) as separate uploads — Wyvid can use them to refine the build.
And if it's not perfect?
It rarely is on the first generation. That's what the chat iteration interface is for: open the page that needs work, describe the change you want in plain English ("Make this section full-width, use a darker green for the CTA, add a third feature card"), and Wyvid regenerates the affected page.