Plugins
Shapes
Geometric primitives — rectangles, ellipses, lines, polygons, stars, and blend shapes.
Geometric shape layers for composing visual elements in the design overlay.
npm install @genart-dev/plugin-shapes
| Type ID | Display Name | Description |
|---|
shapes:rect | Rectangle | Axis-aligned rectangle with optional rounded corners |
shapes:ellipse | Ellipse | Ellipse or circle |
shapes:line | Line | Straight line between two points |
shapes:polygon | Polygon | Regular polygon with configurable sides |
shapes:star | Star | Star shape with configurable points and inner radius |
shapes:blend | Blend | Blended transition between two shapes |
| Property | Type | Default | Description |
|---|
width | number | 100 | Width in pixels |
height | number | 100 | Height in pixels |
cornerRadius | number | 0 | Corner rounding radius |
fill | color | "#000000" | Fill color |
stroke | color | "none" | Stroke color |
strokeWidth | number | 1 | Stroke width |
| Property | Type | Default | Description |
|---|
radiusX | number | 50 | Horizontal radius |
radiusY | number | 50 | Vertical radius |
fill | color | "#000000" | Fill color |
stroke | color | "none" | Stroke color |
strokeWidth | number | 1 | Stroke width |
| Property | Type | Default | Description |
|---|
x2 | number | 100 | End point X |
y2 | number | 100 | End point Y |
stroke | color | "#000000" | Line color |
strokeWidth | number | 2 | Line width |
dashArray | string | "" | Dash pattern (e.g. "5,3") |
| Property | Type | Default | Description |
|---|
sides | number | 6 | Number of sides (3-12) |
radius | number | 50 | Outer radius |
fill | color | "#000000" | Fill color |
stroke | color | "none" | Stroke color |
strokeWidth | number | 1 | Stroke width |
rotation | number | 0 | Rotation in degrees |
| Property | Type | Default | Description |
|---|
points | number | 5 | Number of points |
outerRadius | number | 50 | Outer radius |
innerRadius | number | 25 | Inner radius |
fill | color | "#000000" | Fill color |
stroke | color | "none" | Stroke color |
strokeWidth | number | 1 | Stroke width |
| Property | Type | Default | Description |
|---|
steps | number | 10 | Number of interpolation steps |
easing | select | "linear" | Easing function for interpolation |
| Tool | Description |
|---|
design_add_shape | Add a shape layer with type and properties |
design_set_shape_style | Update fill, stroke, and style properties |
design_set_polygon | Set polygon or star point count and radii |
{
"tool": "design_add_layer",
"arguments": {
"type": "shapes:polygon",
"properties": {
"sides": 8,
"radius": 120,
"fill": "#e63946",
"stroke": "#1d3557",
"strokeWidth": 3
}
}
}