Grokbot TemplatesGrokbot Templates
Все сценарии

Творчество

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.

Поделиться

Что болело

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.

Что установить или создать

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

Боты

  • Designer bot

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

Плагины

  • Figma

    Нужен

Файлы

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

Рутины

  • На первом запуске их нет. Сначала пройдите один раз вручную.

Промпт

Author-quoted designer skill intent

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

Последняя строка — наш барьер одобрения: 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. 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.

Барьер одобрения

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

Что поправить

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

Источник

Peter Yang @petergyang · Исходный пост

Не связаны с xAI. Этот промпт написали не мы. Условия сторонних шаблонов по-прежнему действуют.

Смотреть шаблоны

Смотреть схемы команд

Пакет Pro

Нужна полная настройка, а не только идея?

В пакетах Pro — текст задачи, промпты, расписания и подводные камни для популярных сценариев.

Смотреть Pro