Design & Media Agent Skills for Grok Build

Make your first Figma REST API call to fetch a file and inspect its

Translate Figma designs into production-ready code with 1:1 visual fidelity.

Set up Figma REST API authentication with personal access tokens or

Set up Figma integration for AI coding agents.

Avoid the most common Figma API integration mistakes and anti-patterns.

Load test Figma API integrations and plan for scale.

Set up a local development workflow for Figma plugin and REST API projects.

Reference architecture for production Figma API integrations.

Production-ready patterns for the Figma REST API and Plugin API.

Place a set of local screenshots/images into Figma as a labeled, sectioned board (auto-layout, title + section rows, layer names =…

Handle Figma REST API scope changes, deprecations, and migration tasks.

Implement Figma Webhooks V2 for real-time file, comment, and library

Apply the Gestalt principle of Figure-Ground Relationship — the perceptual separation of what''s perceived as the figure (the focus, the…

Generate deterministic publication-quality architecture, workflow, and pipeline diagrams from structured JSON (FigureSpec) into editable…

Generate, refresh, and validate DESIGN.md files that capture a project's visual identity as machine-readable design tokens (YAML…

Finding and accessing AI/LLM model brand icons from lobe-icons library.

Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence.

Use this skill when the question involves cursor speed, pointer acceleration curves, or interaction with input devices that vary in…

Use this skill when designing for the edges and corners of the screen — where the cursor cannot overshoot, making them effectively…

Apply Focus.AI brand guidelines to documents, presentations, websites, and other materials.

Translate a design brief — structured I-Lang or plain English — into a concrete DESIGN.md and optional HTML token preview.