design-tokens
Generate or improve a complete design token system covering color, typography, spacing, radius, shadows, motion
Works with
---
name: design-tokens
description: Generate or improve a complete design token system covering color, typography, spacing, radius, shadows, motion
license: MIT
---
# /design-tokens: Generate Design Token System
Generate a complete design token system for the project.
## Usage
```
/design-tokens # Auto-detect brand color, generate full system
/design-tokens #3b82f6 # Generate from specific brand color
/design-tokens --format tailwind # Output as Tailwind config
/design-tokens --format css-vars # Output as CSS custom properties
/design-tokens --format json # Output as JSON tokens
```
## Flow
1. Read existing tokens/theme (if any)
2. Determine brand color (from existing or user input)
3. Generate complete token system with `uiux_generate_tokens`:
- **Color**: primary, secondary, neutral (11 steps), semantic (success/error/warning/info), surfaces (light + dark)
- **Typography**: font, scale (8 steps), line heights, weights
- **Spacing**: 4px base scale (16 steps)
- **Border radius**: 4 steps (sm, md, lg, full)
- **Shadows**: 3 levels (sm, md, lg)
- **Motion**: duration + easing tokens
4. Output in requested format
## Output Formats
- **css-vars**: `:root { --color-primary: ...; }` with dark mode media query
- **tailwind**: `tailwind.config.js` theme extension
- **json**: W3C Design Tokens Community Group format
- **js**: JavaScript module exportMore Design Systems skills
stitch-design-taste
leonxlnx/taste-skill
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
figma
heygen-com/hyperframes
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
image
coreyhaines31/marketingskills
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
