Plugin Architecture

How design plugins extend the layer system with new types, properties, and MCP tools.

The design system is extensible through plugins. Each plugin registers layer types with the PluginRegistry, making them available for use in any sketch.

Plugin Interface

Every plugin implements DesignPlugin:

interface DesignPlugin {
  id: string;                    // e.g. 'typography'
  name: string;                  // e.g. 'Typography'
  version: string;               // semver
  description: string;
  layerTypes: LayerTypeDefinition[];
  mcpTools: McpToolDefinition[];
}

Layer Type Definition

Each layer type declares its properties schema:

interface LayerTypeDefinition {
  typeId: string;          // e.g. 'typography:text'
  displayName: string;     // e.g. 'Text'
  properties: LayerPropertySchema[];
}

Property Types

11 property types are supported:

Type	Description	Example
`string`	Text input	Font family, text content
`number`	Numeric slider	Font size, opacity
`boolean`	Toggle switch	Enable/disable features
`color`	Color picker	Fill color, stroke color
`select`	Dropdown menu	Alignment, blend mode
`range`	Min/max range	Value range
`point`	X/Y coordinate	Position
`size`	Width/height	Dimensions
`array`	List of values	Gradient stops
`object`	Nested properties	Shadow settings
`enum`	Fixed set of values	Shape type

Built-in Plugins

17 plugins ship with the platform. See the Plugins reference for details on each one.

Registration

Plugins are registered at startup:

import { PluginRegistry } from '@genart-dev/core';
import typography from '@genart-dev/plugin-typography';
import filters from '@genart-dev/plugin-filters';

const registry = new PluginRegistry();
registry.register(typography);
registry.register(filters);

The desktop app and web editor register all 17 plugins automatically.