Grok Bot · 第 10 课
Playbook:设计
Designing Grok Bot with Grok Bot
| English | 中文 | 怎么记 |
|---|---|---|
| always-on | 一直在线 | 你不在,它还在干活 |
| artifact | 成品 | 能拿出来看的那件东西 |
| AFK | 不在电脑前 | Away From Keyboard |
| huddle | 碰头商量 | 几个人凑一块说清楚 |
| ambient | 环境式的 | 不抢眼,在边上待命 |
| invoke | 唤出 | 叫它出来 |
| prototype | 做原型 | 先做成能试的 |
| keyframe | 关键帧 | 动画里几个定住的画面 |
| production asset | 正式素材 | 产品里正在用的那份,不是截图仿的 |
| easing | 缓动 | 动画怎么加速、怎么停 |
| deterministic | 可精确调的 | 调一个数,结果就按那个数来 |
| auto-layout | 自动布局 | Figma 里按规则排,不手摆 |
| MCP | 模型上下文协议 | 让模型读到真实文件属性 |
| source of truth | 以谁为准 | 已有组件说了算,不靠眼睛估 |
用 Grok Bot 设计 Grok Bot / Designing Grok Bot with Grok Bot
At SpaceXAI, we're building agents that can take an idea and begin making it real. For designers, that changes what's worth exploring. Design has always been a process of giving form to an idea: making something, reacting to it, and changing it until it begins to feel right. As making becomes easier, we can explore more directions, react sooner, and let an idea reveal what it wants to become instead of defining it before we begin.
在 SpaceXAI,我们在做能把一个点子开始做实的代理。对设计师来说,这改变了什么值得去探。设计一直是给点子赋形:做出点东西、对它有反应、再改,直到开始觉得对。做变容易了,就能探更多方向、更早有反应,让点子自己露出它想成为什么,而不是动手前就先定义死。
I've been using Grok Bot to design Grok Bot. And while this hasn't replaced existing tools in my kit, using AI design agents has changed both how quickly I can bring an idea to life and how many ideas I'm willing to explore in the first place.
我一直在用 Grok Bot 设计 Grok Bot。它没有替换我工具箱里的现成工具,但用 AI 设计代理之后,一个点子做成实物有多快变了,我一开始愿意探多少点子也变了。
Grok Bot gives me a team of always-on AI design agents with their own computers. They have memory, can use tools, and can carry work from an initial idea to a finished artifact. They also keep working while I'm AFK, which matters because inspiration often strikes away from my desk.
Grok Bot 给我一组一直在线的 AI 设计代理,带着自己的电脑。(「自己的电脑」是作者的说法;正式文档写账号下所有 Bot 共用一台云电脑、各自屏幕。)它们有记忆,能用工具,能把活从最初点子带到成品。我不在电脑前它们还在干。这很要紧,因为灵感经常不在书桌前出现。
我这几个 Bot / Meet my bots
Figma Bro handles repetitive production work in Figma. Motion God helps me prototype as I describe how interactions should feel. Experiments is where I send ideas that I want to make tangible before I know exactly what they should become. Devbot answers engineering questions and helps the other bots understand how an idea should actually get built.
Figma Bro 管 Figma 里重复的生产活。Motion God 在我描述交互该是什么手感时帮我做原型。Experiments 接那些我想先做实、但还不知道它该成为什么的点子。Devbot 答工程问题,帮别的 Bot 搞清一个点子实际上该怎么建。这是作者自己的实验编制,不是产品硬限制。
The names make each bot's role clear, but they don't work in isolation. My design agents can huddle with one another, delegate parts of a project, and bring the work back together. Here are three recent examples.
名字让每个 Bot 的职责清楚,但它们不是各干各的。设计代理能互相碰头、把项目拆出去、再把活收回来。下面三个是最近的例子。
Experiments:你可以直接去做 / Experiments: you can just do things
One of the earliest ideas I wanted to explore was how to make Bots accessible anytime, anywhere. I wanted to try keyboard shortcuts, OS-level entry points, and other ways of invoking one, so I tasked Experiments with building a series of explorations in ambient Bot access.
最早想探的点子之一:怎么让 Bot 随时随地都能碰到。我想试快捷键、系统级入口、以及其他唤出方式,于是把「环境式访问 Bot」这一系列探索交给 Experiments。
The first placed Bot in the Mac's notch. It could remain tucked into a fixed location while it worked, emerge when something needed attention, and expand into a small workspace when I wanted to see more. It gave the agent a home without asking me to keep another window open.
第一个:把 Bot 放进 Mac 刘海。干活时它能缩在一个固定位置,有事要你看时探出来,想看多一点时展开成一小块工作区。代理有了落脚处,不用我再开一个窗口。
The second had Bot peek in from the corner of the desktop on hover. This felt less like a persistent interface and more like a character entering the scene when invoked or when it had something to say.
第二个:鼠标悬停时,Bot 从桌面角落探进来。这不太像常驻界面,更像一个角色:被唤出、或有话要说时,走进画面。
The third had Bot follow the cursor as a companion, creating a closer connection to whatever I was doing in the moment.
第三个:Bot 当同伴跟着光标,跟我当下在做的事贴得更近。
I described the behaviors to Experiments, and it worked out how to make each one tangible. It delegated the character movement and transitions to Motion God, the desktop behavior and implementation questions to Devbot, then brought everything together into prototypes I could actually try. I could encounter each version naturally throughout my day and notice when it felt helpful, distracting, or somewhere in between.
我把行为描述给 Experiments,它去想怎么把每一个做实。角色动作和转场派给 Motion God,桌面行为和实现问题派给 Devbot,再收成我能真去试的原型。一天里我会自然碰到每个版本,并注意到它是帮上忙、是打扰、还是介于中间。
That's why I keep an agent specifically for Experiments. I don't need to decide that an idea is sensible, feasible, or destined for the roadmap before making it real enough to judge. None of these concepts shipped exactly as explored. That wasn't really the point. I had an idea, made three versions real, and learned from each one. You can just do things.
所以我专门留一个 Experiments 代理。不必先判定点子合理、可行、或注定进路线图,再把它做实到能判断。这些概念没有一个按探索时的样子原样发出去。那本来也不是目的。我有一个点子,做成三个真能摸的版本,每个都学到东西。你可以直接去做。
Motion God:对着真东西干活 / Motion God: work with the real thing
Historically, motion is where I'd hand an idea off to an expert on the team. I could describe the behavior or mock up a few keyframes, but someone else would have to make it real before I could react to it. With Motion God, I can stay in the exploratory loop and direct the interaction by feel.
以前,动效是我会把点子交给团队专家的地方。我能描述行为,或做几个关键帧,但得等人做成真的,我才能有反应。有了 Motion God,我能留在探索循环里,凭手感指挥交互。
As part of an email campaign, I wanted to prototype a promotional video of the Grok Bot character. The sequence was fairly specific: Bot appears, notices the app window, and bounces into place. I didn't want the design agent to recreate the character from a screenshot or generate an approximation. I wanted it working with the same asset that already lived and moved in the product. So I had Motion God build a playground on localhost around the actual animation spec file. That way, I could manually adjust timing, springs, distance, scale, and easing while it was running.
一次邮件活动里,我想给 Grok Bot 这个角色做一段宣传视频原型。镜头相当具体:Bot 出现,注意到 App 窗口,再弹到位。我不想设计代理对着截图再画一个,或生成一个近似。我要它用产品里已经在动的那份素材。于是让 Motion God 围着真正的动画规格文件,在 localhost 上搭一个操场。跑着的时候,我就能手调时间、弹簧、距离、缩放、缓动。
But I also found myself giving short and comparative feedback: "hold the look down-left longer." "Bounce is too exaggerated." Motion God would make the change, and I could immediately watch the whole sequence again. That's much closer to how I naturally design motion. I usually don't know off the top of my head whether a transition should take 280 or 340 milliseconds before I see it. But I do know how to describe it, and I know when it feels just right.
同时我也会给又短又对比的反馈:「往左下看的时间再停久一点。」「弹得太夸张。」Motion God 改完,我能立刻整段再看。这更接近我自然做动效的方式。没看到之前,我通常说不准转场该 280 还是 340 毫秒。但我知道怎么描述,也知道什么时候手感刚好。
The interesting part wasn't that my bot "made an animation." It was that I could give it a real production asset and create a working environment around it. I could tune the motion directly through deterministic controls or continue directing Motion God in the same language I'd use with a human collaborator.
有意思的不是 Bot「做了个动画」。而是我能把正式素材给它,并围着它搭一个能跑的环境。我可以直接用可精确调的控件拧动效,也可以继续用跟真人搭档一样的语言指挥 Motion God。
Figma Bro:把重复的接走 / Figma Bro: handle the repetition
For the Grok Bot onboarding flow we wanted to showcase starter Bots that could take on tasks for a new user immediately. We internally crowdsourced a list of ideas such as "Chief of Staff" and "Inbox Triage." I was handed a list of 20 descriptions that still needed differentiated portraits and supporting attributes. I built one auto-layout component in Figma and asked Figma Bro to populate the rest.
Grok Bot 引导流程里,我们想展示一批起步 Bot,新用户马上就能把活交给它们。内部众包了一串点子,比如「幕僚长」「收件箱分拣」。我拿到 20 条描述,还缺差异化肖像和配套属性。我在 Figma 里做了一个自动布局组件,让 Figma Bro 把剩下的填上。
We also wanted to understand what tools newcomers were using, so that their first bot would be equipped with context. I created the page layout template, and sent Figma Bro off to search for the correct assets, and place them in order of usage likelihood.
我们也想搞清新人在用哪些工具,好让他们的第一个 Bot 带着上下文上场。我做了页面布局模板,打发 Figma Bro 去找正确素材,再按使用可能性排序放进去。
These tasks aren't creatively difficult, but they consume creative attention. They're also where small inconsistencies multiply: the wrong logo variant, an outdated component, a portrait pulled from a different source, or the tenth card spaced differently from the first.
这些活创意上不难,但会吃掉创意注意力。小不一致也在这里成倍长出来:用错 logo 变体、过期组件、肖像从别处扒、第十张卡片间距跟第一张不一样。
I don't want Figma Bro eyeballing any of this. Through the Figma MCP, it can inspect the actual file and use exact x and y positions, width, height, spacing, typography, fills, strokes, and component structure. If there's an existing frame or component, that is the source of truth.
这些我都不想让 Figma Bro 拿眼睛估。走 Figma MCP,它能检查真实文件,用精确的 x/y、宽、高、间距、字体、填充、描边、组件结构。已有画板或组件,就以那个为准。
把循环收紧 / Keep the loop tight
None of this has made design a one-shot process. It has made the loop tighter. With AI design agents I can get an idea into the world earlier, respond at higher fidelity, and spend more of my attention on the judgment between versions. Grok Bot doesn't replace that judgment. It gives me more opportunities to use it.
这些都没有把设计变成一锤子。它把循环收紧了。有 AI 设计代理,我能更早把点子放到世上,以更高保真度作反应,把更多注意力花在版本之间的判断上。Grok Bot 不替代那个判断。它给我更多机会去用那个判断。
读完能记住的三句话
Experiments exists so an idea can become real enough to judge before it is "sensible" or on the roadmap. Three ambient-access prototypes: Mac notch, corner peek, cursor companion. None shipped as explored.
专门留 Experiments,是为了点子还没「合理」、还没进路线图,就能做实到能判断。三个环境式访问原型:Mac 刘海、角落探头、跟着光标。没有一个按探索时的样子发出去。
Don't recreate a character from a screenshot. Give Motion God the real production asset and a localhost playground, then direct by feel: "hold the look down-left longer."
不要对着截图再画角色。把正式素材和 localhost 操场给 Motion God,再凭手感指挥:「往左下看再停久一点。」
Figma Bro must not eyeball. Through Figma MCP it reads exact x/y, spacing, type, fills. An existing frame is the source of truth.
Figma Bro 不准拿眼睛估。走 Figma MCP 读精确的坐标、间距、字体、填充。已有画板就是准星。