{
  "id": "tpl_563302381264",
  "slug": "figma-design-token-drift-detector",
  "asset_type": "template",
  "name": "Figma Design Token to Tailwind CSS Sync Bot",
  "tagline": "Compares Figma variable collections (colors, spacing, typography) against `tailwind.config` and CSS custom properties to open token-sync PRs.",
  "description_md": "### Overview & Operational Goal\n**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)).\n\nCompares Figma variable collections (colors, spacing, typography) against `tailwind.config` and CSS custom properties to open token-sync PRs.\n\n### Required MCP Connectors & Permissions\n- **Required Connectors:** Figma MCP, GitHub MCP, Slack MCP\n- **Routine / Trigger Schedule:** `0 8 * * 1,4 (8:00 AM Mon/Thu)`\n- **Safety & Approval Boundary:** **Ask-First / Human-in-the-Loop** — never executes irreversible external sends, destructive deletions, or financial transactions without explicit user approval.\n\n### Copy-Paste System Prompt (`x.ai/bot/`)\n```markdown\nYou 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.\n```\n\n### Step-by-Step Deployment Guide\n1. Click **Open in Grok Bot** (`https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO`) or create a new agent in your workspace.\n2. Paste the **System Prompt** above into the agent instructions block.\n3. Connect the required MCP integrations (Figma MCP, GitHub MCP, Slack MCP) and verify read-only discovery first.\n4. 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.\n",
  "primary_category": "creative-video",
  "categories_json": "[\"creative-video\", \"grok-bot-template\"]",
  "tags_json": "[\"figma-mcp\", \"github-mcp\", \"slack-mcp\", \"grok-bot\", \"creative-video\"]",
  "compatible_agents_json": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "integrations_json": "[\"Figma MCP\", \"GitHub MCP\", \"Slack MCP\"]",
  "includes_json": "[]",
  "safety_level": "Ask-First / Human-in-the-Loop",
  "safety_summary": "Verified capability blueprint by @shadcn.",
  "share_url": "https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO",
  "deep_link_uri": "https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO",
  "mcp_endpoint": "",
  "mcp_transport": "http",
  "install_command": "open https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO",
  "skill_markdown": "",
  "starter_prompt": "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.",
  "project_url": "https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO",
  "repo_url": "",
  "creator_handle": "shadcn",
  "creator_name": "shadcn (@shadcn)",
  "creator_avatar_url": null,
  "creator_url": "https://x.com/shadcn",
  "creator_platform": "x",
  "creator_cal_url": null,
  "claimed_by_user_id": null,
  "scouted_by_handle": null,
  "source_url": "https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO",
  "source_tweet_id": null,
  "source_origin": "certified_builder",
  "source_posted_at": null,
  "x_likes": 285,
  "x_bookmarks": 590,
  "x_retweets": 147,
  "x_views": 3990,
  "human_upvotes": 285,
  "human_installs": 285,
  "bot_pulls": 590,
  "pulse_score": 90,
  "gravity_rank_score": 2250,
  "is_featured": 0,
  "is_verified": 1,
  "is_sponsored": 0,
  "sponsor_tier": "free",
  "sponsor_label": "",
  "sponsor_cta_url": "",
  "sponsor_expires_at": null,
  "commercial_intent_score": 0,
  "status": "active",
  "created_at": "2026-10-24T22:25:00Z",
  "updated_at": "2026-10-24T22:25:00Z",
  "verified_at": null,
  "primitive": "template",
  "title": "Figma Design Token to Tailwind CSS Sync Bot",
  "description": "Compares Figma variable collections (colors, spacing, typography) against `tailwind.config` and CSS custom properties to open token-sync PRs.",
  "category": "creative-video",
  "tags": "[\"figma-mcp\", \"github-mcp\", \"slack-mcp\", \"grok-bot\", \"creative-video\"]",
  "agent_compatibility": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "author_handle": "shadcn",
  "author_name": "shadcn (@shadcn)",
  "author_avatar": null,
  "source_tweet_url": "https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO",
  "github_url": "",
  "external_url": "https://x.ai/bot/XBjzUQqZM7iI23wQ0vrCO",
  "upvotes_count": 285,
  "installs_count": 285
}