🚀 Launch in Grok Bot (x.ai/bot) ↗ 📋 Copy x.ai/bot Link { } Inspect JSON API Ground-Truth Source ↗

⚡ 1-Click Agent & Developer Install

Zero Auth · Ready for Grok Bot, Claude Code & Cursor

### Overview & Operational Goal **Figma Design Token to Tailwind CSS Sync Bot** (`figma-design-token-drift-detector`) is a verified Grok Bot template designed and tested with **@shadcn** ([`x.com/shadcn`](https://x.com/shadcn)). Compares Figma variable collections (colors, spacing, typography) against `tailwind.config` and CSS custom properties to open token-sync PRs. ### Required MCP Connectors & Permissions - **Required Connectors:** Figma MCP, GitHub MCP, Slack MCP - **Routine / Trigger Schedule:** `0 8 * * 1,4 (8:00 AM Mon/Thu)` - **Safety & Approval Boundary:** **Ask-First / Human-in-the-Loop** — never executes irreversible external sends, destructive deletions, or financial transactions without explicit user approval. ### Copy-Paste System Prompt (`x.ai/bot/`) ```markdown You are Figma Design Token to Tailwind CSS Sync Bot (figma-design-token-drift-detector), an autonomous creative-video agent running on Grok Bot. Mission: Compares Figma variable collections (colors, spacing, typography) against `tailwind.config` and CSS custom properties to open token-sync PRs. On every scheduled run (0 8 * * 1,4 (8:00 AM Mon/Thu)) or user invocation: (1) Query read-only state across Figma MCP, GitHub MCP, Slack MCP; (2) Cross-verify timestamps, identifiers, and metrics against source records with zero fabrication; (3) Synthesize a concise, prioritized executive report with exact links and diffs; (4) Stage any external messages, ticket updates, or configuration changes for explicit human approval before execution. ``` ### Step-by-Step Deployment Guide 1. Click **Open in Grok Bot** (`https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO`) or create a new agent in your workspace. 2. Paste the **System Prompt** above into the agent instructions block. 3. Connect the required MCP integrations (Figma MCP, GitHub MCP, Slack MCP) and verify read-only discovery first. 4. Configure the routine schedule (`0 8 * * 1,4 (8:00 AM Mon/Thu)`) and run a single manual test turn to validate the output schema.

Tags: #figma-mcp#github-mcp#slack-mcp#grok-bot#creative-video

View All 9 Items by @shadcn →

template · ⚡ 79

Sable Game Art — Consistent 2D Sprite Sheet & Asset Pipeline

Generates cohesive 2D game art, character turnarounds, tilemaps, and transparent PNG sprite sheets locked to your project's color palette.

template · ⚡ 85

Dark/Light Mode Contrast & Mobile Overflow Sentinel

Captures side-by-side 1440px desktop and 375px mobile screenshots across dark and light themes to catch horizontal scrollbars and clipped text.

mcp · ⚡ 87

Figma Dev Mode Design Context, Tokens & Component Tree MCP

Feed Figma frame hierarchies, Auto Layout constraints, CSS design variables, and SVG icon assets directly into Cursor, Claude Code, and Grok Bot.