# Brutalist landing page for an API platform

> A monochrome landing page for GRIDFORGE, a made-up API platform: oversized type, visible grid outlines, a cursor that reports grid coordinates, and a terminal typing an API call behind the hero. One of OpenAI's GPT-5.2 examples, made from one prompt.

- Kind: Website
- Live website: https://gpt5-coding-examples.vercel.app/brutalist-dev-landing-page-5.2
- Page: https://meetreference.com/v/brutalist-developer-platform-landing/
- Ready-to-use agent handoff: https://meetreference.com/v/brutalist-developer-platform-landing/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/brutalist-developer-platform-landing/prompt.txt
- Authorship: Not stated
- Made with: Not stated
- Model: GPT-5.2
- Built with: HTML and CSS, Plain JavaScript
- Style: Landing pages; brutalist, monochrome, grid, oversized type, terminal, developer platform, single html file
- Shared by OpenAI in GitHub, Dec 11, 2025: https://github.com/openai/gpt-5-coding-examples/blob/main/examples/brutalist-dev-landing-page-5.2.yaml
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

## Recreating this website

These are the creator's published instructions, unedited.

To adapt it: Change "a brutalist developer platform landing page" to your own product, and the style line ("monochrome, oversized type, strict 12-col grid, visible outlines, sharp corners") to another look. Keep the section lines (Hero, Proof, Features, Pricing, Footer) and rewrite what goes in each.

## Prompt

```text
Title: Brutalist Dev Platform Landing
Prompt:
  Build a single HTML file for a brutalist developer platform landing page.
  Style: monochrome, oversized type, strict 12-col grid, visible outlines, sharp corners; cursor shows grid coordinates.
  Hero: stark headline, one-line value prop, two CTAs (“Start free”, “Docs”), background = live terminal demo typing a sample API call.
  Proof: SVG logo wall + light/dark invert toggle.
  Features: 3 code-snippet cards with tabs (JS/Python/cURL), copy-to-clipboard + tooltip.
  Pricing: 3-tier table with sticky header, CTAs open signup modal.
  Footer: keyboard-navigable site map + social links; only SVGs; responsive & fast.
```

## What it looks like

Written by Reference from the recording frames, not by the creator.

A white, wireframe-like page for GRIDFORGE where every section sits in thin black outlines on a faint grid, from the hero headline down to a pricing table and a boxed footer site map.

- Color: White with pale grey grid lines, black type and outlines; the only fills are black buttons and black tab chips.
- Type: Heavy all-caps grotesque headlines ("SHIP AN API THAT FEELS LIKE A TERMINAL.", "THREE PRIMITIVES. NO MYSTERY."), small monospace labels and code, and a tiny grid-coordinate readout in the lower right corner.
- Framing: 16:10. A left-aligned hero with a boxed "Brutalist contract" checklist at top right, then full-width bands split by rules: a two-row wall of outlined logo boxes, three code cards side by side, a three-column table, and a footer of outlined boxes.
- Structure: Hero with Start free and Docs buttons over a latency strip, the "Used in places that hate surprises" logo wall with an invert toggle, code cards for Events, Auth, and Edge KV with JS, Python, and cURL tabs, the "Hard limits. Sticky header. No footnotes." pricing table, and the footer site map with social links.

Storyboard, nine frames spread across the recording: https://meetreference.com/media/brutalist-developer-platform-landing/storyboard.webp

- Frame 1 at 1.3s: https://meetreference.com/media/brutalist-developer-platform-landing/f1.webp
- Frame 2 at 3.9s: https://meetreference.com/media/brutalist-developer-platform-landing/f2.webp
- Frame 3 at 6.4s: https://meetreference.com/media/brutalist-developer-platform-landing/f3.webp
- Frame 4 at 9.0s: https://meetreference.com/media/brutalist-developer-platform-landing/f4.webp
- Frame 5 at 11.6s: https://meetreference.com/media/brutalist-developer-platform-landing/f5.webp
- Frame 6 at 14.2s: https://meetreference.com/media/brutalist-developer-platform-landing/f6.webp
- Frame 7 at 16.8s: https://meetreference.com/media/brutalist-developer-platform-landing/f7.webp
- Frame 8 at 19.3s: https://meetreference.com/media/brutalist-developer-platform-landing/f8.webp
- Frame 9 at 21.9s: https://meetreference.com/media/brutalist-developer-platform-landing/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Notes: OpenAI's README says every demo in the collection was generated from a single GPT-5 or GPT-5.2 prompt with no code written by hand, and the gallery calls each one the zero-shot prompt that created the code. It doesn't say which tool ran it; the README suggests Codex CLI or ChatGPT. The same prompt run on GPT-5 is also in the gallery.

> generated entirely in a single GPT-5 or GPT-5.2 prompt, without writing any code by hand
> (OpenAI)

## Links

- Visit site: https://gpt5-coding-examples.vercel.app/brutalist-dev-landing-page-5.2
- Original post: https://github.com/openai/gpt-5-coding-examples/blob/main/examples/brutalist-dev-landing-page-5.2.yaml
- Same prompt on GPT-5: https://gpt5-coding-examples.vercel.app/brutalist-dev-landing-page
- Source code: https://github.com/openai/gpt-5-coding-examples/tree/main/apps/brutalist-dev-landing-page-5.2
