Design & Media Agent Skills

Designs relationship-driven system architectures, workflows, and visual diagrams tailored for technical reviews and executive presentations.

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

Analyze and design pricing strategies including pricing models, competitive pricing analysis, willingness-to-pay estimation, and price…

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…

Frontend engineer — UI components, dashboards, design system implementation, and frontend audits.

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…

Product design analysis from context and screenshots.

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

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

Documents the reasoning behind design decisions including alternatives considered, trade-offs evaluated, and principles applied.

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

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

Generates brand-aligned, production-ready PowerPoint presentations using curated design systems and standardized business archetypes.

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

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

Use this skill when deciding *what to surface* and *what to tuck* — the editorial choices behind progressive disclosure.

Define and document prototype interactions, transitions, and hotspots

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

Generate or edit raster images through a user-configured third-party OpenAI Images API-compatible endpoint when a task explicitly requests…