延伸阅读
Grok 延伸阅读
发布指南中列出的使用 Grok 进行设计的教程、文档和演示。
Grok 
OpenDesign 用 Grok
在 OpenDesign
做设计。
如何在 OpenDesign 中使用 Grok Build 设计界面：以活动海报为参照，在改动前先制定计划，从 brief 到审阅完成的落地页任务，以及开始前需要了解的限制。
从 brief 到界面01 / Grok
您带来想法↗
“一个由海报生成的活动页面，
先有计划，再写代码。”
一个完整的 Grok 设计任务
一个 Grok 设计任务：从 brief 到界面
一个完整呈现的任务：你交出的 brief 与约束条件、返回的产物，以及在完成之前仍需运行的检查。下方界面是为本页构建的示例说明，并非记录下来的 Grok 运行结果。
1设计 Brief 与约束条件
Brief根据附带的海报图片，为一场两天的开发者大会设计落地页：日期与场地、日程预告、演讲者以及购票行动号召。桌面端与手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互购票 CTA、日程日期切换、演讲者卡片
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：你、Grok 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Grok
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Grok 产物：1440px 和 390px 下的活动页面
4交付前审查
Layout
网格与间距
主视觉、议程分轨与佐证信息基于 8px 网格排布；海报图像是裁切而非压缩。
Hierarchy
视觉层级
先展示日期与标题，然后是购票按钮；强调色只用于标记该按钮。
Responsive
移动端布局
标题、日期与购票按钮位于图像上方；议程分轨按顺序堆叠。
Interaction
交互检查
打开购票页、切换日程日期、跟随某一张演讲者卡片。
Fit
Grok 何时适合该任务，何时不适合
适合使用 Grok 的情形
- 识别图像的截图 → UI。 Grok 模型支持图像输入，可将参考图转换为响应式标记，并据此校验输出结果。
- 变更前的计划模式。 在文件被修改之前，你可以审核并批准一份结构化计划，从而在改动前而非 diff 之后审查设计意图。
- AGENTS.md + MCP。 上下文文件承载你的约定；Figma MCP 服务器则将真实的设计上下文引入代码。
- 使用你的账户登录。 通过 OAuth 使用 SuperGrok 或 X Premium+ 进行身份验证，或使用 xAI API key（BYOK）以无界面方式使用。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 你没有该 Agent 所需的凭证。 所需项：xAI SuperGrok OAuth（`grok login`）。OpenDesign 不提供也不代理凭证。
- 你的团队使用 Hermes 或 Codex 工作。 这些 Agent 有各自的页面；工作区相同，配置方式不同。参见相关 Agent。
兼容性
开始前的 Grok 要求
本指南涉及通过 OpenDesign 桌面应用连接的 Grok。已发布参考资料的核对日期为 2026 年 9 月 6 日。
工具范围Grok，由 xAI 提供
Grok Build 是 xAI 的终端编程 Agent，以 Grok Build 的形式发布。它会读取你的代码库、编辑文件、运行 shell 命令，并在行动前规划多步骤的工程工作。本页介绍如何通过 OpenDesign 使用 Grok 设计界面，而非 Grok 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证xAI SuperGrok OAuth（`grok login`）
xAI SuperGrok OAuth（`grok login`）。使用你的 SuperGrok 账户或 xAI API key（BYOK）进行身份验证——凭证保留在你的本机上。本页不承诺任何配额或价格。
系统与版本桌面应用或源码
请查看下载页面获取桌面版本。源码快速入门中的 Node.js 和 pnpm 要求适用于从源码运行，而不适用于安装桌面软件包。最低兼容的 Grok 版本：此处未验证。
连接检查成功的标志
按照你所安装版本显示的连接说明操作，然后运行一个小任务。确认 Grok 已处理该任务，且产物能够打开。仅下载并不能建立可用的连接。
从桌面应用开始
三步完成 Grok 设置
先下载，为你所安装的版本完成 Grok 设置，然后检查一个小的结果。按此路径操作，你不需要从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备你的 Grok 连接
按照你所安装版本中的 Grok 说明操作。使用你的 SuperGrok 账户或 xAI API key（BYOK）进行身份验证——凭证保留在你的本机上。
xAI 模型文档# 1. Install Grok Build (Grok Build) on macOS/Linux curl -fsSL https://x.ai/cli/install.sh | bash # 2. Start it in your project and authenticate on first run cd your-project grok login # opens your browser; sign in with SuperGrok / X Premium+ # or, for headless / CI use, set an xAI API key: # export XAI_API_KEY=xai-...摘自已发布指南中的 Grok 设置说明；请查阅供应商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Grok 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Grok 设计工作流
Grok 设计工作流的五个步骤
同一个活动页面任务，从 brief 到通过验证的文件全程记录。每一步都列出你提供的内容、Grok 所做的工作、OpenDesign 贡献的部分，以及你需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Grok阅读 brief 和项目的指令文件；遇到不明确之处会主动询问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Grok在写下第一行代码之前，将 DESIGN.md 的 token 和风格规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Grok 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的 hook。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Grok规划各个部分，编写 HTML、CSS 和 JavaScript，运行文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Grok阅读你在预览上的评论，并准备下一轮修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Grok原地应用这些更改并重新运行文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Grok 设计资源
限制
Grok 的限制、人工检查与后备方案
- 范围本页涉及作为连接到 OpenDesign 的 Agent 的 Grok，而非 Grok 的全部功能。
- 使用限额使用限额和费用取决于你使用的凭据（xAI SuperGrok OAuth（`grok login`））。本页不对免费额度作任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Grok 与 OpenDesign 的常见问题
Grok Build 真的能完成设计工作吗？
可以——在具备审美 skill、设计系统以及上下文中真实的参考图片的情况下，Grok Build 能产出生产级、响应式的 UI，其具备图像理解能力的 Grok 模型也有助于对照参考图核验输出。若缺少这些上下文，它往往会退回到通用样式，这正是 OpenDesign 所填补的空白。
如何验证 Grok Build 的身份？
你通过浏览器使用 SuperGrok 或 X Premium+ 订阅登录（`grok login`），因此无需管理 API key。若用于无头环境或 CI，你也可以改用 xAI API key。无论哪种方式，OpenDesign 都不会代理你的凭据。
具体来说，是什么让 Grok Build 特别适合设计？
两点：其计划模式让你可以在任何更改落地之前审查方案，其 Grok 模型支持图像输入，因此能很好地读取参考截图。两者都有帮助——但审美仍来自你提供的设计系统、skill 与参考资料。
前端设计该用 Grok Build 还是 Claude Code？
两者都很出色。Claude Code 以具体、了解代码库的设计决策著称；Grok Build 的优势在于计划模式审查与具备图像理解能力的 xAI 模型。许多团队同时使用两者——OpenDesign 让你可以切换 Agent，而无需改变设计工作流。
如何将 Grok Build 连接到 Figma？
将 Figma MCP 服务器添加到你的 MCP 配置中。之后 Grok 便可拉取真实的设计上下文——组件、变量、布局数据——从而使生成的代码匹配源文件，而非仅是近似还原。
用 Grok 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。