Grokbot TemplatesGrokbot Templates
All use cases

Creative

Figma MCP + design-system skill: one keyframe → full flow

Designer bots redraw every screen from scratch when they do not know your file or system.

Share

What hurt

Peter Yang (@petergyang) quotes Peng Zheng (@pengzheng_), design lead for Grok Bot: connect Figma MCP so the designer bot can change frames directly; teach a skill covering how the Figma file is set up, the design system, and when to use which colors, typography, and spacing. Then create one keyframe and ask the bot to scale it into the whole flow and end-to-end screens. Tip with author-quoted method. Not affiliated with xAI.

What to install or create

Figma MCP → design-system skill → one keyframe → ask bot to scale the flow.

Bots

  • Designer bot

    Edit Figma via MCP using the design-system skill; scale one keyframe into full flows.

Plugins

  • Figma

    Required

Files

  • Skill body: Figma file layout, design tokens (color/type/spacing), when to use each.

Routines

  • None on the first run. Watch one manual pass first.

The prompt

Author-quoted designer skill intent

Quoted via @petergyang from @pengzheng_ — as published. Do not invent a second system prompt.

Last line is our approval fence: 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.

First run

  1. 1Read https://x.com/petergyang/status/2104360469591200093 (Peng Zheng via Peter Yang).
  2. 2Connect Figma MCP / plugin so the designer bot can edit frames.
  3. 3Write a skill that documents your Figma file setup, design system, and color/type/spacing rules — do not invent tokens the brand does not use.
  4. 4Create one keyframe yourself (the first ~5%).
  5. 5Ask the bot to scale that keyframe into the full flow; review every screen before shipping.

Approval fence

Review frames before shipping; Figma writes still need a human eye on brand.

What to tweak

Steal “first 5% keyframe + skill that knows your system.” Do not ask the bot to invent the design system live.

Source

Peter Yang @petergyang · Original post

Not affiliated with xAI. We did not write this prompt. Third-party template terms still apply.

Browse templates

Browse team blueprints

Pro pack

Want the full setup, not just the idea?

Pro packs give you the job text, prompts, schedules and pitfalls for popular use-cases.

See Pro