Gemini 3 for web design

Gemini 3.1 Pro is the current Gemini 3 series flagship, and it will build a complete responsive page from one paragraph. Ordered headings, labelled 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.

The short call: Gemini 3.1 Pro for a page, Gemini 3.8 Flash for a section against a written spec. Neither choice changes the look of the result as much as one page of values does, and Thanor sells those values.

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 current Pro flagship of the Gemini 3 series. Point it at a full page, a multi-section build, or a refactor of code you did not write.
• Gemini 3.8 Flash, the latest stable Flash. Point it at one section, one component, or twenty variants of the same card against fixed values.

One trap is worth naming without repeating the bad id. Several guides in circulation describe a Gemini generation beyond the 3 series that has not shipped, and a configuration file accepts only what exists. Plan against Gemini 3.1 Pro and Gemini 3.8 Flash, and check any other id against Google's own 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 grey 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 are not a Gemini signature, they are the shared centre of the distribution, 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. A component request carrying a hex value, a radius, a ramp position and a 240ms duration does not need a flagship, because nothing is being invented. Following an exact instruction is cheap.

Where Flash slips 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 Gemini 3.1 Pro holds a long file in mind better than Flash does. 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 grey 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 a fine 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. Neither name 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 over Flash: consistency across a long build.
• Gemini over another maker: a workflow preference, nothing more.

Thanor writes those lines 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 give Gemini 3.1 Pro something to follow. The same file goes into the Flash tier unchanged, which is the test worth running first: if both come back with your values intact, you have stopped paying for judgement and started paying for capacity.