Figment.so

Build One Static Landing Page With ChatGPT

Published September 23, 2026 • Figment editorial team

Ask ChatGPT for a plain index.html and styles.css from an approved brief, then inspect both files and serve them locally. The result is a portable one-page draft, not a published website. This task differs from writing the brief: here you produce files that a browser can open. It also differs from editing an existing site, where an existing codebase sets the constraints.

What brief makes this task small enough?

Use one visitor goal and one main action. In this fictional example, Northline Bicycle Repair lists flat repair and brake adjustment in Portland, and asks visitors to send an email. The name and services are example facts, not claims about a real shop. Its prices, hours, reviews, and photos are unknown. The contact address hello@example.com is a placeholder. Do not publish it unchanged.

The page needs a heading, a short service list, a contact link, and a footer. It does not need a booking form, analytics, a CMS, or JavaScript. If your real brief needs those functions, this simple file pair is not enough. Confirm that every image and line of copy is yours to use before putting it on a public host.

What prompt should you give ChatGPT?

OpenAI documents that ChatGPT can show, edit, and sometimes preview HTML code blocks. The controls depend on the account and rollout. A preview is convenient, but it does not replace a local browser check. Request file names and complete contents so you can put the files in a folder even when no download control appears.

Build one static landing page from this approved brief: [paste brief]. Output exactly two complete files named index.html and styles.css. Use semantic HTML with header, nav, main, and footer. Link the CSS with a relative path. Put only the approved services in the copy. Use a mailto: contact link. Do not add a form, JavaScript, remote fonts, external image URLs, testimonials, ratings, prices, hours, or guarantees. Make the content readable at a narrow phone width. After the files, list every fact you used and mark any placeholder. Do not say the page was tested.

Keep each file's contents in the matching file. The final folder should be:

landing-page/
  index.html
  styles.css

Do not copy the Markdown code fences into the files. If ChatGPT returns a third file, a framework, or a build command, ask it to revise to the two-file brief. If it invents a result such as "trusted by hundreds," remove it before the next review. The prompt limits output, but your review remains the factual gate.

What does a complete two-file example look like?

This complete example implements the fictional brief. It is an editorial fixture, not claimed ChatGPT output. Put each block in the named file. The blocks below are the complete files.

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Northline Bicycle Repair | Portland</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <a class="brand" href="#main">Northline Bicycle Repair</a>
    <nav aria-label="Main navigation">
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <main id="main">
    <h1>Bicycle repair in Portland</h1>
    <p>Flat repair and brake adjustment.</p>
    <section id="services" aria-labelledby="services-title">
      <h2 id="services-title">Services</h2>
      <ul><li>Flat repair</li><li>Brake adjustment</li></ul>
    </section>
    <section id="contact" aria-labelledby="contact-title">
      <h2 id="contact-title">Contact</h2>
      <a href="mailto:hello@example.com">Email the shop</a>
    </section>
  </main>
  <footer>Northline Bicycle Repair</footer>
</body>
</html>

styles.css:

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #17232a; background: #fff; font: 1rem/1.5 Arial, sans-serif; }
a { color: #075e68; }
a:focus-visible { outline: 3px solid #c94b27; outline-offset: 3px; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid #c8d5d7; }
.brand { font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
main { width: min(100%, 64rem); margin: auto; padding: 2rem 1rem; }
h1 { font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.15; }
section { margin-top: 2rem; }
footer { padding: 1rem; border-top: 1px solid #c8d5d7; }

Replace the placeholder email before a real launch. The CSS path is relative, so it also loads if the folder is hosted below a prefix such as /landing/. The viewport tag and wrapping rules do different jobs: the first sets the device viewport, while the CSS prevents fixed-width content from forcing a wide page.

How do you check the files locally?

In a terminal, change into the folder that contains index.html. Run python3 -m http.server 8000, then open http://localhost:8000/. MDN's local-server guide documents this method. If port 8000 is in use, choose another port and use that port in the URL. Stop the server with Ctrl+C after the review.

At a desktop width and a narrow phone width, check that the heading, services, and email link remain readable without horizontal scrolling. Activate the link and confirm that it targets the intended address. In the browser's developer tools, check that styles.css loads without a 404. Compare every statement with the accepted brief. If a fact is missing or unsupported, revise the files and check again. An HTML parser can detect malformed markup, but it cannot confirm that the contact route works or that the page looks right.

The two files above matched the local fixture byte for byte and passed a headless Chromium check at 320 and 1440 px on 2026-09-23. The check covered rendering, navigation anchors, CSS loading, and horizontal overflow; see our writer evidence record for the command and limits. We did not run ChatGPT to generate this page, send an email, or deploy it. Your own page still needs its own browser review.

When is the page ready to leave your computer?

Only after you replace placeholders, confirm rights to assets and copy, inspect both widths, and keep a copy of the tested files. Then follow the plain-file publishing guide. A local preview is not a public URL.

If you instead have an existing site and want an AI-assisted change plan, use Figment's live prompt-preparation tool. Check /ai-editor for editor access status. Figment does not currently build a new site from these arbitrary files or deploy them through that editor; its editing path uses a separate imported static copy.

Sources and access date

OpenAI, writing blocks and code blocks, accessed 2026-09-23. Code preview availability varies.
MDN, set up a local testing server, accessed 2026-09-23. Supports the local HTTP preview command.

Figment.so