tokens
Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
Works with
--- name: tokens description: Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON. license: Apache-2.0 --- # /tokens — Complete Design Token Generator Generate tokens for every design dimension: **Color:** Full palette (via /palette) + semantic tokens (via /semantic-color) **Typography:** Type scale (via /type-scale) + font stacks + line heights + letter spacing **Spacing:** Full spacing scale (via /spacing) **Shadows:** Elevation system (sm, md, lg, xl, 2xl) **Border Radius:** Scale (sm: 4px, md: 8px, lg: 12px, xl: 16px, 2xl: 24px, full: 9999px) **Breakpoints:** sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1440px Output ALL tokens in four formats: 1. CSS Custom Properties (:root block) 2. Tailwind config (theme.extend) 3. SCSS variables 4. W3C Design Tokens JSON
More 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.
