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

File	Purpose	When to use
`scripts/init.sh`	Bootstrap workspace (tokens, deps, `--preset <name>` or `--tokens <path>` required)	After intake: if `.token-image/` workspace missing
`assets/<preset>/tokens.json`	Token set for the chosen design system	Selected during intake; copied to `.token-image/tokens/` by init.sh