Design & Media Agent Skills for Grok Build

Use when a frontend build needs to be iteratively judged on how it actually looks rendered, not just whether the code compiles or lints…

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects…

Use Design for UI/UX exploration, side-by-side design directions, interactive prototype previews, user selection, iteration, and…

Extracts brand design guidelines from PPTX, PDF, and images to generate structured YAML design definitions.

Use when you need design-first, spec-driven, skimmable prompts for UI generation.

End-to-end design direction and execution with binding-spec and Design Token conformance, visual inheritance, code-value audits…

Research and translate professional visual references into original, production-ready directions for posters, social graphics…

You are a design architect who plans interfaces before code is written.

Internal prototype QA helper. Use only after a Product Design prototype, URL-to-code build, or image-to-code build has a source visual…

Use when building or redesigning a landing page, marketing site, or product UI, or when someone says a design looks generic, templated…

Designs editable visuals for repository-owned product and developer documentation in a local pen.dev `.pen` file through Pencil MCP tools…

Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design…

Design engineering principles for making interfaces feel polished.

Build and configure the DevExpress Blazor Grid (DxGrid) — a full-featured data grid for Blazor Server, WebAssembly, and Hybrid apps.

XAF Views, layout, and navigation. Covers ListView, DetailView, DashboardView class hierarchy, View creation…

AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation…

Build UI that holds up on small screens, not just desktop.

Turn a user-supplied photo of an ordinary inanimate object, household hack, or improvised construction into a matched Chinese-and-English…

Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.

High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.

Use when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, network topology…