返回 Grok 教程

一句话生成 Web 应用:Grok Build 原理、grok.me 部署与导出实战(2026)

ChongPay Editorial Team2026/9/24更新于 2026/9/288 分钟阅读Grok BuildGrok 4.7grok.meAI生成应用Web开发

过去要把一个突然冒出来的产品想法做成可用的网页发给朋友测试,流程相当繁琐:配本地环境、选框架、写页面、买服务器、解析域名。即便熟练的工程师,从零搭个像样的 MVP 原型也得花上半天。

Grok Build 的思路是把整套流程收缩进一个聊天界面里:只要输入一句话需求,Grok 就能在会话中直接写代码,并在对话里生成一个能操作的 Web 应用预览,还能发布成一个 grok.me 链接,访问范围可以设成仅自己、持链接者或所有人。

先分清一个容易混的点:xAI 有两个都叫 Grok Build 的产品。一个是终端里的编程代理(CLI),9 月 21 日起由 Grok 4.7 驱动;另一个是 grok.com 和 Grok App 里的应用构建,7 月以 Build Mode 上线、只给 SuperGrok Heavy,8 月 19 日起所有档位都能用,发布到 grok.me,在 Settings → Usage 里这一项叫 App Builder。本文讲的是后者,官方没有说它用的是 Grok 4.7。无论是想做个活动展示页、团队内部仪表盘,还是轻量计算小工具,都可以先用它做出能用的第一版。

想用 Grok 快速构建原型应用? 应用构建 Free 也能用;开通 SuperGrok 能拿到更高的用量额度,做得多、改得勤时更够用。ChongPay 支持直接绑定到你的自有 Grok 账号开通(Super 对应 SuperGrok,Super Heavy 对应 SuperGrok Heavy),无需提供密码,支持微信、支付宝付款,预计到账时间以套餐卡片和订单页为准。可直接查看 Grok 充值页。

Grok Build 是怎么在聊天框里“跑”应用的

跟一般的“让 AI 吐一段代码、自己手动复制出去保存”不同,Grok Build 会在对话里直接给出一个能操作的预览,不用安装、也不用配置任何东西:

  1. 就地编写与构建:Grok 写好代码,直接在对话里构建出一个能运行的版本;
  2. 同屏实时交互:预览就在对话界面里。你可以直接在里面点按钮、填输入框、拉动滑块,就像打开了一个真实网页;
  3. 对话式迭代:看哪里不顺眼,直接打字告诉它,比如“把按钮改成圆角、背景换成深色模式、加一个按照时间排序的下拉选框”,它会接着改,预览跟着更新。

它的工程生态配齐了哪些功能

为了让做出来的东西不只是停留在自己电脑里的临时演示,xAI 围绕 Build 补齐了一整套实用功能:

功能特性实际作用使用建议
grok.me 独立地址点击“Publish”发布后,每个应用都有自己的 xxx.grok.me 地址,可设为仅自己、持链接者或所有人可访问适合直接把原型发到微信群、社媒或发给客户演示
Custom Domains(自定义域名)支持把你自己的域名指向应用适合拿来当正式的个人作品集或品牌轻量营销页
Remix(分叉与二创)作者允许后,别人可以基于已发布的应用复制一份来改,类似 GitHub Fork看到别人开放 Remix 的仪表盘或小游戏,能省去从零搭建的功夫
Export to GitHub(代码导出)把整个项目推送到你的 GitHub 仓库原型验证成功后,可以在编辑器或终端版 Grok Build(CLI)里接着开发,也方便专业研发团队接手做深度二开
Secrets(密钥存储)把第三方服务的 API Key(如支付接口、外部数据源 Token)存在应用代码之外避免将私密 Token 硬编码进网页端代码
原生模型能力直连给应用开启 SpaceXAI API 后,应用里可直接调用 Grok 的聊天、生图和语音能力,按应用单独开启,可随时撤销不用自己申请和管理 API Key,就能为小工具加上 AI 问答或智能绘图功能

上手实战:搭一个活动投票与倒计时看板

举个实际场景:团队打算在社群里举办一次小型设计评选,需要一个“倒计时 + 6 件作品展示 + 点赞投票”的极简页面。

第一步:给出清晰的第一版指令

在 Grok 输入框直接发送:

请帮我构建一个单页比赛展示看板:
1. 顶部展示一个倒计时器(距离 10 月 1 日 24:00 截止);
2. 页面主体包含 6 个参赛作品卡片,每张卡片有作者名、作品简介和“为它点赞”按钮;
3. 点击点赞按钮后,票数实时加 1,并用 LocalStorage 保存当前票数,刷新不丢;
4. 整体采用深色科技风设计,移动端下卡片自动转为单列排列。

回车后,Grok 会在对话里直接把可操作的网页跑出来。你可以在上面点点赞,刷新一下看看票数是不是还在。

第二步:对话微调

在对话里继续追问,进行局部调优:

“把卡片阴影稍微加重一点;在顶部增加一个搜索框,允许按作者名字即时过滤卡片。”

预览会跟着更新,改完可以直接在里面试搜索和样式。

第三步:生成链接分享

调整满意后,点击 Publish(发布),在发布面板里确认网址和访问范围,就能得到类似 design-contest-2026.grok.me 的链接。访问范围选“持链接者”或“所有人”,别人就能在手机或电脑浏览器上直接打开。

注意:第一步的指令用 LocalStorage 存票数,票数只保存在每个人自己的浏览器里,别人投的票你看不到。要真正汇总所有人的投票,需要让 Grok 改成把票数存到服务端,能不能做到以实际构建结果为准。

理性看待:Grok Build 的适用场景与局限

虽然一句话搓网页非常方便,但要清楚它的工程边界:

  • 非常适合:产品原型概念验证(MVP)、团队内部临时数据看板、社群营销活动单页、个人轻量小工具、教学演示。
  • 不适合直接当高并发商业系统:涉及高并发交易对账、复杂权限控制、深度依赖重型关系型数据库的核心商业系统,依然需要严谨的后端与数据安全架构。遇到这类需求,建议用 Grok Build 快速做完前台原型,再通过 Export to GitHub 交给研发深度开发。

常见问题

Q: 免费账号能用 Grok Build 吗? A: 可以。grok.com 和 Grok App 里的应用构建从 8 月 19 日起对所有档位开放(包括 Free),网页、iOS、Android 都能用;用量受各档位额度限制,付费档从周使用池里扣。终端版 Grok Build(CLI)是另一个产品,官方 x.ai/build 页写可以免费试用,但 grok.com 页面上有一处写的是“仅限 SuperGrok、X Premium+ 和 SuperGrok Heavy”,以实际登录后的提示为准。

Q: 生成的应用能一直访问吗? A: 官方没有公布已发布应用的保留期限或下线规则。发布时可以设置访问范围(仅自己、持链接者、所有人);重要的项目建议用 Export to GitHub 留一份代码。

Q: 别人能看到我应用的源代码吗? A: 发布出去的网页,浏览器端的代码本来就能被访问者读到。Remix 是你允许别人基于已发布应用复制一份来改的功能。第三方服务的 API Key 要放进 Secrets,官方说明它存在应用代码之外,不要把密钥直接写进代码。

Q: 国内用户如何充值 Grok? A: 可通过 ChongPay Grok 充值 使用微信或支付宝办理,绑定到个人账号,无需账号密码。

参考来源

更新记录

  • 2026-09-28:更正 Grok Build 的产品划分(拆分终端编程代理 CLI 与 grok.com/App 里的应用构建,Grok 4.7 驱动只适用于 CLI,应用构建 8 月 19 日起全档位可用)、grok.me 地址格式与访问范围、Remix 与原生模型调用的实际说明,删去「右侧分屏」「热重载容器」「永久链接」「零成本」「10 分钟」等无依据说法,到账说明改为以套餐卡片和订单页为准,并补充 LocalStorage 票数不能跨用户汇总的提醒。

看完教程,三步完成 Grok 充值

只需账户 UUID,无需密码;微信 / 支付宝支付,充值失败全额退款。

查看 Grok 套餐