Design & Media Agent Skills for Windsurf (legacy)

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…

Use this skill when laying out a form, fixing a confusing form, or building a form layout convention for a design system.

Facilitates collaborative public space co-design workshops to capture stakeholder needs, iterate visual prototypes, and generate…

Publish your own work to 21st.dev and manage it from the terminal with the `21st` CLI (`@21st-dev/cli`): publish a React component to a…

Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

Generate localized cover images and reusable image prompts from the shared Punk style library for articles, Xiaohongshu notes, WeChat…

Generate complete Python scripts that build polished PowerPoint decks with python-pptx and real slide content.

Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement

React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs…