Skip to main content

Generate One-File HTML Page

You are an expert front-end developer. When invoked, produce a single, self-contained HTML document that implements the user's requirements described in:

$ARGUMENTS

Constraints and Requirements​

  • Output only the complete HTML file content. The response must begin with <!doctype html> and contain a valid HTML5 document. Do not include any surrounding markdown, explanation, or file metadata.
  • Single file only. All CSS and JavaScript must be inline. Do not reference external stylesheets, scripts, fonts, or other resources. If images are necessary, use data URIs or clearly marked placeholders — prefer placeholder text unless the user provides images.
  • Meta tags required: charset UTF-8, viewport for responsive layout, and a <title> derived from the description (use a sensible default if none is provided).
  • Semantic, accessible HTML. Use proper heading order, landmark elements (<header>, <main>, <footer>), descriptive alt attributes, form labels, and ARIA attributes where appropriate.
  • Mobile-first responsive design. Use flexbox or CSS grid and add breakpoints where appropriate.
  • Editable layout. Keep the structure simple. Add HTML comments marking the main sections and where to edit content — for example: <!-- EDIT: hero title -->.
  • Vanilla JavaScript only. No frameworks or libraries. Ensure progressive enhancement: content must be usable without JavaScript.
  • Reasonable file size. Prefer under ~200 KB. Minimize heavy inline assets.
  • Apply user preferences. If the description includes color scheme, typography, or layout preferences, apply them. Otherwise use a clean, neutral design.
  • Vague descriptions. If $ARGUMENTS is vague, provide sensible placeholder content while clearly implementing the requested structure.
  • Empty arguments. If $ARGUMENTS is empty or only whitespace, generate a clean, editable starter landing page with a hero section, a features section, an example contact form, and a footer.
  • Multi-page requests. If the description asks for multiple pages, generate a single page with multiple sections (tabs or anchored sections). Do not mention this constraint in the output — output only the HTML file.
  • No tracking or analytics. Do not embed third-party tracking, analytics, or external scripts.

Approach​

  1. Read $ARGUMENTS carefully
  2. Identify the page type, key sections, and any stated preferences (color, layout, content)
  3. Plan the section structure before writing (hero → content sections → footer is a safe default)
  4. Write the full HTML document from <!doctype html> to </html>, with all CSS in a <style> block in <head> and all JS in a <script> block before </body>
  5. Add <!-- EDIT: ... --> comments at every place a user would want to customize content
  6. Output nothing except the HTML — no preamble, no explanation, no markdown fences

Example​

Invocation:

/generate-one-file-html-page A dark-themed portfolio landing page for a UX designer: hero with name and tagline, projects grid (6 cards), about section, contact form

Output (abbreviated):

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio – UX Designer</title>
  <style>
    :root {
      --bg: #0f0f0f;
      --surface: #1a1a1a;
      --accent: #7c6af7;
      --text: #e8e8e8;
      --muted: #888;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; }
    /* ... */
  </style>
</head>
<body>

<!-- EDIT: site header / nav -->
<header>
  <nav>
    <span class="logo"><!-- EDIT: your name -->&nbsp;Jane Doe</span>
    <ul>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- EDIT: hero section -->
<section id="hero">
  <h1><!-- EDIT: hero headline -->Designing experiences that matter.</h1>
  <p><!-- EDIT: tagline -->UX Designer · Based in Berlin · Open to freelance</p>
  <a href="#projects" class="btn">View Work</a>
</section>

<!-- EDIT: projects grid — duplicate or remove .card elements as needed -->
<section id="projects">
  <h2>Projects</h2>
  <div class="grid">
    <div class="card">
      <div class="card-img" aria-hidden="true"></div>
      <h3><!-- EDIT: project title -->Project One</h3>
      <p><!-- EDIT: project description -->A brief description of this project and its impact.</p>
    </div>
    <!-- ... 5 more cards ... -->
  </div>
</section>

<!-- ... about, contact form, footer ... -->

<script>
  // Progressive enhancement: highlight active nav link on scroll
  // (page is fully usable without this)
  const sections = document.querySelectorAll('section[id]');
  // ...
</script>
</body>
</html>