Design & Media Agent Skills

Guidelines on using Design System styles and components.

Design system accessibility auditor. Validates color tokens, CSS custom properties, Tailwind config, and design token files (Style…

Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system…

Translates an image (or a set of image references — screenshots, mockups, Figma URLs, live websites) into two mirrored design-system…

Extracts structured design tokens from codebases, style guides, Figma files, and screenshots into project-ready configuration files.

Design token management with the W3C Design Token spec, three-tier hierarchy (global/alias/component), OKLCH color, Style Dictionary…

Validate design system compliance in code and detect token usage violations

Bold aesthetic direction guidance for web design.

Use when the user asks for design tokens, DTCG tokens, theme systems, color/typography/spacing/radius/elevation/motion tokens, translating…

Design, critique, or refine product interfaces as coherent systems.

Anti-AI-generic design guidelines. Use when creating UI prototypes, reviewing designs for generic AI patterns, or setting up a project…

Build Designer Extensions for custom Webflow Designer functionality.

Generate a DESIGN.md design system for any project — for people with zero design knowledge.

Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and…

Turn one or more uploaded pet photos into a Q-style Codex v2 animated pet, then package the approved atlas as a self-installing offline…

Review UI code for Web Interface Guidelines compliance.

Create technical and product diagrams — architecture, IT current-state, flowchart, sequence, state machine, ER / data model, timeline…

Create distinctive, production-grade frontend interfaces with high design quality.

UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability…

Optional 3-5 direction picker for users who explicitly ask to compare visual directions.

Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering.