How We Design Websites With GPT-6 Astra: Our Claude-to-Astra-to-v0 Method

Key takeaways

• GPT-6 Astra is OpenAI's model. Anyone with the right ChatGPT plan can prompt it. The edge is the method around it.[1]
• Claude runs a structured intake first: person, pain, promise, primary action. Then it sets three design dials and writes a paste-ready Astra prompt with 3–5 directions.
• Astra drafts. We get the source into Git, refine it in v0, and ship on Vercel or inside GoHighLevel.
• Every page gets a mobile pass at 390px and 360px, a Core Web Vitals check and an accessibility check.
• One hard rule: no invented prices, reviews, testimonials, stats or logos. Every claim on the page needs evidence and an approver.

GPT-6 Astra is OpenAI's model, and the method is ours. Here is the short version.

Claude runs the intake and writes the brief. Astra produces three to five visual directions from it. We take the chosen direction's source into a Git repository, refine it in v0, deploy it on Vercel or embed it in GoHighLevel, then run a mobile pass at 390px and 360px. Nothing ships with a price, review or statistic nobody can prove.

The reason for all the structure: a strong first draft is easy now. A page that converts, loads fast, works on a small phone and tells the truth still takes a process.

What GPT-6 Astra is (and isn't)

OpenAI began rolling out GPT-6 Astra on September 3, 2026. Per Engadget, it reached Pro, Business and Enterprise plans, with Plus users getting it through ChatGPT Work and Codex; Free and Go plans were excluded.[1]

Astra pairs with Sites in ChatGPT, which can host and share what it builds. OpenAI's Codex docs describe the deploy flow: save a version, then deploy, and ChatGPT reports the production URL. For a local source project, that version is tied to the Git commit used for the build.[2]

What it isn't: a Victory product, or a substitute for design judgment. We didn't build Astra and don't resell it. What we own is the process that turns its drafts into pages we'd put a client's ad budget behind.

Ray's view, from our own testing:

GPT Astra is able to give us a much better first rough draft than Claude and Vercel could.

One outside test points the same way. In MindStudio's blind comparison, Astra won 35 of 50 human-preference matchups against Claude Fable 5.1 on first outputs.[3] It was vendor-run, one-shot and with no iteration, so it says nothing about accessibility or accuracy.

Why the method matters more than the model

Designers don't trust raw AI output, and they're right not to. In Figma's 2025 survey of 2,500 users, 78% said AI makes them more efficient, but only 32% said they can rely on its output.[4] Among developers, 66% named "almost right, but not quite" as their biggest frustration with AI tools.[5]

"Almost right" is the default failure mode of AI web design: generic layouts, filler copy, a testimonial from someone who doesn't exist. The method exists to catch it.

Framework

The Claude-to-Astra-to-v0 method

1. Intake. Claude interviews the brief: person, pain, promise, primary action. It also opens the claims register.
2. Dials. Set motion, variance and density, and turn reference sites into a written design file.
3. Directions. Claude writes one Astra prompt that asks for 3–5 distinct directions. A human picks one.
4. Source. Get the chosen direction into Git, refine it in v0, and review every change as a pull request.
5. Ship. Deploy on Vercel or embed in GoHighLevel, with every lead captured by a HighLevel form.
6. QA. Mobile pass at 390px and 360px, Core Web Vitals, accessibility, then the claims check.

Victory's in-house process. GPT-6 Astra is OpenAI's model, v0 and Vercel are Vercel's products, and Claude is Anthropic's.

Step 1: Claude runs the intake

Every page starts with four answers, and Claude won't write a prompt until it has them:

• Person. Who lands on this page, from which ad or email, and what they already believe.
• Pain. The problem in their words, not ours.
• Promise. The specific outcome the offer delivers, with any limits.
• Primary action. The one thing the page asks for: register, book, buy. Everything else supports it.

Claude pulls these from the discovery-call transcript and asks for whatever is missing. In our experience, a first-draft phased build plan comes out of one discovery call in under 30 minutes, including human review. The only public comparison we found is a vendor anecdote: Anthropic says its own marketing team cut case-study drafts from 2.5 hours to 30 minutes.[6]

The intake also opens the claims register: a table of every price, testimonial, statistic, guarantee and logo the page might use, each with its evidence and the person who approved it. Astra only gets claims that have a row.

Step 2: Set the dials

Vague style words ("modern", "clean", "premium") produce the same page every time. So we set three dials, each defined by what you can see on screen:

Dial	Low (1–3)	Middle (4–6)	High (7–10)
Motion	Static page, hover states only	Fade and slide reveals on scroll	Scroll-linked sequences, animated hero
Variance	Standard centered grid	Some asymmetric sections, overlapping media	Editorial layouts, broken grid, unusual type
Density	One idea per screen, lots of space	Two or three blocks per screen	Dashboard-like, many elements per screen

Our working scale. Set each from 1 to 10 in the brief, and write down why.

A summit registration page for cold traffic usually wants low variance and medium motion. A brand page for a premium coach can push variance higher.

Then Claude studies two or three reference sites the client likes and writes what it sees into a short design file: type scale, color roles, spacing rhythm, button styles, how images are cropped. That file travels with the project, so every later prompt uses the same rules.

Step 3: The Astra prompt with 3–5 directions

Claude writes the Astra prompt in one paste-ready block: the intake answers, the dial settings, the design file, the approved claims and the sections the page needs. It asks for three to five directions that differ on purpose, not five shades of the same layout.

For a homepage, we go wider first. We have the model generate about ten style and palette variations, cut them to the best few, and only then build full directions for the client to review. That keeps the homepage the first approval gate: once its direction is signed off, inner pages inherit it.

In our experience, showing 3–5 directions gets a homepage from first draft to a client-approved direction in one or two review rounds. We haven't found an industry benchmark to compare that with.

Step 4: Get the source, refine in v0, push to GitHub

Don't plan on exporting the source from a site built only inside ChatGPT. We haven't found documented export for that. Have Astra build in a local, Git-backed project through Codex, or get the files handed over another way.[2] v0 can import a project from a ZIP upload or straight from GitHub.[7]

v0 is where the draft becomes maintainable code. It's an AI agent that writes real code and can open pull requests for review.[8] Its Design mode lets you select an element in the live preview and adjust it, with the edit written back to the source. It doesn't work on mobile viewports, so make mobile fixes by prompt.[9]

Connect the project to GitHub for branches, previews, CI and publishing through pull requests.[10] Every change gets reviewed before it merges. The full handoff chain is in our Figma-to-v0-to-Vercel build guide.

Step 5: Ship on Vercel or inside GoHighLevel

v0 deploys to Vercel. Branches get preview URLs, and publishing updates production.[11] Vercel adds instant rollback.[12] Clients approve on the preview URL.

The page then either stands alone on its own subdomain or gets embedded in a GoHighLevel page. Either way, GoHighLevel stays the system of record, which is why our GoHighLevel guide comes before any of this.

Capture every lead with a HighLevel form, survey, calendar or order form. Those submissions record First and Latest attribution on the contact.[13] If anything sits inside an iframe, the tracking on the outer page can't see it. Hyros, for one, says to put its universal script inside the iframe or post leads server-side.[14]

Step 6: Mobile pass and QA

Drafts get reviewed on a laptop, and many visitors will never see them on one. We check every page at two phone widths. In the US, 390x844 is 10.16% of mobile page views and 360x780 is 4.51%.[15] The 360 check catches what the 390 check misses: wrapped buttons, clipped headlines, tables that scroll sideways. One hands-on Astra build still had "a few bugs" at phone width.[16]

QA before the client sees it

• Every section at 390px and 360px, in portrait, with real copy.
• Core Web Vitals "good" on mobile: LCP within 2.5 seconds, INP 200 milliseconds or less, CLS 0.1 or less, at the 75th percentile.[17] Our target is LCP under 2.0 seconds.
• Text contrast, image alt text and form labels. These are the most common accessibility failures on the web: 83.9%, 53.1% and 51% of the top million home pages.[18]
• Every form submits to GoHighLevel and the attribution fields fill.
• Every claim on the page matches a row in the claims register.

None of that WebAIM data is AI-specific: 95.9% of those home pages had detectable WCAG failures.[18] AI-built pages inherit the same habits unless someone checks.

The rule we never break: no invented proof

AI fills gaps with plausible fiction. Ask for a pricing section and you'll get prices. Ask for social proof and you'll get five-star quotes from people who don't exist.

So the prompt bans invented prices, reviews, testimonials, statistics and logos, and the QA pass checks every claim against the register anyway. This isn't just taste. The FTC's final rule banning fake reviews and testimonials was announced in August 2024,[19] and in December 2025 FTC staff warned 10 companies about possible violations of it.[20]

What it costs

The tools are cheap next to the hours. At list prices on 2026-10-04, Claude Pro is $17 a month billed annually or $20 monthly,[21] v0 Plus starts at $30 per user a month,[22] and Vercel Pro is $20 a month.[23] Astra comes with the ChatGPT plan you already pay for. How these fit with the rest of our tools is in our agency tech stack.

Want this method run on your next site? Book a strategy call and we'll show you how we build it.