Design & Media Agent Skills for VS Code

Production-ready patterns for the Figma REST API and Plugin API.

Handle Figma REST API scope changes, deprecations, and migration tasks.

Implement Figma Webhooks V2 for real-time file, comment, and library

Apply the Gestalt principle of Figure-Ground Relationship — the perceptual separation of what''s perceived as the figure (the focus, the…

Generate, refresh, and validate DESIGN.md files that capture a project's visual identity as machine-readable design tokens (YAML…

Finding and accessing AI/LLM model brand icons from lobe-icons library.

Use when the user asks what could be animated or wants an interface to feel more alive; inspect code, reject unnecessary motion, and…

Use this skill when the question involves cursor speed, pointer acceleration curves, or interaction with input devices that vary in…

Use this skill when designing for the edges and corners of the screen — where the cursor cannot overshoot, making them effectively…

Create uxscii components with ASCII art and structured metadata when user wants to create, build, or design UI components.

Browse and view all available uxscii components including bundled templates, user components, and screens.

Generates e-commerce product visuals and creative artwork asynchronously using the Flyelep Image-2 model API.

Performs targeted AI image inpainting and background replacement using the Flyelep AI API.

Expands image canvases and outpaints borders to target aspect ratios using the Flyelep AI Tool API.

Apply Focus.AI brand guidelines to documents, presentations, websites, and other materials.

Translate a design brief — structured I-Lang or plain English — into a concrete DESIGN.md and optional HTML token preview.

Use when building a dynamic form-builder (admin-facing field editor, question builder, dynamic row list) in Next.js + React Hook Form +…

Visual designer — brand identity, color systems, typography, design tokens, and UI design.

Design, implement, and review production web forms and data-entry workflows.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.

Framer code component implementation guidance, platform constraints, layout annotations, property controls, and authoring best practices.