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.

ルーティン

  • 初回の実行では使いません。まず手動で1回通して確認してください。

プロンプト

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 を見る