figma-bridgeExtract design information from Figma files. Pull design tokens, component structure, colors, typography, spacing, and export assets. Use when the user asks...
Install via ClawdBot CLI:
clawdbot install vanthienha199/figma-bridgeGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://api.figma.com/v1/[endpoint]Audited Apr 17, 2026 · audit v1.0
Generated Apr 19, 2026
Development teams use this skill to automatically extract design tokens like colors, typography, and spacing from Figma files, converting them into CSS custom properties or JSON. This streamlines the handoff process, ensuring consistency between design and code, and reduces manual errors in token translation.
Design system maintainers leverage the skill to generate structured documentation of Figma components, listing variants, properties, and states. This aids in creating living style guides, onboarding new team members, and maintaining component libraries across projects.
Marketing teams and content creators use the skill to export high-resolution assets like logos, icons, and images from Figma designs directly as PNG or SVG files. This enables quick asset retrieval for campaigns, websites, or presentations without manual design exports.
Front-end developers and prototyping teams apply the skill to convert Figma styles into Tailwind CSS configurations or other code frameworks. This accelerates prototyping by automating the translation of design specifications into usable code snippets for web development.
Design agencies and consultants use the skill to audit Figma files for design consistency, extracting tokens and components to compare against brand guidelines. This helps identify discrepancies, ensure compliance, and streamline client deliverables in multi-project environments.
Offer a basic version of the skill for free to individual developers and small teams, with premium features like advanced token extraction, batch exports, and integrations with other tools (e.g., GitHub, Jira) for a monthly subscription. Revenue comes from tiered plans based on usage limits and team size.
Sell enterprise licenses to large companies with custom integrations, enhanced security features (e.g., on-premise token storage), and dedicated support. This model targets organizations needing scalable solutions for design systems across multiple teams, with revenue from annual contracts and service fees.
Provide the underlying Figma API integration as a service, allowing developers to build custom applications on top of it. Charge based on API call volume, with pay-as-you-go pricing and bulk discounts. This model appeals to tech companies looking to embed design extraction into their own products.
💬 Integration Tip
Ensure the FIGMA_TOKEN environment variable is securely set in your deployment environment, and use the skill's URL parsing to automatically extract file keys from Figma links for seamless operation.
Scored Apr 19, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.