Short answer: attach a clear screenshot to ChatGPT or Codex, describe exactly what the image represents and what should change, then ask for bounded HTML/CSS. In ChatGPT, request a supported code block and select Preview when that action appears. In Codex, provide the image as frontend design or bug context, let it edit the project, open the result in a browser, and iterate from a fresh screenshot. Controls vary by app, plan, workspace policy, device, model and rollout, so a missing button is not necessarily an error.
Choose the workflow that matches the job
| Need | Use | What you do |
|---|---|---|
| One-page mockup or isolated example | ChatGPT code preview | Attach an image, request a self-contained HTML/CSS block, select Preview if available, and ask for focused revisions. |
| Changes to an existing frontend | Codex project workflow | Give Codex the screenshot as design or bug evidence, have it edit the relevant files, inspect the page in a browser, and repeat. |
| Signed-in tabs, your extensions or current Chrome profile | Codex Chrome extension | Use the extension when the task depends on the active Chrome session rather than an isolated browser. |
ChatGPT’s image-input FAQ lists PNG, JPEG and non-animated GIF files, with a 20 MB limit per image. The number of images you can send also depends on image size and the accompanying text. Preview actions and browser tools are conditional features, not universal promises.
Prepare a screenshot that an AI can use
- Capture the complete relevant region. Include the state that matters: navigation, form errors, spacing, responsive breakpoint or modal. Crop unrelated material, but do not crop away context such as the viewport edge.
- Use a supported file. Export PNG or JPEG for interface work; use a non-animated GIF only when that representation is useful. Keep each image below 20 MB.
- State the viewport and intent. Tell the model whether this is a design reference, a bug report or a page to recreate. Include approximate viewport width and height, device pixel ratio when known, expected behavior, and what must not change.
- Describe visual evidence, not guesses. Point to the exact area: “the button is 16 px below the input in the screenshot but 8 px in the render.” Unclear images can produce less accurate interpretations.
Attach it in ChatGPT
Use the plus menu to add photos or files, drag the image into the prompt, or paste a copied image. Add the image before the request so the model can connect your instructions to the visual context.
Attach it in Codex
Provide the screenshot as frontend design context or evidence of a UI bug. Codex can use images to understand a design, change the project files, inspect what it built in a browser and attach a resulting screenshot. Appshots may also attach an app window and available text, depending on the client.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Write a bounded request
A precise request gives the model a testable target. Include:
- the files or component to change (or ask for a single HTML file);
- the target viewport and responsive breakpoints;
- semantic and accessibility requirements;
- allowed technologies and whether external assets are permitted;
- the interaction that must work (for example, opening a menu or showing validation);
- what counts as success and what should remain untouched.
For a recreation, use a prompt such as:
Recreate the attached desktop screenshot as one self-contained HTML file. Use semantic HTML and plain CSS, no external assets, and a 1440x900 viewport. Match the spacing, type scale, colors, borders and button states. Make the layout responsive below 768px. Return only the complete file, then list any visual assumptions.For a bug report:
The attached image shows the intended 390px mobile state. In src/components/Checkout.tsx, fix the horizontal overflow without changing copy or desktop behavior. Check keyboard focus, error text and the 768px breakpoint. Explain the files changed and how you verified the result.These prompts guide the work; they do not guarantee pixel-perfect output. Treat the first render as an iteration, not a final measurement.
Render HTML/CSS inside ChatGPT
- Ask for HTML/CSS in a supported code block. A single-file example is easiest to preview and share.
- When the code block offers Preview, select it to view the rendered page inside ChatGPT.
- Compare the preview with the attached reference. Name one or two concrete differences per revision rather than asking for “make it better.”
- Request a complete replacement file or a clearly scoped diff, depending on whether you are testing an isolated example or integrating into a project.
Official code-block guidance says previews can include HTML, React components, SVG, Mermaid and chart formats, but available actions vary by plan, device, workspace setting, model and rollout. If Preview is absent, copy the code into a local file and open it in your browser; the HTML itself is still usable.
Use a local render when Preview is unavailable
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prototype</title>
<style>/* paste the generated CSS here */</style>
</head>
<body>
<!-- paste the generated HTML here -->
</body>
</html>Save it as index.html, open it locally, and capture the same viewport used in the reference. For a project, use its normal development server so routing, fonts and JavaScript behave as they will in production.
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
Use Codex for project-level iteration
- Give it context. Attach the screenshot and identify the route, component and reproduction steps. Mention whether the image is the desired design or the faulty result.
- Ask for a minimal change. Tell Codex which files it may edit and request that it preserve existing APIs, content and unrelated styles.
- Run the project. Have Codex start the documented development command or use your normal local server. Confirm the exact URL and viewport.
- Inspect in a browser. Ask it to check layout, console errors, network failures and interaction states, then attach a fresh screenshot.
- Annotate a specific defect where supported. In the ChatGPT desktop app’s built-in browser, Annotation mode lets you select an area and leave a targeted comment. Ask for the change, then review the updated page.
- Repeat with a short acceptance list. Check desktop, mobile, keyboard focus, loading and error states before merging.
Select the right browser surface
The built-in browser in the ChatGPT desktop app has separate browser state and is available on macOS and Windows. Use it when an isolated session is desirable. Use the Codex Chrome extension when the task needs your current Chrome profile, signed-in session, open tabs or extensions. Before exposing account data, verify which account and browser state are active.
Escalate to developer mode only for deep debugging
Developer mode can give Codex controlled CDP access to console output, network traffic, page state and JavaScript performance. It requires configuration, and Codex asks for explicit approval before full CDP access. Start with ordinary browser inspection; enable this mode only when a console, request or runtime-state problem cannot be explained visually.
Make screenshot feedback measurable
- Fix geometry first: viewport, container width, grid columns, gaps and overflow.
- Then typography: font family, size, weight, line height and wrapping.
- Then surface details: color, border, radius, shadow and icon alignment.
- Finally behavior: hover/focus states, menus, validation, loading and responsive transitions.
Ask for computed values or CSS variables when a difference is subtle. Compare at the same viewport and zoom; otherwise a correct layout can appear wrong. For images that load lazily, wait until the page is stable before capturing. If fonts or assets are remote, record whether the comparison was made before or after they finished loading.
Common failures and fixes
The image will not upload
Convert it to PNG or JPEG, remove animation, reduce it below 20 MB, and attach fewer or smaller images. State the missing context in text if the UI still rejects the file.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
Preview is missing
Preview is conditional. Ask for a complete HTML file, then open it locally. Check the current client, plan, workspace setting and model rather than assuming the code is invalid.
The output looks close but not right
Supply the exact viewport, a tighter crop and two measurable corrections. Ask the model to change only the named selectors and to explain assumptions about fonts, assets or unavailable interactions.
Codex edits the wrong area
Name the route and component, include reproduction steps, and set an explicit file boundary. Ask for a diff before broad refactoring.
The browser cannot reach the page
Confirm the development server is running, the URL is reachable from the selected browser, and required environment variables are present. A separate built-in browser session will not automatically share your local Chrome cookies or tabs.
Recommended Free Tools
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
Visual inspection misses a runtime bug
Ask Codex to inspect console and network output. If that is insufficient, configure developer mode and approve CDP access deliberately; do not paste secrets into prompts or expose authenticated responses unnecessarily.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request returns PNG, JPEG, WebP or PDF, so you can capture a URL without configuring a local browser. It removes cookie-consent banners, newsletter popups and chat widgets before the shot. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
See the parameter reference in the ScreenshotNeo documentation. This call captures Stripe as a WebP file:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);For generated pages, ScreenshotNeo supports HTML/CSS to image, custom JavaScript and CSS, selector capture, full-page lazy-image loading, device presets, arbitrary viewports, retina scale, dark mode, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification. PDF options include paper size, margins, landscape and page ranges. The parameter names used by other screenshot APIs also work, which can simplify migration.
Free tools Windows power users keep installed
One-click scans. No signup required.
The Free plan includes 1,000 shots per month without a card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000. Yearly billing provides two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to start.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Cost, reliability and privacy considerations
For ChatGPT and Codex, availability and controls can change with plan, platform, region, workspace policy and rollout. The Codex plan guide describes Sites as available on paid plans except Free and Go in supported regions, while currently excluding the EEA, Switzerland and UK; verify eligibility before relying on it. Keep private screenshots and signed-in browser sessions within your organization’s policy. Redact tokens, personal data and customer information before uploading.
For repeatable comparisons, pin the viewport, wait condition, URL state, fonts and data. Record whether a screenshot came from Preview, a local browser or an automated API; those environments can differ. ScreenshotNeo’s verdict and billing headers help distinguish a clean capture from a failed or non-billable response.
Frequently Asked Questions
Can ChatGPT read a screenshot pasted directly into a prompt?
Yes. The documented methods are the plus menu, drag-and-drop and pasting a copied image, using PNG, JPEG or non-animated GIF files within the stated per-image limit.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsDoes Codex automatically use my Chrome login?
Not in every workflow. The built-in browser has separate state; use the Codex Chrome extension when the current Chrome profile, tabs, extensions or sign-in are required.
Should I ask for React or a single HTML file first?
Use a single file to test an isolated visual idea quickly. Use the project’s existing framework when the screenshot represents a real route whose state, components and build process must be preserved.
How can I make a screenshot comparison reproducible?
Keep the URL state, viewport, zoom, fonts, wait condition and capture environment constant, and note whether the page was rendered in ChatGPT Preview, a local browser or an API.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
