Design & Media Agent Skills for VS Code

Apply when product, UX, or feature-scope tradeoffs come up.

Turn travel photos with recognizable people into 3:4 posters where real photographed environments contain warm-white paper sketch figures…

Fires when a fellow wants to test a workflow on paper before building it — "paper test", "sketch it", "paper prototype", "sketch probe"…

Applies Anthropic brand colors (dark #141413, orange #d97757, blue #6a9bcc, green #788c5d), Poppins headings, and Lora body text to…

Create patent-style technical diagrams including flowcharts, block diagrams, and system architectures using Graphviz with reference…

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive.

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

PCBWay PCB fabrication and assembly — turnkey/consigned assembly, design rules, ordering workflow.

Create videos with Vue using Pellicule - a Vue-native video rendering library

Use this skill whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color…

Transforms photos into stylized printmaking posters across 12 authentic crafts with strict subject fidelity and structural preservation.

Produces believable photographic direction with camera position, lens character, depth of field, and natural rendering.

Use this skill when designing structural constraints that prevent invalid actions through the shape, layout, or behavior of the design…

Use when the user asks which frontend library or package to choose for UI components, motion, charts, interaction, state, styling, or…

Use this skill when picking the appropriate prototype fidelity for an iteration cycle — sketches vs. wireframes vs. clickable Figma vs…

Use this skill when deciding what to prototype, what fidelity to use, and when to stop prototyping and ship.

Generate and edit media via Picsart MCP API tools.

Build a reusable visual style guide from reference images.

Use @pierre/theme for Pierre syntax and editor themes.

Use @pierre/theming to manage runtime themes.

Use @pierre/trees for an interactive file tree.