1 · Prompt
State the goal, audience, and constraints in plain language. Name a template when you want a known starting shape.
Web Grok Build playbook
How to use web Grok Build — with templates as practice ships
This page is the craft guide. The template catalog is the map of what to build. Together they form one product: learn the loop, pick a shape, ship something people can open.
The core loop
Everything in web Build collapses to four moves. Master these before optimizing prompts.
2 · Preview
Watch the live preview fill in. Judge the real UI — not a scaffold with TODOs. If it’s blank or broken, say so in chat.
3 · Iterate
Change one to three things per turn: copy, layout, data, or behavior. Small turns keep quality stable.
4 · Publish
When the demo is shareable, use Publish for a public link (often *.grok.me). Preview is private practice; publish is the product URL.
Working principles
One outcome per prompt
“Ship a bio page for a freelance illustrator with three links and a warm palette” beats “make a cool site.”
Templates are starting points
Pick from the catalog for shape and genre, then specialize with brand, data, and CTAs.
Mobile is part of done
Open the preview narrow. Primary actions and text must work around ~390px width.
Web Build is a sandbox
It does not sync with local PowerShell/CLI history or your laptop folders. Treat each web session as its own workshop.
Practice path — five template ships
Templates are not decoration in this guide. They are the exercises. Do them in order if you are new; skip ahead if you already know the genre.
- 01Open guide
Bio page
Your whole presence, compressed to one screen
Ship a single-screen identity hub. Learn layout, links, and mobile stacking.
- 02Open guide
Landing page
Hero, proof, CTA — conversion story
Tell a conversion story: hero, proof, CTA. Learn section structure.
- 03Open guide
Notes app
Capture thoughts; find them later
CRUD + search + persistence. Learn app state without leaving the browser.
- 04Open guide
Endless runner
One-thumb arcade loop that never ends
Feel game loop polish: input, score, restart. Learn playable demos.
- 05Open guide
Kanban board
Cards moving across columns
Drag cards across columns. Learn productivity UX and drag interactions.
Publish & grok.me
What Publish is for
- Turn a private preview into a link anyone can open.
- Public URLs often use a *.grok.me subdomain (or a custom domain when available).
- Use it for demos, class submissions, portfolio pieces, and quick validation — not as a promise of eternal hosting.
Responsibility (plain language)
When you click Publish you accept that you own the app’s content, legality, privacy, and user-facing duties. xAI provides tools — not warranties that your site is correct, lawful, or endorsed. Subdomains and published apps can be removed for policy or legal reasons. This is a summary, not legal advice; read the live terms in the Publish dialog.
This site is the living example
Build Lab is itself a web Grok Build-style product: English template catalog + craft guide, linked both ways. Opening it in preview (or after Publish on grok.me) is the meta-lesson — documentation that ships as an app, not a PDF.