# Screenshot to HTML and CSS > Turn a screenshot into responsive HTML and CSS with an evidence-first workflow, a runnable layout example and a copyable AI implementation brief. Canonical page: https://sitepeel.dev/guides/screenshot-to-html-css/ To turn a screenshot into HTML and CSS, identify the content structure, record what you can observe and build a flexible layout. Use the live page to verify fonts and spacing when it is available. A screenshot cannot reveal hidden states, semantic markup or the original source code, so document what you must infer. Published: 2026-09-20 Tool used in this guide: [HTML & CSS extractor](https://sitepeel.dev/html-css-extractor/index.md) ## Extract the structure before asking for code Start by listing the visible regions: header, hero, repeated cards, supporting section and footer. Read the actual text and identify which items are links, buttons or form fields. Mark anything too small or cropped to read instead of inventing copy. Record the screenshot dimensions and whether it represents a whole page or a crop. A 1440-pixel image may have been resized after capture, so do not assume every image pixel equals one CSS pixel. Treat exact measurements as uncertain until you can compare them with the live page. Choose one section to implement first. Getting its hierarchy and spacing right provides a pattern for the rest of the page and makes feedback more specific than asking for an entire site in one pass. ## Add real observations when the live page exists Inspect the selected element and its parent to check fonts, colors, width and layout rules. Sitepeel’s Pick element can collect a rendered HTML/CSS reference, while Design MD can document visual observations. Keep the screenshot as the visual target and use the collected values as supporting evidence. If only the image exists, label font choices and breakpoints as proposed decisions. Ask for the original logo or illustration instead of recreating a misleading substitute. Work with assets you are permitted to use. - [Collect the live element’s HTML and CSS](https://sitepeel.dev/html-css-extractor/index.md) - [Understand which evidence each reference format supplies](https://sitepeel.dev/guides/screenshot-html-design-md-for-ai/index.md) ## Build relationships instead of absolute coordinates Use document flow, grid or flex layout for ordinary sections. Define the content width, padding and gaps so the structure survives different text lengths. Absolute positioning is useful for intentional overlays, but positioning every paragraph by screenshot coordinates makes the page fragile. The downloadable HTML below is an original two-column reference layout, not code extracted from someone else’s screenshot. Open it in a browser, resize it and replace the copy. It demonstrates a content-driven stack at narrow widths and a working link to the details section. The values are illustrative design choices. Replace them with reviewed values from your brief; do not describe them as measured properties of your source image. Example: responsive-reference-example.html ``` Responsive reference example

Make room for your next idea.

A small reference layout with real text, flexible columns and a clear next step.

Explore the example

Build on the structure

Replace these example choices with your own reviewed content and design values.

``` ## Give an AI assistant a bounded implementation brief Specify the target framework, the section to build and the evidence it may use. Ask the assistant to preserve real content, use semantic controls and list missing information. Request one small implementation you can run and review. Avoid a prompt that demands an exact clone without supplying behavior or assets. That encourages confident guesses. A useful first result can be visually close while still clearly listing the parts that require a decision. Example: screenshot-implementation-prompt.txt ``` Implement the hero section shown in the attached screenshot in [framework]. Evidence: - Screenshot size and capture viewport: [known values or unknown]. - Verified design notes: [attach notes or DESIGN.md]. - Approved copy and assets: [provide them]. Use semantic HTML and a flexible layout. At narrow widths, keep the content readable and preserve its logical order. Do not invent customer logos, testimonials or interaction behavior. First list unclear details. Then implement the section and explain the chosen layout rules. Separate measured values from assumptions. Include the exact steps to preview it and a checklist for visual and keyboard review. ``` ## Compare the result in the same conditions Render the implementation at the reference width and wait for fonts and images. Compare the largest relationships first: container edges, column proportions, heading wrapping and section spacing. Fix one cause before compensating with several unrelated margins. Then test a narrow width, a longer heading and keyboard navigation. Verify every link and button. A screenshot can show a beautiful form without proving that its labels, validation or submission work. Keep a short difference log with “verified,” “intentional change” and “unresolved.” This prevents an approximation from silently becoming the source of truth for later pages. - [Run the responsive and interaction checklist](https://sitepeel.dev/guides/responsive-website-testing-checklist/index.md) ## Questions and answers ### Can a screenshot reveal the original HTML and CSS? No. It records rendered pixels. An implementation reconstructed from it uses inferred structure unless you also have access to the live page or source project. ### Why does the generated page only match at one width? The implementation may have copied fixed coordinates without preserving layout relationships. Review container sizing, grid or flex behavior, long text and narrow-screen ordering. ### Does this guide include working example code? Yes. Download the standalone HTML example, open it in a browser and resize it. It is an original illustrative layout, not a claim to reproduce your screenshot. ## Further reading - [Chrome DevTools: inspect HTML, CSS and runtime behavior](https://developer.chrome.com/docs/devtools/overview/) - [MDN: responsive web design](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design) ## Related pages - [HTML & CSS extractor](https://sitepeel.dev/html-css-extractor/index.md): Pick a website element and inspect its HTML and CSS. Preview, copy or save a button, card or section with Sitepeel’s browser tools. - [Choose the right AI design reference](https://sitepeel.dev/guides/screenshot-html-design-md-for-ai/index.md): Choose between screenshots, HTML and DESIGN.md when rebuilding a website with AI. Learn what each reference reveals and how to combine them. - [Responsive website testing](https://sitepeel.dev/guides/responsive-website-testing-checklist/index.md): Test responsive layouts, menus, forms, long content and zoom with a practical checklist. Includes a read-only overflow diagnostic and bug-report template.