全部使用案例

创作

Figma MCP + 设计系统技能:一个关键帧 → 整条流程

设计 Bot 若不了解你的文件与设计系统,会从头重画每一屏。

分享

当时卡在哪

Peter Yang(@petergyang)转述 Grok Bot 设计负责人 Peng Zheng(@pengzheng_):接上 Figma MCP,让设计 Bot 直接改画板;写一条技能讲清 Figma 文件结构、设计系统,以及颜色/字体/间距何时用。然后做一帧关键画面,让 Bot 扩成整条流程与端到端界面。技巧 + 作者方法原文。与 xAI 无关。

要装什么、建什么

Figma MCP → 设计系统技能 → 一帧关键画面 → 让 Bot 扩成流程。

机器人

  • Designer bot

    经 MCP 按设计系统技能改 Figma;把一帧关键画面扩成整条流程。

插件

  • Figma

    必装

文件

  • 技能正文:Figma 文件结构、设计 token(色/字/距)、何时用哪套。

例行任务

  • 第一次先别开。自己看过一轮再说。

提示词

作者原文:设计技能意图

经 @petergyang 转述自 @pengzheng_ — 按其公开原文。不要另编系统提示词。

最后一行是我们加的审批围栏:Never send, post, spend, or buy without my explicit yes.

The bot connects to Figma MCP so it will be able to directly change frames and update the design. I have this skill that teaches the designer bot how my Figma file is set up, what my design system is, and when to use the right colors, typography, spacing. This way I can create one keyframe and then ask the bot to scale it into the whole flow and make end-to-end screens.

Never send, post, spend, or buy without my explicit yes.

第一次怎么跑

  1. 1阅读 https://x.com/petergyang/status/2104360469591200093(Peng Zheng 经 Peter Yang)。
  2. 2接上 Figma MCP/插件,让设计 Bot 能改画板。
  3. 3写技能:文件结构、设计系统、色/字/距规则——不要编品牌没有的 token。
  4. 4自己先做一帧关键画面(大约前 5%)。
  5. 5让 Bot 把该帧扩成整条流程;上线前逐屏复审。

审批围栏

上线前复审画板;Figma 写入仍需人眼看品牌。

你该改什么

偷「先做 5% 关键帧 + 懂你设计系统的技能」。别让 Bot 现场发明设计系统。

出处

Peter Yang @petergyang · 原帖

与 xAI 无关。提示词不是我们写的。第三方模板条款照旧适用。

去看模板

去看团队蓝图

Pro 设置包

想要完整设置,而不只是思路?

Pro 设置包为热门用例提供岗位描述、提示词、排程与踩坑。

了解 Pro