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