token-image

Generate a series of social/marketing image React components in the same theme.

Vocabulary

Term	What it is	Scope
Viewport	Shared outer frame component. Safe-area padding, content alignment, root container, optional branding. Written once, reused by every image in the set.	Per set
Stylesheet	Shared CSS file. Starts from default-styles.css, adds preset-specific overrides. Styles all typography, cards, grids, and layout via token CSS vars. Written once, imported by every image.	Per set
Brief	Per-image content instructions written by the orchestrator. Includes exact text strings, layout description, creative direction, metadata. Writers implement the brief — they do not make content decisions.	Per image
Layout	Content arrangement description inside the Viewport. Written by the orchestrator per image (e.g., "split — title left, 2x2 cards right"). The shared agent creates CSS classes to support all layouts in the set.	Per image