figmaImport 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.
Install via ClawdBot CLI:
clawdbot install maddiedreese/figmaGrade Good — 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/v1Audited Apr 17, 2026 · audit v1.0
Generated Feb 27, 2026
A design agency needs to migrate a client's legacy design system from multiple tools into a unified Figma library. This skill extracts all components, styles, and design tokens, audits for consistency, and generates comprehensive documentation and CSS custom properties for handoff, ensuring a smooth transition and maintainable system.
A financial technology company must ensure its mobile app design meets WCAG AA standards for regulatory compliance. The skill analyzes color contrast, font sizes, and interactive elements, generating detailed accessibility reports to identify and fix issues before development, reducing legal risks and improving usability.
A marketing team requires high-quality assets in multiple formats for a global campaign. This skill batch-exports frames and components as PNG, SVG, and PDF, organizing them into platform-specific folders with proper scaling, streamlining asset delivery and ensuring brand consistency across digital and print materials.
A SaaS company wants to optimize its Figma component library by identifying unused components and inconsistencies. The skill analyzes usage patterns, extracts design tokens, and generates recommendations for consolidation, improving design efficiency and reducing maintenance overhead for the product team.
A freelance designer needs to provide a polished handoff package to a client, including assets, style guides, and specifications. The skill exports assets in required formats, audits brand compliance, and generates documentation templates, saving time and enhancing professionalism in client deliverables.
Offer this skill as part of a monthly subscription service for design teams, providing ongoing access to Figma analysis, export, and auditing features. Revenue is generated through tiered pricing based on usage, such as number of files analyzed or assets exported, appealing to agencies and in-house teams.
Sell the skill as a consulting service for specific projects, such as design system audits or accessibility checks, with fixed pricing per engagement. This model targets clients needing expert analysis without long-term commitments, generating revenue through project fees and potential upsells for additional services.
License the skill to large enterprises or design tool providers as a white-labeled solution, integrating it into their internal workflows or products. Revenue comes from annual licensing fees and customization charges, leveraging the skill's capabilities for bulk processing and compliance in regulated industries.
💬 Integration Tip
Integrate this skill into CI/CD pipelines by automating design token generation and accessibility checks, ensuring consistent updates and compliance in development workflows without manual intervention.
Scored Apr 19, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-conv...
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...