AP Variables Style Guide Generator

Generates a complete Style Guide page directly from your file's local variable collections — no master components or shared library required, works in any file.

Pick which collections (and even specific groups within them) to include, and the plugin builds a Section for each: a Colors section for color variables, a Tokens section for everything else — spacing, radius, typography, and so on — with a separate pair of sections per mode for multi-mode collections like Light/Dark.

Typography tokens are composed into live text samples: font size, line height, letter spacing, weight, and family are pulled together and actually bound to your variables, so each sample stays wired up if you update a value later. Color swatches distinguish primitives (swatch + hex) from semantic aliases (swatch + what they reference).

Re-running the plugin replaces a collection's previous sections instead of duplicating them, so it's safe to regenerate after changing your variables.