Just Talk to Grok

Module 1

You can tell Grok what you want. What makes it work is a clear idea and the small details people forget.

Picture it. A one-page site called Porch Light, that tells your neighbors which stars they can see tonight. That’s our running example. Yours can be anything.

Make a one-page site called Porch Light for my neighbors. It shows which stars and planets they can see tonight from our street, in plain words. Dark blue, big readable text on phones. Add a footer with my email, and a share card with the title.

You’ll leave with A clear idea and a short list of details, ready to tell Grok.

Module 2

If you remember one thing from this course, remember this: you can just talk to Grok. Out loud, with pictures, or by showing it your screen.

You say “the title feels too loud,” and a moment later it’s quieter.

“Recording my screen and talking through it, page by page, was the fastest way I found.”

1

2

You’ll leave with Four ways to tell Grok what you want, and the habit of just saying it.

Module 3

A handful of words come up again and again. Here they are in plain English. Tap any underlined word on this page to see its meaning again.

You don’t need to learn these like a test. Read them once, the way you’d glance at a map before a walk.

API

A way for your site to ask another service for something and get an answer back. Your page sends a request (“read this paragraph aloud”), and the voice service sends back the sound.

Connector

A link that lets your Bot use a service you already have, like Gmail or Google Drive, with your permission.

Docs

Short for documentation: the official how-to pages a company writes about its own product. xAI’s live at docs.x.ai.

Domain

A web address you own, like yourname.com. You rent it by the year from a registrar such as GoDaddy.

DNS

The internet’s address book. When you connect a domain, you add one line (a DNS record) that says where your domain points.

JSON

A tidy text format for lists that programs can read, like a shopping list in curly brackets. You’ll see a small one in the branding module.

Skill

A saved set of instructions for one task. Write it once, and Grok or any of your Bots can follow it again.

Routine

Tells a Bot when to do a job: every Monday, or whenever an email arrives. The skill says how. The routine says when.

Publish (or deploy)

Putting your site online at its public address, so anyone with the link can open it.

Footer

The quiet strip at the very bottom of a page: how to reach you, a way home, and a few links.

Share card

The picture and title that appear when someone pastes your link into a chat or a post.

The full list, with a few more words, is in the glossary at the end.

You’ll leave with Eleven words, ready when you need them.

Module 4

Five names. Learn them once and you’ll always know which one to open.

Think of a kitchen. Grok is the friend you talk recipes with. Grok Build is the stove. A Grok Bot is the helper who keeps the kitchen running while you sleep. A skill is a recipe card. A routine is the note on the fridge that says “every Sunday.”

Grok

Chat. Ask, think, write, plan.

Grok Build

Builds an app or site live in your chat, then publishes it to your own grok.me address. This is where I build my sites. (There is also a Grok Build for the terminal, a coding tool for developers. You won’t need it here.)

Grok Bots

Teammates that keep working. Each has a name and a job and works on its own cloud computer with a browser and files, even with your laptop closed. They use connectors and come back when something needs your OK.

Skills

A saved, reusable instruction file. “A skill is a reusable set of instructions for how to do a task,” in xAI’s words. Any of your Bots can follow it.

Routines and workflows

Repeatable steps that run on a schedule or after an event. A routine tells one Bot when to run. A workflow is the sequence of steps itself. I save my workflows the same way I save skills.

Approvals, security, and privacy explains the rules you can set.

You’ll leave with A clear picture of which tool does what, and the habit of reaching for the right one.

Module 5

From a new chat to a working preview. This is the main building tool, and it’s where I made at least 95 percent of my sites.

The first time Grok shows you a working page, you’ll want to show someone. Do. Then say “make that smaller.”

“I build almost everything here. A chat, a preview, and a lot of “make that smaller” until it feels right.”

You’ll leave with A working preview you’re proud of, ready to publish.

Module 6

Four small screens stand between your preview and the world. Here they are, from my real site, moxie.grok.me.

The first time you open your own address on your phone, standing in the kitchen, it feels like something you built yourself.

“When I point my own domain at a site, I add exactly what Build shows me, then check both addresses on my phone.”

Before you connect your own domain, you can keep Access to just you while you check it.

✦ One of my favorite tips

Build on grok.me, live on your own domain

You build at a free grok.me address. Then you point a domain you own at it, and the very same site opens at your own name. Skip this if you’re happy with your grok.me address.

Optional: your own domain, when you’re ready

First, buy your domain

I use GoDaddy. Namecheap, Cloudflare Registrar, and Squarespace Domains work too. When I bought mine, it cost about as much as a lunch, for the year. Search the name, buy it, then come back here.

Just Grok it

A worked example, from my children’s family

Explore with Pip was built at explorewithpip.grok.me and is served at explorewithpip.com. Same site, my own name.

Or follow the steps yourself, at GoDaddy

1. Buy the domain at GoDaddy.Any registrar works the same way; these steps use GoDaddy.
2. In Grok Build, open the publish sheet, then the Domain tab, and add www.yourdomain.com.Add the www version first.
3. Build shows you a DNS record. Keep that screen open. In GoDaddy, sign in to your Domain Portfolio, select your domain, then select DNS. Select Add New Record and choose CNAME. Name: www. Value: exactly what Build shows.For Explore with Pip, the value Build showed was a long, odd-looking address. Yours will be different.
4. For the bare domain (no www), in GoDaddy select DNS, then Forwarding, then Add Forwarding. Choose https://, enter www.yourdomain.com, and pick Permanent (301).Type the https. A permanent 301 tells search engines this is your real address.
5. Wait until Build says Connected. It can take a while. The security certificate (the little lock) comes after.Then check both addresses on your phone.

Common slips

• Forgetting the https in the forward.
• A typo in the CNAME value. Copy it straight from Build.
• Leaving an old record in place for www. Remove the old one so only the new CNAME is left.

Use exactly what Build shows on your screen. Names and values differ from site to site. Once a custom domain is connected, your site is public.

GoDaddy’s own steps: Add a CNAME record and Forward my GoDaddy domain.

Remix, below it, lets others make an editable copy. Their changes won’t affect your original.

You’ll leave with Your site live at a clear name, with a share card, your own domain if you want one, and voices switched on.

Module 7

UI is what people see. UX is how it feels. You don’t need to code either one. You notice, you describe, and Grok builds it.

Watch a friend use your page without helping. Where their thumb hesitates is your next fix.

Six layouts to borrow

Each little mockup is a whole page, shrunk. Copy the sentence under the one you like and say it to Grok.

• Title
  Full-bleed heroAn opening picture edge to edge, title over a plain part.

  “Make the opening image full-bleed, edge to edge, with the title over an open part of the picture and readable at 390 pixels wide.”

  Copy
• “
  Mixed editorial gridOne wide picture, a narrow column, a pull quote.

  “Lay this page out like a magazine: one wide image, a narrow column of text, and one pull quote, instead of a stack of identical cards.”

  Copy
• Centered essay columnOne column, about 65 characters wide.

  “Make this a centered essay: one column about 65 characters wide, generous space between paragraphs, and a quiet title.”

  Copy
• Card gridA tidy grid for many small things of the same kind.

  “Show these items as a card grid: same size cards, one picture and one line each, two across on phones and four on desktop.”

  Copy
• Scrolly storyA picture that stays while short passages scroll past.

  “Turn this section into a scrolly story: the picture stays in place while each short paragraph scrolls past and changes it.”

  Copy
• Split image and textPicture on one side, words on the other.

  “Put the photo on the left and the text on the right on desktop, and stack them with the photo first on phones.”

  Copy

Page geometry: the invisible grid

Every quiet page has a frame you can’t see: margins, a few set widths, and even spacing. Keep your prose narrow, and let pictures and diagrams use the width.

Where this comes from: my Drive notes on product, responsive layout and web standards, and the editorial-composition skill in my rulebook.

You’ll leave with An eye for easy-to-read pages, six layouts to borrow, and the words to ask for one.

Module 8

Pay attention to the little things people don’t notice they notice. Nobody says “what a lovely line length.” They just keep reading.

You’ll know it worked when someone says your page feels expensive, and can’t tell you why.

Type that’s easy to love

Word shapes and editorial composition

Text can have a shape. Here are two I use. Use a shape only when it helps the words say what they mean.

Dividers and chevrons

• Subtle section dividers. A hairline with one small mark in the middle, like the star between these sections. Add a line only when it clarifies structure.
• Collapsible details with a thin chevron. Long steps fold away under a heading. A 1.5 pixel chevron turns as it opens. Use real details and summary elements so keyboards work.
• A share card that matches the page. 1200 by 630, readable at 400 pixels wide.

Scrollytelling and motion

Scrollytelling means the picture changes as the story scrolls. Each scroll should reveal a thought, not just more text. Motion should explain something, and it should rest when people ask it to.

Where this comes from: the typography-research and editorial-composition skills in my rulebook, and my Drive notes on editorial typography and scrollytelling.

You’ll leave with A short list of little things you’ll never skip again.

Module 9

Accessible means everyone can use it: tired eyes, shaky hands, screen readers, bright sunlight. WCAG 2.2 AA is the goal. You don’t need to memorize it. Just ask for it.

Somewhere a reader with low vision is holding a phone in a bright bus window. Build for them, and everyone else gets a better page too.

Color and contrast

Text needs a contrast ratio of at least 4.5 to 1 against its background. Large text and icons need 3 to 1. Slide the gray and watch the verdict.

Taps, pictures, motion

Where this comes from: my Drive notes on current web standards (4.5 to 1 normal text, 3 to 1 large text and essential icons, 44 pixel targets, honor reduced motion, never disable pinch zoom).

You’ll leave with Pages that welcome everyone, and a one-line request that checks it.

Module 10

The footer is the last thing people see and the first place they look when they want to reach you. Keep it quiet, useful, and the same on every site.

Someone finishes your page at midnight and wants to say thank you. The footer is where they find out how.

My Contact is a Contact Us email link, my Directory is moxie.grok.me, and my line is “A Human-Grok Collaboration ♥”, then my numbers, 24 | 42.

Once you have three or more sites, keep the footer in one small file that every site reads.

Here is a slice of mine, simplified:

{
  "updated": "2026-10-20",
  "lines": [
    "Contact Us mailto:moxie@mail.grokbot.com",
    "The Constellation → https://bookof42.grok.me/constellation",
    "A Human-Grok Collaboration ♥",
    "24 | 42"
  ],
  "sites": [
    { "name": "The Book of 42",
      "href": "https://bookof42.grok.me" },
    { "name": "Rather",
      "href": "https://rather.grok.me" }
  ]
}

• Keep one list of all your sites (a registry). Mine is the directory at moxie.grok.me, live and always current.

Where this comes from: my Drive note on footer structure, and the footer-registry skill in my rulebook.

You’ll leave with A footer you write once, that ties every site together.

Module 11

Your brand is a few things that never change, so every site can look completely different and still feel like yours.

A friend opens your third site and says, “oh, this is one of yours.” They couldn’t tell you how they knew.

“Every site has its own palette, pictures, and layout. The mark, the footer, the voice, and the care stay the same.”

Write your brand down as tokens

The trick that keeps it consistent is to write your brand’s small decisions down once, with names, in one file. These are called brand tokens. One of my Bots gathered each site’s real colors and fonts into one JSON file, and checked every color pair for contrast. Here is a small slice, from my directory site:

{
  "site": "Moxie",
  "page": "https://moxie.grok.me",
  "tokens": [
    { "name": "void",  "hex": "#05060a" },
    { "name": "ink",   "hex": "#f7f3ea" },
    { "name": "first-light", "hex": "#d4b27a" }
  ],
  "fonts": { "display": "Instrument Serif",
             "body": "Source Sans 3" },
  "contrast": [
    { "pair": "ink on void", "ratio": 18.29,
      "aa_body": true }
  ]
}

In plain words: “ink” is the reading color, “void” is the background, and the contrast line proves the pair passes AA. When you start a new site, hand Grok the file and say which tokens to use.

Want to see the sites I built? Visit moxie.grok.me.

Where this comes from: the brand-standard skill and its tokens file in my rulebook, and my Drive note on footer structure.

You’ll leave with One family brand, written down once, and the freedom to make every site look new.

Module 12

This is the heart of the course. Every lesson you learn goes into one place. Every new site starts from that place, already further ahead.

Site one takes a week. Site ten takes an afternoon, not because you got faster, but because site ten already knows what the first nine taught you.

“Every lesson went into my OS. That’s why each new site started further ahead.”

Where this comes from: the constellation-os folder in Bookof42/constellation-control, version 2026.10.20.5, read 21 October 2026, and the conflict order in that folder’s AGENTS.md.

You’ll leave with Your own small rulebook, which every new site starts from.

Module 13

A skill is a saved instruction file. Write it once, and you never explain that thing again.

The third time you hear yourself say “remember, captions are 17px,” stop. That sentence wants to be a skill.

Here is a real one: Predeploy, my before-publishing check.

---
name: predeploy
description: Audit an app before ship without installing features from the checklist.
---
VERIFY is not INSTALL.
Investigate every applicable item.
Mark irrelevant items N/A with a reason.
Repair demonstrated failures only.
Preserve every dimension that already passes.
Finish with PASS / REPAIR / HOLD.

Module 17 explains each line.

If ~/.grok/constellation-os/VERSION is missing or older than 2026.10.20.5, restore from Bookof42/constellation-control/constellation-os. Then use only this world's local authority.

Save this as a skill called seo-release.
Before I publish, check every page for:
1. A unique title and a one-sentence description.
2. A canonical link to the page's public address.
3. Open Graph and X card tags, with a 1200 by 630 share image.
4. Readable links to each section, so a shared link opens in the right spot.
5. A robots.txt and a sitemap that don't block anything by accident.
6. An llms.txt that describes the site in plain words.
7. No preview or sandbox addresses leaking into links or tags.
Report what passes and what fails. Don't publish until I say go.

You’ll leave with Your first skill, saved where every Bot can find it.

Module 14

A skill says how. A routine says when.

Monday, 8:00 AM. Coffee. A short note is waiting: every site passed, except one footer link. You didn’t lift a finger to get that note.

• Deleting a routine is immediate, with no undo. A Bot can own up to 50 routines, and schedules must be at least five minutes apart.
• Routines can also start after an event, such as a Slack message or a GitHub notification. Keep the match narrow. “Every new message” is noise.
• Your routines’ time zone lives in Settings, under Bot, then Timezone. (Settings and notifications)

You’ll leave with A weekly routine that reports to you before anyone repairs anything.

Module 15

I build my sites myself, in Grok Build. My Bots check, research, and keep things running. That split keeps the work mine and the checking honest.

A Bot reads your page cold, like a stranger, and tells you the one sentence that lost them. That’s a gift.

“My Bots help with checks. Publishing stays in my hands.”

Just Grok it

Connectors and plugins

A connector links your Bot to a service you already use, like Gmail, Google Drive, Shopify, Canva or X, so it can work there for you.

When a task needs a service, Grok shows you a card to connect. You click it, sign in to that service, and approve.

You can also do it yourself. In the Grok Bot app (download it at x.ai/bot), open Plugins in the sidebar. It has three tabs: Connectors, Skills and Bots, plus a search box and a New Connector or New Skill button.

• Connectors is the library. Search it and add whichever connector you want (how connectors work).
• Skills shows your skills. Mine include constellation-os, footer-registry and first-principles-product.
• Bots is your Bots. If you don’t have the one you want, ask Grok, and it can build you a Bot you like.

Just ask Grok

• “Connect my Shopify store.”
• “Which connectors do you have for YouTube?”

You can remove access any time: uninstall the connector, and revoke it in that service too (remove access).

Use a connector first. If there isn’t one, sign in yourself and your Bot works in the browser you signed into. More in You can trust your Bot.

You can trust your Bot (carefully)

I signed into Shopify myself and gave Milliways, my shop Bot, access to run the shop with me. I gave my Bot Moxie access to post to YouTube.

Trust grows from working together. It doesn’t start big.

Before you hand anything over

• Use a connector first, if there is one for that service.
• If there isn’t, sign in yourself. Your Bot then works in the browser you signed into.
• Never paste a password into chat.
• You approve any spending and anything that goes public.
• You can take access back any time.
• Keep two-step verification on.

How my Bots and I opened two shops: see How my sites became shops.

You’ll leave with A helper Bot that checks your work, and a clear line where it stops.

Module 16

Find a page in xAI’s docs, hand it to Grok, ask in plain words. You don’t need to code.

Your Porch Light page reads itself aloud at dusk, in a warm voice, while your neighbor stands on the steps looking up.

Just Grok it

Say what you want. Then let SI say it back.

Eve is the default voice on that page, and the same page lists others such as Ara, Leo, Rex, and Sal. I’ve also used Iris, a voice the xAI API accepts though the docs page doesn’t list it yet.

The voice ID comes from xAI’s developer site, the console. (Custom Voices)

Any API page works the same way

• Pictures: “Use this page [Image Generation] to make a cover image from my title.”
• Seeing: “Use this page [Image Understanding] to describe each photo I upload, as draft alt text I can edit.”
• Listening: “Use this page [Speech to Text] to turn my voice memo into a transcript under the player.”
• Moving pictures: “Use this page [Video Generation] to make a short motion loop for my opening.” (Check in Grok Build whether this one needs your own key, stored in Secrets.)
• Words: “Use this page [Generate Text] to add a small box where visitors ask a question about the night sky.”

You’ll leave with A page that speaks, and a saved sentence that makes the next one speak too.

Module 17

My pre-deploy prompt is the last gate before a site goes public. It’s long. Here’s the short version.

It’s late, the page looks finished, and you want to press Publish. This is the five minutes that saves tomorrow.

“Verify is not install. It’s the first line of my pre-deploy prompt.”

1. Verify is not installCheck each item on the list. Don’t add something just because the list mentions it.
2. N/A with a reasonIf something doesn’t apply, mark it N/A and say why. “No forms on this site” is a reason.
3. Repair only what failedFix what you can show is broken. Leave what already works alone.
4. No features from a listNo banners, trackers, popups, or new tricks unless the site has a real job for them.
5. What you see on a phone winsWhat you see on a real phone beats what the code says.
6. Shared links open in the right spotIf someone shares a link to a spot on your site, it should open right there, not on the homepage.

Where this comes from: my Drive note PRE-DEPLOY RESEARCH + AUDIT ONLY, and my predeploy skill.

You’ll leave with A gate you run on every site, every time, without adding anything that doesn’t belong.

Module 18

When your link shows up in a search result, a chat, or a post, a few hidden labels decide what people see. They take five minutes, and Grok writes them for you.

You paste your link into a chat with an old friend. The picture shows up, the title is right, and they tap it before you finish typing.

• Links point to your public address, not your private preview. That’s what the canonical tag protects.
• JSON-LD. A small block that tells search engines “this is a course, made by this person.” Only describe what is really on the page.
• Headings and alt text. One main heading (H1), then H2s in order. Every meaningful picture gets alt text.
• Robots and sitemap. A robots file says what search engines may read. A sitemap lists your pages. One small page doesn’t need much; ask Grok to check they don’t block anything by accident.

<title>Just Talk to Grok: A Course…</title>
<meta name="description" content="A warm, plain-words course…">
<link rel="canonical" href="https://grokme.si/">
<meta property="og:title" content="Just Talk to Grok">
<meta property="og:image" content="https://grokme.si/og.png">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{ "@type": "Course", "name": "Just Talk to Grok…" }
</script>

This course page uses exactly these tags. Its own share card is the cream and teal picture with the guide on it.

Where this comes from: the seo-release skill in my rulebook (title, description, canonical, Open Graph and JSON-LD must match the live site).

You’ll leave with Pages that show up with the right name and picture, wherever the link is shared.

Sites I built

Each card is the real picture that appears when the site’s link is shared. Tap one to visit.

Games

Small playable worlds, some of them playable right inside a post on X.

• Light Conelightcone.grok.me
• Ratherrather.grok.me
• Mythenginemythengine.grok.me

How easy it is to ask Grok for a game

A game is one sentence away, just like a page. xAI’s own examples start the same way: “Build a peaceful 3D driving game: an endless forest I can drive through freely, with no missions and no timers.” (xAI)

Just Grok it

More game one-liners

“Make a would-you-rather game with two big buttons and a gentle reveal after each choice.”

Copy

“Make a tiny physics toy: tap to drop a ball, and let it bounce off a few angled lines.”

Copy

“Make this game playable right inside a post on X, with a poster image and a play button.”

Copy

Worked example: Light Cone

Light Cone began as a page. On Oct 8, 2026 I posted, “So, I asked Grok to make this playable in a post.” Two days later I shared it on X as “the first of what might become a growing thread of playable games on 𝕏.”

The site carries an X player card, so the game shows a play button right in the post. xAI says shared apps render inline, and shared games get a play button right in the card. (xAI)

See all the sites on moxie.grok.me

Real-life uses

These are helper jobs. The building still happens in Grok Build. Each label is one of xAI’s starter roles, from its Use cases page.

A morning digest while you sleep · Chief of Staff

“Review what changed since yesterday in my inbox and calendar. Return only items that need me, with sources. Don’t send anything.”

Copy

A friend says the button is broken · Bug Reproduction

“Reproduce this bug on a fresh browser at phone width. Return exact steps, screenshots, and what you expected. Don’t change anything.”

Copy

Why is my page slow? · Product Performance

“Find the single biggest reason this page loads slowly on phones. Separate facts from guesses. Link the evidence. Don’t change settings.”

Copy

The receipt pile · Expense Manager

“Match these receipts to this month’s list, flag anything missing, and draft one follow-up for me to approve. Don’t send it.”

Copy

A brand saved once · Your OS, as a teammate

Your brand, saved once as a skill or a Bot, so every new thing starts on-brand.

“Save my brand as a skill: these two fonts, these colors, this footer, these sizes. Use it on everything you make for me, and flag anything off-brand for me to approve. Report, don’t fix.”

Copy

Library

Things you can just ask Grok to do for you. Copy one, paste it into your Build chat, and watch.

• ✦ Highlight

  Build on grok.me, live on your own domain Documented by xAI

  Grok walks you through the Domain tab and GoDaddy; always use the record Build shows. See the lesson

  “How do I connect my GoDaddy domain to my grok.me site? Walk me through it step by step.”

  Copy

• Make a share card Documented by xAI

  Grok makes an App cover for you; this asks for one that matches. Source

  “Make a 1200 by 630 share card for this page in its own colors and fonts, with the title readable at 400 pixels wide.”

  Copy

• Change a domain name Check in Grok Build

  Ask before you change anything public.

  “I want this app on a different address. Walk me through changing it without breaking the old links.”

  Copy

• Turn on the SpaceXSI API Documented by xAI

  The one switch voices need. See the lesson

  “Before I publish, remind me to turn on the SpaceXSI API in the Settings tab so my app’s voice and images work.”

  Copy

• Narrate with the voice API Documented by xAI

  The highlight of the APIs lesson. Source

  “Use this page [https://docs.x.ai/developers/model-capabilities/audio/text-to-speech] to add a Listen button that reads my page aloud with the Eve voice.”

  Copy

• Full-bleed hero How I do it

  A grand first screen that still reads on a phone.

  “Make the opening image full-bleed, edge to edge, with the title over an open part of the picture and readable at 390 pixels wide.”

  Copy

• Mixed editorial layout How I do it

  Rhythm instead of repetition.

  “Lay this page out like a magazine: one wide image, a narrow column of text, and one pull quote, instead of a stack of identical cards.”

  Copy

• Subtle section dividers How I do it

  Structure you feel more than see.

  “Add quiet section dividers: a thin hairline with one small star in the middle, in my muted line color.”

  Copy

• Thin-chevron details How I do it

  Tidy pages that keyboards can still open.

  “Put the long steps in collapsible sections with a thin chevron that turns when opened, using real details and summary elements.”

  Copy

• Phone check at 390 How I do it

  The single most useful check I run.

  “Check this page at 390 pixels wide: no sideways scrolling, nothing clipped, and every tap target about 44 pixels.”

  Copy

• Add alt text How I do it

  For people who listen to your page.

  “Write alt text for every meaningful image, leave decorative images with an empty alt, and add a short explanation next to each diagram.”

  Copy

• Respect reduced motion How I do it

  Kind to people who feel motion.

  “When reduced motion is on, show the final state with no animation, and keep every bit of meaning.”

  Copy

• Self-host your fonts How I do it

  Faster, steadier, more private.

  “Self-host my fonts in the project instead of loading them from another site, and keep text visible while they load.”

  Copy

• Check contrast How I do it

  Readable in sunlight.

  “Check every text and background pair for WCAG 2.2 AA, 4.5 to 1 for body text and 3 to 1 for large text and icons, and fix only what fails.”

  Copy

• Comfortable reading size How I do it

  My reading floor.

  “Set body text to 18 pixels on phones and 19 to 20 on desktop, captions at least 17, and lines about 60 to 75 characters.”

  Copy

• No em dashes How I do it

  My house style. Optional for yours.

  “Replace every em dash in visible text with a comma, a colon, or a new sentence.”

  Copy

• A quiet footer How I do it

  Useful, never a second homepage. See the lesson

  “Add a quiet footer: Contact Us first, then a link home, then my directory, then my collaboration line, small and readable.”

  Copy

• Gentle scrollytelling How I do it

  Story first, motion second.

  “Turn this section into gentle scrollytelling: the picture changes as each short paragraph scrolls in, and everything still reads in order without motion.”

  Copy

• Save it as a skill Documented by xAI

  The six parts xAI recommends. Source

  “Save what we just did as a skill called Page narration, with when to use it, the steps, how to check it, and what needs my OK.”

  Copy

• A weekly check routine Documented by xAI

  For a Grok Bot, after the skill works once. Source

  “Every Monday at 8:00 AM my time, run my Phone check skill on my sites and send me a short list of failures. Don’t fix anything.”

  Copy

• A live dashboard from your data Check in Grok Build

  Grok Build connectors can do this; which apps are offered may vary. Source

  “Connect my spreadsheet and turn it into a live, filterable table on this page.”

  Copy

• Keep keys secret Documented by xAI

  Secrets are built into Grok Build. Source

  “Store this service’s key as a Secret, never in the page code.”

  Copy

• Export to GitHub Documented by xAI

  Your safety net. Source

  “Export this project to GitHub so I have a copy and a full history.”

  Copy

• Be found How I do it

  So search and chats show the right thing. See the lesson

  “Give every page a real title, a one-sentence description, and one canonical address on my public domain.”

  Copy

• Share card tags How I do it

  The picture people see when your link is shared. See the lesson

  “Add Open Graph and X card tags with my 1200 by 630 share card, and check the link shows the right title and picture.”

  Copy

• Describe it with JSON-LD How I do it

  A label search engines can read. See the lesson

  “Add JSON-LD that describes this page truthfully, with my name as the creator. Only describe what is really on the page.”

  Copy

• Talk through a recording How I do it

  The fastest way I found. See the lesson

  “I’m attaching a screen recording of my site. Go through it page by page and fix each thing I point out, one at a time.”

  Copy

• Inspiration, not a copy How I do it

  Borrow the feeling, never the work. See the lesson

  “Here’s a screenshot of a site I love. Make something with a similar mood for my page, in my own colors, words, and pictures. Don’t copy its design or content.”

  Copy

• Use my brand tokens How I do it

  One family, many looks. See the lesson

  “Here are my brand tokens. Use them for colors and fonts, keep my footer, and report anything that drifts.”

  Copy

• Make a small game How I do it

  Games are one sentence away too. See the lesson

  “Make a word game for my site: one clue, six guesses, works on a phone, and explain how to play in one sentence.”

  Copy

• Playable in a post How I do it

  How I shared Light Cone. See the lesson

  “Make this game playable right inside a post on X, with a poster image and a play button.”

  Copy

• Talk to your Bot in one move From @bot and Apple

  When an idea comes to you on a walk, you don’t want to hunt for an app. One press, or two taps on the back of your phone, and you’re talking. See it in the lesson · @bot’s post · @bot’s steps · Apple: Use Back Tap

• Make it an installable app How I do it

  You can make your site an installable app, called a PWA: a site people can add to their home screen like an app. It gets an app icon, splash screens (the picture shown while it opens) and a favicon (the little tab icon). Grok often does this on its own, but the main thing is: just ask. I’ve done this on quite a few of my sites.

  “Make this site installable as an app, with an app icon, splash screens, a favicon, and an Apple touch icon that match my share card.”

  Copy

Hidden gems

xAI’s Grok Bot docs are short, clear, and full of small surprises. My favorites, in my own words:

• Tag @bot on XHand any post to your Bot by tagging it, and see why @bot sometimes stays quiet (a video in the post, or @grok tagged too).
• Teach a taskShow your Bot a browser workflow once and it drafts the skill.
• TroubleshootingThe least-destructive order for fixing things, including “a routine did not run.”
• Keyboard shortcutsCmd or Ctrl+K to search everything; Cmd or Ctrl+D to dictate.
• Files and resultsHow to ask for work you can check: sources, screenshots, and what still needs approval.
• Grok Bot for MobileShare a photo or link from any iPhone app straight into a Bot chat.
• Settings and notificationsWhere your routines’ time zone lives, and how notifications follow the device you’re using.
• Use casesEight starter roles, each with a first prompt you can adapt.
• Team BotsOne Bot a whole team talks to, each person in a private chat.
• The Grok Bot changelogEvery release, in plain sentences.
• Missing a skill?Private skills are one library shared by all your Bots. If one seems missing, open Plugins in the sidebar, then the Skills tab.
• Your Bot’s own emailYour Bot can have its own address with plus aliases, and a routine can run only on mail sent to one alias. (@bot, Oct 16, 2026)
• The Action ButtonOn an iPhone 15 Pro or later, set the Action Button to start a voice chat with your Bot: Settings, Action Button, Shortcut, Grok Bot, Start Voice Chat.
• Live HTML previewsBots can read public X for research without connecting your account, and an HTML file your Bot makes opens as a live preview.

Words

UI

User interface. Everything a visitor sees and touches: words, buttons, pictures, menus.

UX

User experience. How it feels to use the page. Can people find their way? Do they feel at home or lost?

Scrollytelling

Telling a story as the reader scrolls. A picture changes as each short passage comes into view.

WCAG

Web Content Accessibility Guidelines, the shared rulebook for pages everyone can use. Version 2.2, level AA, is the usual goal.

Contrast ratio

How different two colors are in brightness, from 1 to 1 (none) up to 21 to 1 (black on white). Body text needs at least 4.5 to 1.

API

A way for your site to ask another service for something and get an answer back. Your page sends a request (“read this aloud”), the service sends back the result (the voice). Think of a waiter carrying your order to the kitchen.

Connector

A link that lets your Bot use a service you already have, like Gmail or Google Drive, with your permission.

Docs

Short for documentation: the official how-to pages a company writes about its own product. xAI’s live at docs.x.ai.

Domain

A web address you own, like yourname.com. You rent it by the year from a registrar.

Registrar

The company you buy a domain from, such as GoDaddy.

Deploy or publish

Putting your site online at its public address. Grok Build calls it Publish.

Footer

The quiet strip at the very bottom of a page: contact, home, and a few links.

Grok Build

The part of Grok that builds a working site or app while you talk, then publishes it to a grok.me address.

GitHub

A free website that keeps copies of your files, with every past version, so nothing is ever lost.

Secrets

A locked drawer in Grok Build for passwords and keys to other services, so they never show up in your page.

Favicon

The tiny picture in a browser tab next to your page’s name.

Console

xAI’s developer website, where you can make things like a custom voice and copy its ID.

Meta tags

Hidden labels at the top of a page that tell search engines and chat apps its title, description, and picture.

JSON-LD

A small block of JSON on your page that describes it to search engines: “this is a course, by this person.”

Skill

A saved set of instructions for how to do one task. Write it once and any Grok Bot, or Grok, can follow it again.

Routine

Tells one Bot when to do a job: on a schedule, or after something happens. The skill says how. The routine says when.

Canonical

The one true address of a page. If a page can be reached two ways, the canonical tag tells search engines which one is real.

Share card

The picture and title people see when someone pastes your link into a chat or a post. 1200 by 630 pixels is the usual size. Grok Build calls it the App cover.

Preview

A private, working copy of your site that only you see. You check it before anyone else does.

Publish

Putting your site on its public address so others can open it.

Canon

Your own rulebook: the short list of things that must always be true on every site you make. Mine is the constellation-os folder inside Bookof42/constellation-control.

World

My word for one of my sites. Each has its own look, and all of them belong to one family.

Repo

Short for repository: a folder on GitHub that keeps every version of your files, so nothing is lost.

DNS record

DNS is the internet’s address book. A DNS record is one line in it, set at your registrar, that says where your domain should point.

Alt text

A short written description of an image, read aloud by screen readers for people who can’t see it.

Reduced motion

A setting on phones and computers for people who feel sick or distracted when things move. Good pages listen to it.

Full-bleed

An image that runs all the way to the edges of the screen, with no margin.

Line length

How many letters fit on one line. About 60 to 75 characters is comfortable to read.

Chevron

The small arrow shape that shows a section can open or close.

JSON

A simple text format for lists and labels that programs can read. It looks like a tidy shopping list in curly brackets.

Brand tokens

Your brand’s small decisions, written down once with names: “ink is #1f2a33, body text is Newsreader.” Every site reads the same list.

Two quick answers

Do I need to know how to code?

No. You describe what you want in plain words, and Grok builds it in Grok Build.

What is the easiest way to start?

Open Grok, pick Build from the menu, tap the microphone, and say what you want.