claude2figma
|
Works with
--- name: claude2figma description: | license: MIT --- # claude2figma > Catalogue stub — full package: [senlindesign/claude2figma](https://github.com/senlindesign/claude2figma) ## Decision tree 1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for `claude2figma` or related skill 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 senlindesign/claude2figma ``` ## Invoke after install - Skill name: `claude2figma` - Triggers: "claude2figma", "Figma token compliance", "Figma variables enforcement", "design system Figma" ## What it does An enforcement layer comprising four skills that ensure every Figma canvas write complies with your design system. Verifies that placed components are instances of master components (not detached), and that all color, typography, spacing, and border-radius values are bound to Figma variables and styles rather than raw values. Auto-verifies compliance after every canvas operation. ## When NOT to use - Reading or auditing existing Figma designs — use `figma-official-skills` (Figma MCP) - Code-to-design without a token-based design system - Token architecture outside Figma — use `design-tokens-skill`
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.
