Design Mode

Design mode adds a visual layer system on top of the algorithmic sketch output. Layers are rendered by plugins and composited together using blend modes and transforms.

How It Works

1. The algorithm renders the base sketch to a canvas
2. Design layers are stacked on top in z-order
3. Each layer is rendered by its plugin (typography, filters, shapes, etc.)
4. The compositor blends everything together with transforms and blend modes
5. The result is a unified visual output

When to Use Design Mode

• Add text overlays, titles, or annotations
• Apply post-processing filters (grain, vignette, color grading)
• Add composition guides (rule of thirds, golden ratio)
• Overlay shapes, symbols, or reference images
• Create complex multi-layered compositions

Key Concepts

• Layers — Each layer has a type (from a plugin), properties, transform, blend mode, and opacity
• Plugins — 17 plugins provide 70+ layer types (typography, filters, shapes, guides, etc.)
• Compositor — Renders the layer stack non-destructively over the algorithm output
• Transform — Position, size, rotation, scale, and anchor for each layer
• Blend Modes — 16 CSS blend modes (normal, multiply, screen, overlay, etc.)

MCP Tools

Use the design layer tools to create and manipulate layers programmatically:

• design_add_layer — Add a new layer
• design_list_layers — See all layers
• design_update_layer — Change layer properties
• design_set_transform — Position and size layers
• design_set_blend — Set blend mode and opacity

See the full Design Layers reference for all 12 tools.