superpowers-sage:sage-design-system

You can convert Figma design references into Tailwind v4 theme tokens by extracting design specs into a `resources/css/design-tokens.css` file with full token traceability for your Sage theme.

The best way to set up a Sage design system is to generate Blade UI component atoms and structural layouts, establish Tailwind v4 @theme tokens, and validate the visual rendering with a Playwright kitchensink screenshot.

Yes, Playwright is required to take screenshots of a generated kitchensink view, validating that every UI component variant and structural layout renders correctly before committing the visual foundation.

Yes, you can resume a partially completed Sage design system setup because the workflow detects existing files and supports continuing from any partially completed phase without overwriting your progress.

You validate Blade UI component variants by generating a dedicated kitchensink view route, taking a Playwright screenshot to verify every component renders correctly, and requiring a dedicated commit before continuing architecture.

You need to establish a Tailwind v4 token foundation during initial Sage project setup or before any architecture and build work when design validation is missing, preventing theme development from stalling.