Design & Media Agent Skills for Grok Build

Use when building creative browser demos with @chenglou/pretext — DOM-free text layout for ASCII art, typographic flow around obstacles…

Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns…

PrimeNG table patterns for ASP.NET Zero (simple and paginated, lazy loading)

Paginate multi-page PDFs generated from HTML or markdown (Puppeteer, Playwright, wkhtmltopdf, weasyprint, react-pdf print CSS) by what you…

Use this skill whenever the question is *how* to design well over time or *how* to make a design that doesn''t break — accessibility…

Shoot, animate, title and optionally score product demo videos with Remotion — for a landing page, docs, onboarding, an app store listing…

Use this skill when Product Design is explicitly invoked or the main task is product design exploration, UX research, flow auditing or…

Apple-level product design — visual systems, UX flows, accessibility, proprietary visual language, design tokens, prototyping and…

Product design across UI/UX, design systems, prototyping, and user research.

Maximum-level Product Inventor and Design Alchemist — combines Product Thinking, Design Systems, UI Engineering, Cognitive Psychology…

Product mockups and showcases: photoreal product/packaging scenes via Gemini 3.1 Flash image editing, and pixel-exact device frames…

Create or redesign SaaS and AI product landing pages where a real workflow, interface, or deterministic demo is the central proof.

Use for product, UX, UI, flow, frontend, or product-facing backend work where an agent must reason about user outcomes, decisions, states…

Designs, audits, and builds high-converting product showcase frontends with interactive workflow demos, design system tokens, and claim…

Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness.

Use this skill when picking the *mechanism* for revealing tucked content — accordion vs. modal vs. tab vs. separate page vs. tooltip.

Hide optional configuration fields behind subtle "+ Add X" CTAs that reveal inline editors when clicked, with a LivePreview strip as the…

Design QA audit — red flags, severity classification, visual quality scorecard.

Build throwaway, fixture-driven OpenClaw Clack or Pi TUI prototypes and compare multiple interactive variants side by side in tmux without…

Use this skill whenever the design has unknowns that need testing — when a sketch could resolve a debate, when assumptions about user…