$npx skillfedfor your agent

Qt Figma Component Generation

This skill transforms Figma components into idiomatic Qt Quick Controls by extracting design metadata via MCP and mapping variants, states, and tokens to QML. It works with two implementation patterns—inline self-contained components or style singletons for multi-theme support—and requires the design-tokens.json output from the token-extraction skill.

Qt Figma Component Generation automates QML control creation from Figma design systems using MCP extraction and token mapping.

AI-generated summary based on this skill's SKILL.md

322 34 unlicensed, metadata onlyupdated by TheQtCompanyRnD

Decision gist · record as of 2026-07-09

Qt Figma Component Generation automates QML control creation from Figma design systems using MCP extraction and token mapping. This skill transforms Figma components into idiomatic Qt Quick Controls by extracting design metadata via MCP and mapping variants, states, and tokens to QML. It works with two implementation patterns—inline self-contained components or style singletons for multi-theme support—and requires the design-tokens.json output from the token-extraction skill.

manual: git clone https://github.com/TheQtCompanyRnD/agent-skills → cp -r agent-skills ~/.claude/skills/qt-figma-component-generation

Use it when

  • Yes.
  • Qt Figma Component Generation is a Figma-to-Qt code generator that streamlines designer-to-developer handoff.
Same gist for agents: .md · .json

Install

TheQtCompanyRnD/agent-skills/qt-figma-component-generation · repository language: QML

generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub

Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How does Qt Figma Component Generation convert Figma mockups to Qt?

Qt Figma Component Generation transforms Figma components into idiomatic Qt Quick Controls by extracting design metadata via MCP and mapping variants, states, and tokens to QML. The skill supports two implementation patterns: inline self-contained components or style singletons for multi-theme support, and requires the design-tokens.json output from the token-extraction skill.

Can I generate Qt components automatically from Figma designs?

Yes. Qt Figma Component Generation automates the creation of Qt components directly from your Figma designs. It extracts design metadata, maps component variants and states to QML, and generates idiomatic Qt Quick Controls code ready for integration into your application.

What is a Figma to Qt code generator and how does it work?

Qt Figma Component Generation is a Figma-to-Qt code generator that streamlines designer-to-developer handoff. It extracts design tokens and component metadata from Figma, then automatically generates QML code that maps to Qt Quick Controls, supporting both single-component and multi-theme singleton patterns.

Can Qt Figma Component Generation export Qt UI code directly from Figma?

Yes. Qt Figma Component Generation enables direct export of Qt UI code from Figma designs. It uses MCP to extract design metadata and generates QML that maps variants, states, and design tokens to Qt Quick Controls, supporting inline components or style singletons for theme management.

What implementation patterns does Qt Figma Component Generation support?

Qt Figma Component Generation works with two patterns: inline self-contained components for single-use cases, and style singletons for multi-theme support. Both patterns map Figma design tokens, variants, and states to idiomatic Qt Quick Controls code.

What dependencies does Qt Figma Component Generation require?

Qt Figma Component Generation requires the design-tokens.json output from the token-extraction skill. This file provides the design tokens that the skill maps to QML, ensuring consistent styling across your generated Qt components.

Let your AI agent find skills like this

Example. Real query, live index.

You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.

wish › “Generate Qt components automatically from Figma designs”

Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →

Related skills

Qt Figma Token Extraction
by TheQtCompanyRnD · TheQtCompanyRnD/agent-skills

Pull design tokens, text styles, and variables directly from Figma into a structured design-tokens.json and QML Theme singleton. This skill maps Figma variables to Qt types, handles multi-mode systems, and generates production-ready QML files including color primitives, typography scales, and spacing tokens—no manual conversion needed.

no license declared → metadata onlyupdated Jul 2026
★ 322repo stars
Qt Ui Design
by TheQtCompanyRnD · TheQtCompanyRnD/agent-skills

Qt UI Design guides you through building interfaces for Qt/QML projects across desktop, web, and embedded platforms. It walks you through target platform, screen geometry, design system selection, and content hierarchy before you start, then applies established UX principles—layout, typography, motion, and interaction patterns—to keep your design coherent and usable.

no license declared → metadata onlyupdated Jul 2026
★ 322repo stars
Product Design
by alekspetrov · alekspetrov/navigator

This skill streamlines the design-to-code workflow by connecting directly to Figma, extracting design tokens and component patterns, then auditing your codebase for alignment. It generates phased implementation plans with task breakdowns and acceptance criteria, cutting handoff time from hours to minutes.

no license declared → metadata onlyupdated Jul 2026
★ 196repo stars
Qt Qml
by TheQtCompanyRnD · TheQtCompanyRnD/agent-skills

Qt Qml enforces structural and stylistic conventions for QML development, covering file organization, import scoping, control selection, component loading, binding patterns, and layout management. Apply it when producing or examining QML source code—not for conceptual questions alone. The skill guides you toward cleaner, more maintainable UI code by flagging violations silently during reviews and keeping generated code concise and rule-aligned.

no license declared → metadata onlyupdated Jul 2026
★ 322repo stars
Figma Generate Library
by Devin-AXIS · Devin-AXIS/iPolloWork

Build production-ready design systems in Figma by orchestrating multi-phase workflows that extract tokens from code, create variable foundations, construct components with proper variant sets, and document design principles. Works alongside the figma-use skill to enforce quality patterns from real-world systems.

no license declared → metadata onlyupdated Jul 2026
★ 1,925repo stars
Qt Cmake Project
by TheQtCompanyRnD · TheQtCompanyRnD/agent-skills

Qt Cmake Project helps you create and maintain Qt 6 projects using CMake, handling executable targets, libraries, QML modules, and resource configuration. It enforces modern CMake best practices and Qt 6 conventions to prevent common build mistakes.

no license declared → metadata onlyupdated Jul 2026
★ 322repo stars

More skills Qt Qml Test Run (NOASSERTION) · Qt Qml Test (NOASSERTION) · Qt Qml Docs (NOASSERTION) · Qt Qml Profiler (NOASSERTION) · Qt Qml Review (NOASSERTION)

Tags
design-to-codeui-automationcross-platform-devfigma-integrationcode-generationcomponent-libraryrapid-prototypingdesigner-developer-workflow