What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
You can give ChatGPT a screenshot as visual context, ask it to write HTML and CSS, and preview supported code blocks when the Preview control is available. For changes to a real project, Codex can use screenshots as design references or bug evidence, edit project files, and inspect the rendered result in a browser workflow. The controls available depend on your app, plan, workspace, and feature rollout.
Choose the right workflow
| Your goal | Start here | What to expect |
|---|---|---|
| Try an isolated HTML/CSS example | ChatGPT code preview | Ask for code, then select Preview if the option appears. |
| Change an existing website or app | Codex project workflow | Give Codex the screenshot and project context, then ask it to edit and inspect the result. |
| Review a local page visually | ChatGPT desktop browser or Codex browser workflow | Browser availability, access, and controls depend on platform and account settings. |
| Debug console, network, or page behavior | Codex developer mode, where configured | Controlled CDP access can expose deeper browser inspection and requires explicit approval for full access. |
ChatGPT’s code-block preview and Codex’s project browser workflow solve different problems: use the preview for a quick standalone result and Codex when the task involves files, an app, and repeated inspect-and-fix cycles.
![ChatGPT for Beginners Bible: [3 in 1] The Beginner-to-Pro Guide to Master Prompts, Automate Your Work, and Build Real-World AI Skills](https://m.media-amazon.com/images/I/410AudKr5TL._SL160_.jpg)
Attach a screenshot that gives ChatGPT useful context
OpenAI’s image inputs FAQ lists three ways to add an image: use the plus menu to add photos and files, drag and drop the image into the prompt, or paste a copied image. It lists PNG, JPEG, and non-animated GIF support and a 20 MB maximum per image. The number of images you can add may depend on file size and accompanying text.
- Capture the relevant area. Include the whole page region or component needed to understand the issue. Avoid tiny, blurry, or heavily cropped images when surrounding layout matters.
- Say what the image represents. Identify it as a design reference, a bug report, or the current state you want to recreate.
- Give implementation constraints. State the target viewport, responsive behavior, framework or plain HTML/CSS preference, and whether the answer should be a self-contained example or edits to an existing project.
- Describe the expected behavior. Point out what should happen when a user clicks, scrolls, or resizes, and name the visible mismatch if the screenshot is bug evidence.
A screenshot communicates appearance, not all hidden behavior. If a menu opens on hover, a field validates on submit, or a layout changes at a breakpoint, describe that behavior rather than expecting the image alone to reveal it.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Ask ChatGPT for HTML/CSS and preview the result
For a standalone prototype, ask ChatGPT to return a complete HTML/CSS example in a code block. Be explicit about the intended viewport, content, and interaction, and request a single file if you want a quick result that is easy to copy and run. A bounded request is easier to evaluate than “make it look better”; it does not guarantee an exact visual match.
When ChatGPT presents a supported code block, select Preview to view the result inside ChatGPT. OpenAI’s code-block guide says supported previews can include HTML pages, React components, SVG, Mermaid, and chart formats. The guide also notes that available actions vary by plan, device, workspace setting, model, and rollout; if Preview is absent, the feature may not be available in that conversation or surface.
- Attach your reference image, if you have one.
- Ask for the specific HTML/CSS output, viewport, and responsive rules you need.
- Look for Preview on the returned supported code block and select it if present.
- Compare the rendered page with the screenshot and request a focused change, such as adjusting a container width, spacing, or mobile breakpoint.
Preview is useful for a quick visual check, but do not treat it as proof that the page will behave identically in every browser or in your production environment. For a project that depends on local assets, build tools, or application state, use the actual project workflow.
Use Codex to edit and inspect an existing project
Codex is the better fit when the screenshot needs to guide changes to a repository rather than produce an isolated snippet. OpenAI’s Codex announcement says images can be used to share frontend design specs or explain UI bugs. OpenAI also describes a workflow in which Codex uses a browser to examine what it built, iterate, and attach a result screenshot.
Recommended Free Tools
- Open the relevant project in Codex. Identify the page or component and tell Codex which files or route matter if you know them.
- Provide the screenshot as context. State whether it is the desired design or a screenshot of the current bug. Include viewport dimensions when known.
- Request a bounded change. Specify the behavior or visual difference to address, and ask Codex to preserve unrelated project conventions and functionality.
- Ask it to inspect the rendered page. Where browser inspection is available, have Codex open the relevant route, compare the result against the reference, and capture a screenshot after the change.
- Review the result yourself. Check the relevant viewport and interaction, then give one or more specific follow-up corrections if needed.
Do not assume every Codex client, workspace, browser, or rollout exposes the same controls. The browser, permissions, and project setup affect what Codex can inspect.
Use browser annotations for targeted visual feedback
In the ChatGPT desktop app, the built-in browser can open a local page and provide an Annotation mode for selecting an area and leaving a comment. OpenAI’s browser guide says this browser is available on macOS and Windows, has browser state separate from your regular browser, and supports annotations. Availability of website access and features may depend on plan and workspace policy.
- Open the local page in the desktop app’s built-in browser, if available.
- Use Annotation mode to select the specific element or area that needs work.
- Leave a concrete comment, such as what is misaligned or what should happen at a particular width.
- Ask for the change, then inspect the updated page.
If the task needs your existing Chrome profile, signed-in session, tabs, or extensions, use the Codex Chrome extension rather than assuming the built-in browser shares that state. Before asking an agent to inspect a signed-in site, confirm which account and page are active.
Use developer mode for deeper browser debugging
For problems that cannot be explained by appearance alone, Codex developer mode can grant controlled access through the Chrome DevTools Protocol (CDP). The Codex browser documentation describes using it to inspect console output, network traffic, page state, and JavaScript performance. It requires configuration, and Codex asks for explicit approval before using full CDP access.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use this only when the additional evidence is relevant: for example, a page that fails to load, a script error, or an interaction that behaves differently from the screenshot. A visual mismatch by itself may be easier to fix with a screenshot and a focused annotation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What varies by account, platform, and region
- Image input: The image FAQ lists the accepted formats and size limit, but image availability can still depend on the product surface and account context.
- Preview: The code-block guide says supported previews and their controls vary by plan, device, workspace setting, model, and rollout.
- Desktop browser: The built-in browser described in the guide is for the ChatGPT desktop app on macOS and Windows, and may be affected by plan or workspace policy.
- Codex Sites: OpenAI’s Codex plan guide states that Sites is available on paid ChatGPT plans except Free and Go in supported regions, and is not currently available in the EEA, Switzerland, or UK. Workspace administrators control creation and public publishing. This eligibility can change, so check the current plan guide and workspace controls before relying on it.
Or skip the browser setup
If your goal is simply to capture a page as an image or PDF, ScreenshotNeo provides a screenshot API and MCP server for developers. A single request takes a URL and returns a PNG, JPEG, WebP, or PDF. Example using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for the API details. The reason to use it instead of setting up browser capture yourself is specific: it accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; bot checks, blank pages, failed loads, and cache hits are not billed. An MCP server lets AI agents use screenshot tools, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Troubleshooting
- The image will not attach: Check that it is PNG, JPEG, or non-animated GIF and no larger than the 20 MB per-image limit listed in the image FAQ. If the upload control is unavailable, check the product surface and account settings.
- Preview is missing: Preview is conditional, not guaranteed for every code block or conversation. Confirm the block is supported and check whether your plan, device, workspace settings, model, or rollout exposes the action.
- The preview does not match the target screenshot: Give ChatGPT the target viewport and a specific comparison, such as the content width or element position. Include relevant behavior that cannot be inferred from a static image.
- Codex cannot see the page you expect: Check which browser surface it is using. The desktop browser has separate state; use the Chrome extension when the task requires your existing Chrome profile, signed-in session, tabs, or extensions.
- Codex cannot inspect browser internals: CDP access is a configured developer-mode workflow, not an automatic capability. Check configuration and respond to the explicit approval prompt if full access is appropriate.
- A publishing or Sites control is unavailable: Check current plan eligibility, supported region, and workspace administrator policy rather than assuming the feature is enabled for every account.
Frequently Asked Questions
Can I paste a screenshot into ChatGPT instead of uploading a file?
Yes. The image-input FAQ lists pasting a copied image as one of the supported ways to provide an image.
Does Codex automatically publish a site after editing it?
Not necessarily. Sites eligibility and public publishing controls depend on plan, region, and workspace administrator settings.
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.
