GPT-6 Astra for web design

GPT-6 Astra shipped on 3 September 2026 as OpenAI's flagship, and it will build a complete responsive page from a paragraph of instruction. Accessible markup, a working mobile nav, clamp() type sizing, a prefers-reduced-motion branch, none of it asked for.

That is also the problem. A model this capable executes a vague brief beautifully, and a beautifully executed vague brief is the median page with better code underneath it. The output quality is set by how many decisions arrived with the prompt.

The short call: Astra is worth reaching for if you already work in ChatGPT, it is level with the current Claude and Gemini flagships on design work, and the part that changes your page is the specification. Thanor writes those.

What shipped on 3 September#

Astra sits at the top of OpenAI's current lineup, with GPT-6 Sol and GPT-6 Luna released below it on 22 September. For page work the tier difference is holding capacity rather than visual judgement: how many explicit constraints survive to the bottom of a long file.

The floor moved recently, which is easy to miss. A year ago a generated page needed repair before anybody saw it: a nav breaking at 768px, focus states missing from custom controls, transforms ignoring the accessibility query. Astra gets all of that right first time, so code quality is no longer a reason to pick one flagship over another.

What it does unprompted, on a plain request for a landing page:

• A semantic document with one h1, headings in order, and labelled controls.
• A responsive grid with sensible breakpoints and no horizontal overflow.
• Type sized with clamp() between a floor and a ceiling.
• A reduced-motion query that actually disables the transforms.

What it supplies when you do not: Inter, a neutral sitting on the grey axis, an 8px radius on every corner, and a fade plus translateY(20px) at roughly 300ms on every section alike. Those four values are the entire look of a generated page, and they arrive identically from every model in the category.

GPT Astra is not guessing badly there. It is filling an empty slot from the centre of the distribution, which is the correct behaviour for an unfilled slot.

The consequence is a strange one for anybody upgrading. A stronger model makes the median page better built and no less median, so the visible improvement from a launch arrives only on the parts you specified. Everything you left open moves sideways at best.

The brief that makes Astra return a designed page#

Six values, and the page changes character completely.

The accent row does the most work per character typed. "One element per section may carry #D8492B" is eleven words that stop a page looking like a swatch demo, and no model has ever volunteered that constraint on its own.

Astra follows a stated curve exactly. Give it cubic-bezier(0.22, 1, 0.36, 1) at 620ms with a 90ms stagger capped at four items and that is what lands in the CSS, which is the whole reason naming values beats describing moods.

The two typefaces row is the one people skip and then regret. One serif display against one grotesque for interface text gives a page two registers to work with, and the contrast is doing structural work that a single sans at four weights cannot do at any size. Name the fallback stack too, or the page renders correctly for you and not for a visitor.

Section order, written out#

Astra will invent a page skeleton if you leave the order open, and the skeleton it invents is the one everybody else gets: hero, three cards, testimonial, call to action.

Hand it seven named blocks instead:

1. A full-bleed statement. One line, no subheading, no button. The line carries the argument.
2. A proof strip. Three real numbers or three names, set at 21px, no logos in a grey row.
3. The argument in two columns, asymmetric at 7/5, text left, one image right.
4. One signature moment. A single mechanism, described as physics: a mark that draws its own stroke once over 900ms, a counter that settles on cubic-bezier(0.32, 0.72, 0, 1).
5. Objections, as an accordion. Four questions, the honest ones.
6. Price, plain. No comparison table, no "most popular" badge.
7. The close. One line and one button.

Three of those blocks contradict the default page, which is the point. A specified order is the cheapest way to make output from a flagship stop resembling output from a flagship.

Block one does the most work. A single line at the top with no subheading, no button and no image forces the copy to carry the argument, and Astra will write that line well if you tell it the line is the entire viewport.

Where Astra fills a gap you left#

Four gaps get filled the same way every time, and each closes with one sentence in the prompt.

1. Depth. With no surface stack named, a gradient arrives to make the emptiness look intentional. State #0B0B0F page, #14141A raised, #1C1C24 overlay and borders at 1px solid rgba(242,239,233,0.08), and it never appears.
2. Motion budget. Ask for polish and Astra animates everything, because more movement reads as more effort. Write the budget as a limit: first viewport only, one signature moment, nothing else moves on scroll.
3. Restraint on type. Left open, a page gets four weights and three sizes within a few pixels of each other. Name a ratio and a step count instead: 17px base, 1.26 ratio, five steps, two weights, -0.025em on the top step alone.
4. Iconography. Left open, a page grows 20px outline icons in every card, aligned to nothing and carrying a vocabulary you never chose. "No icon set" is three words.

The signature moment in item two is worth writing as a mechanism rather than a mood. A wordmark that draws its own stroke once over 900ms, a counter that settles on cubic-bezier(0.32, 0.72, 0, 1), a card that lifts 3px on hover over 180ms. Ask for "delightful micro-interactions" and four of them arrive at once, competing for the same attention.

Each of those is one sentence, and each closes a slot that would otherwise be filled from the median. Write them once and they work in every model, which is why the hub article treats the brief as the durable asset and the model name as the disposable part.

The verdict on GPT-6 Astra#

Use it if ChatGPT is where you already work. GPT-6 Astra is a genuine flagship, it writes clean accessible frontend code unprompted, and on a fully specified brief it lands level with the current Claude and Gemini tops.

GPT-6 Sol and GPT-6 Luna, both from 22 September, are the tiers to send a single specified section to. Nothing about the section comes back worse, because nothing about a stated hex value or a stated duration requires a flagship to reproduce.

What to expect, stated flatly:

• With a paragraph of adjectives: the category median, competently built.
• With six named values: a page with a point of view.
• With values plus a section order plus three refusals: something a client cannot place, which is the actual goal.

The gap between the first and third of those is wider than any gap between two models released this month, which makes the brief the thing to invest in and the model id the thing to swap out. Put Astra next to Claude on the same brief and the result confirms it.

Thanor sells the specification as finished art direction per design, in exact values, covering UI, app and SaaS interfaces, page sections and animated backgrounds, for personal and client work: $89 for three months, $189 a year, $299 once, and free accounts open the designs marked free.

Browse the Thanor library, take one free design, and paste it into Astra tonight to see how much of the page was never the model's decision.