Design & Media Agent Skills for Claude Code

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

Open a Fabric.js-based SVG editor in the browser for collaborative visual prototyping.

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.

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

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

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

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.

Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing…

Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades

Lock identity via DNA, packs, adapters, and anchors.

Key green screen cleanly and composite plates.

Grade toward film stocks and print emulation.

Stop framing and grid drift across a sequence.

Emulate cyberpunk neon-noir city and wet chrome.

Create clear primary/secondary/tertiary action distinctions