Gemini 3 for web design

Gemini 3.1 Pro is the Pro model of Google's Gemini 3 series, and it will build a complete responsive page from one paragraph. Ordered headings, labeled controls, a grid that does not overflow on a phone, type sized with clamp(), a working prefers-reduced-motion branch.

Everything above is now table stakes across the category. What Gemini does with the parts you left blank is the whole story, and it fills them from the same median every other model fills them from.

Gemini 4 Argon is now Google's current model. It has been generally available since October 13, 2026 as gemini-4-argon, and Gemini 4 Argon for web design covers it. This piece stays the guide to the Gemini 3 series, which Google still lists and serves.

The short call:

• New work: start in Gemini 4 Argon.
• A page or a section against a written spec: Gemini 3.8 Flash.
• A refactor of long code you did not write: Gemini 3.1 Pro.
• The look of the result: one page of values decides it more than either choice, and Thanor sells those values.

Three pages whose every value was written down first, the kind of brief this article ends with:

What Gemini 3 means today#

Two model ids are worth typing correctly, because a configuration file does not accept a series name.

• Gemini 3.1 Pro, the Pro model of the Gemini 3 series, listed as gemini-3.1-pro-preview. Point it at a multi-section build or a refactor of code you did not write.
• Gemini 3.8 Flash, gemini-3.8-flash, released September 2 and the newest model in the series. Point it at a page, one section, one component, or twenty variants of the same card against fixed values.

When this piece was first written, no Gemini generation beyond the 3 series had shipped. One has now: Gemini 4 Argon, and Google has announced a second Gemini 4 model, Carbon, that is not broadly available at the time of writing. The original gemini-3-pro-preview id has already been shut down, so check any id against Google's models list before a script depends on it.

Both write frontend code that works. Both also supply, unasked, the four values that define a generated page: a neutral geometric sans, a gray sitting almost exactly on the neutral axis, an 8px radius on every corner, and a fade plus translateY(20px) at roughly 300ms applied uniformly. Those four come from the shared center of the distribution rather than from Gemini, and the identical four arrive from every other flagship shipping today.

Which makes the model choice a smaller question than it looks. Both Gemini tiers write correct code and neither has an opinion about your palette, so the useful work is the eight lines further down this page.

Pro and Flash, and which to point at a page#

Pick on what has to stay consistent, not on how good you want the design.

Flash is the tier people underuse. On Design Arena's Website board at the time of writing, Gemini 3.8 Flash scores 1296 against 1230 for 3.1 Pro, about 59 votes in 100 in Flash's favor when both build from the same short prompt. A component request carrying a hex value, a radius, a ramp position and a 240ms duration does not need a flagship either, because nothing is being invented. Following an exact instruction is cheap.

Where a fast tier can slip is memory across a batch: the fourth card uses your 14px radius and the eighteenth drifts to 12px. That is a context failure, and the fix is pasting the token block with every single request rather than trusting the conversation, which is the same habit that carries frontend work.

Refactoring is the other row worth respecting. Editing CSS you did not write asks the model to infer intent from existing values, and that inference is the job a Pro model is built for. Generating something new from a complete specification asks for no inference at all, which is why the cheap tier is enough there.

The brief Gemini 3.1 Pro follows#

Eight lines. Paste them above your copy and the page changes character.

• Surfaces: #0B0B0F page, #14141A raised, #1C1C24 overlay. No shadows.
• Borders: 1px solid rgba(242,239,233,0.08), and nothing else draws a line.
• Neutral: #8A8577, hue pulled toward amber, stated as a requirement.
• Accent: #D8492B, one element per section, never on body text.
• Type: 17px at 1.62, measure 64ch, ratio 1.26 over five steps to 86px, two weights, -0.025em on the top step alone.
• Spacing: ramp 4 / 8 / 12 / 20 / 32 / 52, and no value off the ramp.
• Motion: reveal cubic-bezier(0.22, 1, 0.36, 1) over 620ms, response cubic-bezier(0.32, 0.72, 0, 1) over 240ms, stagger 90ms capped at four, first viewport only.
• Refusals: no gradient, no gray on the neutral axis, no third typeface, no icon set, no testimonial carousel.

Restate the whole block at the bottom of a long request as well as the top. It costs sixty words, it reads like redundancy, and across seven sections it is the difference between a footer that obeys the brief and a footer that invents one.

The last line is the one to test by deleting. Rerun the same request without the refusals and watch a gradient arrive behind the hero text, because a gradient is what fills depth nobody decided. Five negative sentences hold more of the page's character than any positive adjective does.

Where Gemini output drifts#

Three drifts are predictable, and each closes with one sentence.

1. Density creeps wide. Given a full-bleed grid and no stated measure, body copy stretches past 100ch and the page reads as a document rather than a designed layout. 64ch fixes it permanently.
2. The scale flattens. Left open, a page gets four sizes within a few pixels of each other and two of them do the same job. Naming a ratio and a step count forces real contrast between the display step and the body.
3. Motion multiplies. Asked for polish, the model animates every section, because more movement reads as more effort. Write the budget as a limit and one signature moment carries the whole page.

The signature moment is worth specifying 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, fighting.

None of those three is a Gemini fault. Every flagship in this cluster behaves the same way, which is exactly why one brief is worth writing and reusing everywhere.

Keep the brief in a file rather than in the chat. A conversation cannot be diffed, handed to somebody else or pasted into a different engine next month, and all three of those are worth more than the convenience of scrolling up to find what you said.

The verdict on Gemini 3 for design#

Gemini 3.1 Pro is still a workable model to build a website in, and Gemini 3.8 Flash is the right tier for anything you can specify tightly enough to hand over in one message. For new work Gemini 4 Argon is the Gemini to start in, and Claude vs Gemini for web design sets it against Anthropic's lineup. None of those names is the reason a page ends up looking good.

Anybody arriving here after a disappointing generation is looking at the wrong half of the system. The tier set how much the session could hold. The eight lines set what the page looks like, and those you can rewrite in ten minutes without changing anything else.

Ranked by effect on the result:

• The eight lines above: the entire difference between a template and a directed page.
• The refusal list: the reason two pages off one library look unrelated.
• Pro or Flash: speed and cost, more than design.
• Gemini over another maker: a workflow preference, nothing more.

Thanor writes those lines as finished art direction per design, in exact values, from the palette in hex to the easing curves, with the media the page uses, for personal and client work. Free accounts open the designs marked free, and the plans open the rest.

Open Vesperion and copy its prompt; it is free with an account. Give it to Gemini 3.8 Flash first, then to Gemini 3.1 Pro or Argon unchanged. If your values come back intact from both, you have stopped paying for judgment and started paying for capacity.