Design & Media Agent Skills

Own product requirement through approved UI design via Google Stitch, produce a Design Contract, then hand off to draft-technical-tickets.

Analyze any website's design system — detects UI framework, extracts colors, typography, and component patterns.

Build and finish frontend pages through a safe inspect–implement–run–visual-QA–fix–recheck cycle.

Deconstruct any live website into reusable recipe — extract HTML, CSS, JS, design tokens, animations.

Draw UI proposals, redesigns, and flow diagrams as hand-drawn Excalidraw/tldraw-style HTML boards — before/after screen mockups, annotated…

A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper.

Converts any block of text into a conceptual sketch image.

Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.

Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture…

Emulate giallo color, gloves, and set-piece kills.

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes.

Trigger: When implementing or modifying an AG-Grid component.

Trigger: When creating, refactoring, or modifying Angular components, modules, or templates.

Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design…

Use systematic spacing with 25% minimum jumps, start with excess whitespace

Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors

Emulate Art Nouveau and Art Deco ornament.

Name artist/era references without dumping lists.

Stop background textures crawling across shots.

Emulate Caravaggio tenebrism and Baroque mass.

Light blue-hour silhouettes and dusk rims.