Design & Media Agent Skills for Windsurf (legacy)

Use this skill to choose the dominant information structure for a website, interface, portfolio, archive, product page, profile…

Apply a named visual style or brand look to a Figma file — writing its palette as local color variables, its type rules as text styles…

Fetch and apply reusable creative styles (visual + voice) from StyleRef.io.

Design taste and identity. Use for UI polish, landing pages, redesigns, "it looks like AI", and client brand work. Loads the project…

Designs, builds, redesigns, and audits high-quality visual frontends using a guided research-to-render workflow.

Ask Claude Code to make a taste-driven call on something ambiguous — UI polish, prose phrasing, naming, formatting.

Design taste and process for anything a person will look at in a browser — landing page, dashboard, prototype, deck.

Create a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed…

Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and…

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

Make a Bun/TS command-line tool's output look designed — the render layer, in the house style used by `qb` and `see`.

A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single…

Render, collect, compare, and visually verify representative OpenGraph or social-card image variants as a labeled contact sheet.

Thumbnails and cover art. Use for a YouTube thumbnail, Shorts cover, title card, thumbnail text over a face or frame,.

Use when adding timers (`setInterval`, `setTimeout`), event listeners (`window.addEventListener`, `document.addEventListener`…

Analyze user experience patterns, best practices, and accessibility requirements for specific domains and applications.

Evaluate a UI or user flow against usability heuristics and provide actionable feedback

Family router for the 10 UX design laws.

Design user flows and navigation structure following proven UX patterns

Create UX-first plans as flow trees, then attach concrete function names, files, and implementation anchors after the high-level flow is…

When to activate: user research, UX research, user interviews, usability testing, surveys, diary studies, research plan, synthesis, insight