Plugins
Layout Guides
Compositional guides — grid, rule of thirds, golden ratio, diagonals, and custom.
Non-rendering overlay guides that help compose elements according to classical design principles.
npm install @genart-dev/plugin-layout-guides
| Type ID | Display Name | Description |
|---|
guide:grid | Grid | Regular grid overlay with configurable columns and rows |
guide:thirds | Rule of Thirds | 3x3 grid with intersection points |
guide:golden-ratio | Golden Ratio | Phi-based division lines |
guide:diagonal | Diagonal | Diagonal guide lines from corners |
guide:custom | Custom Guide | User-defined guide lines at arbitrary positions |
| Property | Type | Default | Description |
|---|
columns | number | 4 | Number of columns |
rows | number | 4 | Number of rows |
color | color | "#00aaff40" | Guide line color |
lineWidth | number | 1 | Line width in pixels |
showIntersections | boolean | false | Highlight intersection points |
| Property | Type | Default | Description |
|---|
color | color | "#00aaff40" | Guide line color |
lineWidth | number | 1 | Line width in pixels |
showPowerPoints | boolean | true | Show intersection power points |
| Property | Type | Default | Description |
|---|
color | color | "#ffaa0040" | Guide line color |
lineWidth | number | 1 | Line width in pixels |
orientation | select | "both" | Orientation: horizontal, vertical, both |
| Property | Type | Default | Description |
|---|
color | color | "#ff440040" | Guide line color |
lineWidth | number | 1 | Line width in pixels |
type | select | "corners" | Type: corners, baroque, sinister |
| Property | Type | Default | Description |
|---|
guides | array | [] | Array of guide line definitions |
color | color | "#ff00ff40" | Default guide line color |
lineWidth | number | 1 | Default line width |
| Tool | Description |
|---|
design_add_guide | Add a standard guide layer (grid, thirds, golden-ratio, diagonal) |
design_add_custom_guide | Add a custom guide with arbitrary line positions |
design_clear_guides | Remove all guide layers |
design_toggle_guides | Toggle visibility of all guide layers |
design_list_shapes | List available guide types and their properties |
{
"tool": "design_add_layer",
"arguments": {
"type": "guide:golden-ratio",
"properties": {
"color": "#ffaa0060",
"lineWidth": 2,
"orientation": "both"
}
}
}