figma-variables-tokens-generator
|
Works with
--- name: figma-variables-tokens-generator description: | license: MIT --- # figma-variables-tokens-generator > Catalogue stub — full package: [Shanmus4/figma-variables-tokens-generator](https://github.com/Shanmus4/figma-variables-tokens-generator) ## Decision tree 1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for `figma-variables-tokens-generator` or related directories. - Yes → invoke and proceed - No → go to step 2 2. **Shell access?** Yes → install below. No → show user the command (Claude Code: send with `!` as a chat message — add `-g` for global or omit for project-only). ## Install command ```bash npx skills add Shanmus4/figma-variables-tokens-generator ``` ## Invoke after install - Skill name: `figma-variables-tokens-generator` - Triggers: "Figma variables", "token generator", "W3C token ZIP", "Shanmus4" ## What it does Runs a structured questionnaire to understand your design system needs, then generates a W3C Design Token Community Group (DTCG) compliant ZIP archive. The ZIP contains JSON token files organized into collection tiers: Primitives (raw values), Semantic (contextual aliases), and Component (component-specific tokens). Also provides a companion Figma plugin that imports these JSON files into Figma Variables, respecting dependency order across tiers. ## When NOT to use - Code-side token management and pipelines — use `design-tokens-skill` - Existing design systems not based in Figma - Figma design operations unrelated to tokens — use the Figma MCP (`figma-official-skills`)
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.
