What problem does it solve? Design teams need a visual reference of their design tokens and styles, but manually building and maintaining a token documentation page in Figma is tedious and quickly goes stale as tokens change. ## Core Features & Use Cases - Foundations Page Generation: Builds a sectioned Figma page covering color ramps, typography scale, spacing, radius, border widths, and elevation, with swatches live-bound to variables where Figma supports it. - Semantic Color Grouping: Organizes semantic tokens by role family (surface, text, border, alert/feedback, action) mirroring the primitive ramp structure. - Cover Page Creation: Builds a branded Cover page bound to the system's text styles and semantic colors so it survives light/dark mode switches. - Use Case: After running token-builder, a designer wants a shareable visual stylesheet of every token for stakeholder review — this skill generates the Foundations page and validates it in both modes. ## Quick Start Ask the agent to build a Foundations page that visually documents all of my Figma design tokens and styles.
