skills.rest
codigodoleo
codigodoleoOFFICIAL
Explore all skills by this author →
GitHub

superpowers-sage:sage-design-system

Automate Sage design system token extraction and component scaffolding.

13|Updated Mar 19, 2026
Search Tags:#design#tailwind#tokens#design-system#blade#sage#kitchensink
One-click install
npx skills add https://github.com/codigodoleo/superpowers-sage --skill superpowers-sage-sage-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superpowers-sage:sage-design-system
Source: https://github.com/codigodoleo/superpowers-sage/tree/main/skills/sage-design-system
Command: npx skills add https://github.com/codigodoleo/superpowers-sage --skill superpowers-sage-sage-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Establish a cohesive Sage design system by translating design tokens from design tools into CSS tokens, Tailwind theme references, and Blade UI components, enabling a scalable design-to-code workflow.

Core Features & Use Cases

  • Token extraction and mapping to @theme tokens across CSS, typography, and spacing
  • Blade UI components and layout primitives, plus a kitchensink workflow
  • End-to-end design-to-code pipeline from design artifacts to a runnable theme with SVG icons and CSS custom properties

Quick Start

Automate the Sage design system setup by connecting your design tool URL or using the detector to extract tokens and scaffold UI and layout components

Frequently Asked Questions about superpowers-sage:sage-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from Figma and map them to Tailwind theme references?▼

You can extract design tokens from Figma by using the detector to map them to @theme tokens across CSS, typography, and spacing, generating CSS custom properties and Tailwind theme references for a scalable design-to-code workflow.

What is a kitchensink workflow for a Blade UI design system?▼

A kitchensink workflow validates all Blade UI components and layout primitives in a single view. It enforces a guarded validation step to ensure your Sage design system components render correctly before deployment.

Do I need an existing design-tokens.css file before scaffolding Blade components?▼

Yes, you need existing resources/css/design-tokens.css and UI and layout components as prerequisites. The system enforces these prerequisites before running the guarded kitchensink validation step for your Sage design system.

Can I use offline design sources to generate CSS design tokens and Blade UI components?▼

Yes, the token extraction and component scaffolding pipeline supports Figma, Paper, Pencil, or offline sources. It translates design artifacts into CSS tokens, Tailwind theme references, and Blade UI components.

What's the best way to automate Sage design system setup from design to code?▼

The best way to automate Sage design system setup is connecting your design tool URL or using the detector to extract tokens and scaffold UI and layout components into a runnable theme with SVG icons.

Related Skills

Explore More Design & Creative Skills→
gkswls5006-webgkswls5006-web

moai-design-tools

Automate design-to-code workflows from Figma to React and Tailwind.

Community
Advanced
iButtersiButters
3

react-web

Build React 19+ web applications with Server Components and TypeScript.

Community
Advanced
agentset-aiagentset-ai
2.0k

baseline-ui

Enforce Tailwind CSS defaults and accessible primitives for consistent UI.

Official
Basic
daodaoleedaodaolee

design-system-patterns

Define design tokens and implement theming with CSS custom properties.

Community
Advanced