screen_to_css_variables
Generate CSS variables from a screen design: produces a semantic :root block covering colors, typography, spacing, shadows, and border radii. Supports optional dark-mode overrides.
Instructions
Extracts CSS custom properties (variables) from a screen's design. Produces a complete :root block with semantic naming for colors, typography, spacing, shadows, and border radii. Supports optional dark-mode variable overrides.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| screenId | Yes | The screen ID to extract from. | |
| namespace | No | Optional namespace prefix for variable names (e.g. 'app' produces --app-color-primary). | |
| projectId | Yes | The Stitch project ID. | |
| includeDarkMode | No | Generate a prefers-color-scheme:dark override block with inverted/adjusted values. |