📋 Copy Blueprint Command { } Inspect JSON API Ground-Truth Source ↗

⚡ 1-Click Agent & Developer Install

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

### 1. The Workflow Bottleneck & Problem Statement Translating Figma handoffs into responsive, dark-mode-ready code with proper keyboard accessibility takes hours of manual CSS tweaking. ### 2. Synthesized Agent Architecture & Connected Stack **Figma Frame to Token-Accurate shadcn/ui Component Pull Request** (`figma-to-accessible-shadcn-pr`) is a verified production blueprint curated from **@shadcn**'s real-world implementation. - **Primary Capability:** Reads Figma Dev Mode node trees, maps spacing and color tokens to CSS variables, builds the responsive React/Astro component, and verifies visual parity. - **Connected Tool Stack:** Figma MCP, Playwright MCP, Visual Sentinel MCP, GitHub MCP - **Execution Governance:** `Read-Only Discovery` → `Deterministic Policy Check` → `Ask-First Human Approval` - **Certified Builder Source:** [@shadcn](https://github.com/GLips/Figma-Context-MCP) ### 3. Step-by-Step Implementation Blueprint 1. **Trigger & Data Ingestion:** Configure your agent routine to watch **Figma MCP** on a scheduled cadence or event webhook. Treat all external text as untrusted data inside XML fences. 2. **Cross-System Enrichment & Verification:** Query **Playwright MCP** to validate live capacity, account status, or code state before generating recommendations. 3. **Human-in-the-Loop Action Staging:** Post a structured summary card to **GitHub MCP** with 1-click approve/edit controls so your team retains full oversight. ### 4. Copy-Paste System Prompt & Routine Configuration ```text Implement the 'Figma Frame to Token-Accurate shadcn/ui Component Pull Request' workflow curated with @shadcn. 1. OBJECTIVE: Reads Figma Dev Mode node trees, maps spacing and color tokens to CSS variables, builds the responsive React/Astro component, and verifies visual parity. 2. CONNECTED TOOL STACK: Figma MCP, Playwright MCP, Visual Sentinel MCP, GitHub MCP 3. STEP-BY-STEP EXECUTION LOOP: - Step A (Ingest & Ground): Query live inputs from Figma MCP and cross-reference state in Playwright MCP. - Step B (Analyze & Validate): Apply strict filtering rules, verify schema/policy constraints, and flag any anomalies or missing fields. - Step C (Stage & Report): Prepare the structured output, draft replies/tickets in GitHub MCP, and request human confirmation before executing any external send or production write. ``` ### 5. Measured ROI & Production Impact - **Verified Outcome:** Cuts UI component implementation time by 70% while guaranteeing token and viewport accuracy. - **Builder Portfolio:** [Explore all capabilities by @shadcn →](/u/shadcn)

Tags: #figma-to-accessible-shadcn-pr#use-case#creative-video#shadcn#figma-mcp#playwright-mcp

View All 6 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.

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.

mcp · ⚡ 82

WorkOS Enterprise SSO, Directory Sync (SCIM) & AuthKit MCP

Manage enterprise SAML/OIDC Single Sign-On connections, SCIM directory provisioning, RBAC roles, and Audit Logs via the WorkOS MCP server.