Grokbot TemplatesGrokbot Templates
Todos los casos de uso

Creativo

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.

Compartir

Qué dolía

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.

Qué instalar o crear

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

    Obligatorio

Archivos

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

Rutinas

  • Ninguna en el primer uso. Mira primero una pasada manual.

El prompt

Author-quoted designer skill intent

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

La última línea es nuestra valla de aprobación: 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.

Primer uso

  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.

Valla de aprobación

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

Qué ajustar

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

Fuente

Peter Yang @petergyang · Publicación original

Sin afiliación con xAI. No escribimos este prompt. Siguen aplicando las condiciones de las plantillas de terceros.

Explorar plantillas

Explorar planos de equipo

Paquete Pro

¿Quieres la configuración completa, no solo la idea?

Los paquetes Pro te dan el texto de la tarea, los prompts, los horarios y los tropiezos de los casos de uso más populares.

Ver Pro