Design & Media Agent Skills for Grok Build

Generate custom favicons from logos, text, or brand colors - prevents launching with CMS defaults.

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls…

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component…

Generate or edit images via Google Gemini (nanobanana).

Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention…

Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

Export images, icons, and assets from Figma files via the REST API.

Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection…

Runs a structured PM design review against product requirements.

Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.

Build or update screens in Figma from code or description using design system components.

Build or update a professional-grade design system library in Figma from a codebase.

REQUIRED reading before using figma_execute.

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work.

Plan user flows and screen states for a Figma design before any designing starts.

Quarterly / monthly financial report — masthead with KPIs, revenue and burn charts, P&L summary table, top-line highlights, and an outlook…

Import UI screenshots and generate uxscii components automatically using vision analysis.

Optimize any form that is NOT signup or account registration — including lead capture, contact, demo request, application, survey, quote…

Use when asked to select a UI style, choose a design direction, pick a visual approach for a product, or match a style to an industry.

Harden designs for real-world use by systematically identifying and designing for every condition outside the happy path.