Design & Interfaces skills

Algorithmic Art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original…

Canvas Design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should

Figma Code Connect

Creates and maintains Figma Code Connect template files that map Figma components to code snippets.

Figma Create New File

Create Figma Design, FigJam, and Slides files in a team workspace.

Figma Design To Code

Translate Figma designs into application code using design context, tokens, and component mappings.

Figma Generate Design

Translate application pages and multi-section layouts into Figma designs.

Figma Generate Diagram

Create editable diagrams in FigJam using the Figma diagram generation tool.

Figma Generate Library

Build or update a professional-grade design system in Figma from a codebase.

Figma Generative Plugins

Create and update generative plugins in Figma.

Figma Implement Motion

Translates Figma motion and animations into production-ready application code.

Figma Shaders

Create and update shaders in Figma.

Figma Swiftui

SwiftUI ↔ Figma translation.

Figma Use

Work with Figma files through the use_figma MCP tool, following the publisher?s file and design guidance.

Figma Use Figjam

Work with FigJam boards through the Figma MCP tool.

Figma Use Motion

Motion / animation context for the usefigma MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation…

Figma Use Slides

Work with Figma Slides through the Figma MCP tool.

Frontend Design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Generate Project Plan

Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams →…

Theme Factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate…

Video Interaction Mapper

Analyze UI screen recordings and map interaction states into Figma.