AI 建站工具如何撰寫提示詞，打造快速且清晰易讀的 3D 首屏

Ask Lovable, Bolt, Cursor or Claude for "a landing page with a 3D hero" and you usually get one of two results. Either a spinning cube floating over a gradient that has nothing to do with the product, or a heavy scene that pushes the headline below the fold and makes the page stutter on a laptop. The 3D part works. The design around it doesn't.

The fix isn't a better model. It's a prompt that treats the 3D object like any other design element: it has a job, a place in the layout, a budget, and a fallback. This post is a short checklist for writing that prompt, plus a snippet you can paste.

Disclosure: I work on MotionSites, a library of AI website prompts and templates. The checklist works with any builder and any prompt.

1. Give the object one job

Before you mention Three.js, decide what the object is for. Good jobs for a 3D hero object:

• Show the product's idea: a glass cube for a "clarity" product, a stack of cards for a finance app, a globe for anything about distribution.
• Frame the headline: the object sits behind or beside the text and leads the eye to it.
• React to the user: subtle tilt on cursor move or scroll, so the page feels alive without demanding attention.

Write that job into the prompt in one sentence. "A slowly rotating abstract shape" gives the AI nothing to design around. "A frosted glass cube that refracts the headline color, sitting to the right of the headline" does.

2. Pin the layout before the scene

Most broken 3D heroes are layout bugs, not WebGL bugs. Tell the builder exactly where the canvas lives:

• Two-column hero on desktop: text left (about 45% width), canvas right.
• On mobile, the canvas goes below the headline and CTA, at a fixed height, never above them.
• The headline and primary button must be visible without scrolling at 1280×720.

That last line matters more than anything about lighting. If the headline is visible, the page reads as a landing page with a 3D accent. If it isn't, it reads as a tech demo.

3. Set a performance budget in plain words

AI builders will happily load a 20 MB model and a post-processing stack if you don't say otherwise. Give them limits they can act on:

• One object, one light setup, no post-processing.
• Use a primitive geometry or a small glTF (under about 1 MB).
• Cap device pixel ratio at 2, pause rendering when the canvas is off screen.
• Lazy-load the 3D code so the text renders first.

You don't need to know the exact Three.js calls. Naming the constraint is enough for Claude or Cursor to pick a reasonable implementation, and it gives you something concrete to check.

4. Always ask for a fallback

Some visitors have reduced motion turned on, some are on low-power devices, some have WebGL disabled. Ask for:

• A static image or CSS gradient version of the hero when prefers-reduced-motion is set or WebGL fails.
• The same layout in both cases, so nothing jumps.

This is the detail that separates a designed 3D site from a demo, and it's almost never in a first-draft prompt.

5. Describe motion as numbers

"Smooth animation" means nothing to a model. Numbers do:

• Idle rotation: about 6 degrees per second on the Y axis.
• Cursor tilt: up to 8 degrees, eased over 400ms.
• On scroll, the object scales from 1 to 0.85 and fades to 40% opacity by the end of the hero.

Pick two or three motions and say that nothing else moves.

A prompt snippet you can paste

Put this under your normal page description:

Hero: two columns on desktop. Left: headline, one-line subhead, primary button, all visible at 1280x720 without scrolling. Right: a Three.js canvas with one frosted glass cube that refracts the brand accent color.
Mobile: canvas goes below the button, fixed height 320px.
Performance: one object, no post-processing, devicePixelRatio capped at 2, pause rendering when off screen, lazy-load the 3D code after the text renders.
Motion: idle Y rotation about 6deg/s; tilt toward the cursor up to 8deg, eased 400ms; on scroll the cube scales to 0.85 and fades to 40% by the end of the hero. Nothing else animates.
Fallback: if prefers-reduced-motion is set or WebGL is unavailable, show a static render of the cube with the same layout.

Swap the cube for whatever object fits your product, and keep the rest.

Check the result in two minutes

After the builder finishes, check four things:

1. Is the headline visible at 1280×720 and on a phone, without scrolling?
2. Does the page still look finished with reduced motion turned on in your OS settings?
3. Does scrolling feel smooth on the slowest machine you have?
4. Can you describe the object's job in one sentence?

If any answer is no, fix that line of the prompt and regenerate rather than patching the code by hand. The prompt is the thing you'll reuse.

If you'd rather start from a finished one

Writing all of this from scratch for every project gets old. MotionSites has 550+ website prompts for Lovable, Bolt, Cursor and Claude, including 3D and Three.js designs where layout, scene and motion are already written out. There's a free section at motionsites.org/free if you want to take one apart and see how it's structured.