Qt Figma Component Generation
作者 TheQtCompanyRnD71d6c10da78bLicenseRef-Qt-Commercial OR BSD-3-Clause收录于 2026年10月8日更新于 2026年10月8日
Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "convert Figma components to QML", "build the component library", "extract button/input/checkbox from Figma", or anything similar. Requires design-tokens.json and QML design system singletons to already exist (from the token extraction skill). Uses Figma MCP to inspect components one at a time and maps variants, states, sizing, and token usage to idiomatic Qt Quick Controls 2 patterns. Trigger this skill at the component generation step of any QML design-system workflow.
仅公开文件列表。将技能安装到工作区后即可查看文件内容。
| 路径 | 大小 | 类型 |
|---|---|---|
| assets/qt-controls/BadgeLabel.qml | 4 KB | text/plain |
| assets/qt-controls/BadgeLabelStyle.qml | 3.4 KB | text/plain |
| assets/qt-controls/BadgeNotification.qml | 3.8 KB | text/plain |
| assets/qt-controls/BadgeNotificationStyle.qml | 2.7 KB | text/plain |
| assets/qt-controls/Button.qml | 5.6 KB | text/plain |
| assets/qt-controls/ButtonStyle.qml | 8.2 KB | text/plain |
| assets/qt-controls/Card.qml | 22.6 KB | text/plain |
| assets/qt-controls/CardStyle.qml | 4.4 KB | text/plain |
| assets/qt-controls/CheckBox.qml | 4.2 KB | text/plain |
| assets/qt-controls/CheckBoxStyle.qml | 5.4 KB | text/plain |
| assets/qt-controls/ComboBox.qml | 7.1 KB | text/plain |
| assets/qt-controls/ComboBoxStyle.qml | 6.8 KB | text/plain |
| assets/qt-controls/DialogButtonBox.qml | 2 KB | text/plain |
| assets/qt-controls/DialogButtonBoxStyle.qml | 1.2 KB | text/plain |
| assets/qt-controls/Dialog.qml | 4.2 KB | text/plain |
| assets/qt-controls/DialogStyle.qml | 2.1 KB | text/plain |
| assets/qt-controls/IconButton.qml | 4 KB | text/plain |
| assets/qt-controls/IconButtonStyle.qml | 4.6 KB | text/plain |
| assets/qt-controls/Indicator.qml | 2.2 KB | text/plain |
| assets/qt-controls/IndicatorStyle.qml | 1.5 KB | text/plain |
| assets/qt-controls/ItemDelegate.qml | 2.7 KB | text/plain |
| assets/qt-controls/ItemDelegateStyle.qml | 2.4 KB | text/plain |
| assets/qt-controls/Label.qml | 1.4 KB | text/plain |
| assets/qt-controls/LabelStyle.qml | 1.2 KB | text/plain |
| assets/qt-controls/LinkInline.qml | 1.9 KB | text/plain |
| assets/qt-controls/LinkInlineStyle.qml | 1.4 KB | text/plain |
| assets/qt-controls/LinkList.qml | 2.4 KB | text/plain |
| assets/qt-controls/LinkListStyle.qml | 1.7 KB | text/plain |
| assets/qt-controls/LinkStandalone.qml | 2.4 KB | text/plain |
| assets/qt-controls/LinkStandaloneStyle.qml | 1.6 KB | text/plain |
| assets/qt-controls/ListItem.qml | 6.3 KB | text/plain |
| assets/qt-controls/ListItemStyle.qml | 2.9 KB | text/plain |
| assets/qt-controls/MenuButton.qml | 4.4 KB | text/plain |
| assets/qt-controls/MenuButtonStyle.qml | 3 KB | text/plain |
| assets/qt-controls/MenuItem.qml | 2.7 KB | text/plain |
| assets/qt-controls/MenuItemStyle.qml | 1.4 KB | text/plain |
| assets/qt-controls/Menu.qml | 1.9 KB | text/plain |
| assets/qt-controls/MenuStyle.qml | 1.2 KB | text/plain |
| assets/qt-controls/PaginationDot.qml | 2.6 KB | text/plain |
| assets/qt-controls/PaginationDotStyle.qml | 2.2 KB | text/plain |
| assets/qt-controls/PaginationIndex.qml | 2.2 KB | text/plain |
| assets/qt-controls/PaginationIndexStyle.qml | 1.4 KB | text/plain |
| assets/qt-controls/PaginationNumber.qml | 10.7 KB | text/plain |
| assets/qt-controls/PaginationNumberStyle.qml | 3.5 KB | text/plain |
| assets/qt-controls/Popup.qml | 1.4 KB | text/plain |
| assets/qt-controls/PopupStyle.qml | 1 KB | text/plain |
| assets/qt-controls/ProgressBar.qml | 3.1 KB | text/plain |
| assets/qt-controls/ProgressBarStyle.qml | 1.5 KB | text/plain |
| assets/qt-controls/RadioButton.qml | 3 KB | text/plain |
| assets/qt-controls/RadioButtonStyle.qml | 3 KB | text/plain |
| assets/qt-controls/RangeSlider.qml | 5 KB | text/plain |
| assets/qt-controls/RangeSliderStyle.qml | 3.7 KB | text/plain |
| assets/qt-controls/ScrollBar.qml | 2.6 KB | text/plain |
| assets/qt-controls/ScrollBarStyle.qml | 3.3 KB | text/plain |
| assets/qt-controls/SearchField.qml | 6 KB | text/plain |
| assets/qt-controls/SearchFieldStyle.qml | 4 KB | text/plain |
| assets/qt-controls/SearchMenu.qml | 14.6 KB | text/plain |
| assets/qt-controls/SearchMenuStyle.qml | 4.7 KB | text/plain |
| assets/qt-controls/Slider.qml | 3.8 KB | text/plain |
| assets/qt-controls/SliderStyle.qml | 3.8 KB | text/plain |
| assets/qt-controls/SortFilterModel.qml | 1.6 KB | text/plain |
| assets/qt-controls/SpinBox.qml | 5.8 KB | text/plain |
| assets/qt-controls/SpinBoxStyle.qml | 3.5 KB | text/plain |
| assets/qt-controls/Switch.qml | 3.5 KB | text/plain |
| assets/qt-controls/SwitchStyle.qml | 3 KB | text/plain |
| assets/qt-controls/TabBar.qml | 2 KB | text/plain |
| assets/qt-controls/TabBarStyle.qml | 886 B | text/plain |
| assets/qt-controls/TabButton.qml | 4.3 KB | text/plain |
| assets/qt-controls/TabButtonStyle.qml | 4.2 KB | text/plain |
| assets/qt-controls/Tag.qml | 4.4 KB | text/plain |
| assets/qt-controls/TagStyle.qml | 3.1 KB | text/plain |
| assets/qt-controls/TextField.qml | 7 KB | text/plain |
| assets/qt-controls/TextFieldStyle.qml | 4.6 KB | text/plain |
| assets/qt-controls/Toolbar.qml | 1.5 KB | text/plain |
| assets/qt-controls/ToolbarStyle.qml | 1 KB | text/plain |
| assets/qt-controls/ToolTip.qml | 7.4 KB | text/plain |
| assets/qt-controls/ToolTipStyle.qml | 2.2 KB | text/plain |
| assets/qt-controls/TreeViewDelegate.qml | 4.3 KB | text/plain |
| assets/qt-controls/TreeViewDelegateStyle.qml | 2.8 KB | text/plain |
| README.md | 4.2 KB | text/markdown |
| references/Button.qml | 11.5 KB | text/plain |
| references/Checkbox.qml | 7.1 KB | text/plain |
| references/Select.qml | 9.7 KB | text/plain |
| references/TextField.qml | 7.2 KB | text/plain |
| references/Toggle.qml | 4.6 KB | text/plain |
| SKILL.md | 16.3 KB | text/markdown |
来源与署名
来源：TheQtCompanyRnD/agent-skills位于skills/qt-figma-component-generation提交71d6c10
许可证： LicenseRef-Qt-Commercial OR BSD-3-Clause
内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。
更多来自 TheQtCompanyRnD/agent-skills 的技能
Qt Ui Design
TheQtCompanyRnD
为 Qt/QML、Web 及嵌入式目标提供界面与体验设计指导或审查，涵盖设计原则与 WCAG 检查。
Qt Qml Test
TheQtCompanyRnD
为 QML 组件生成 Qt Quick Test 单元测试文件。
Qt Qml Profiler
TheQtCompanyRnD
Use when the user is investigating QML / Qt Quick performance — both vague complaints ("the UI feels laggy", "this is slow", "frames are dropping", "the app stutters") and explicit asks to profile, find hotspots, or optimize bindings, signals, or rendering. Runs qmlprofiler on a 2D QML application, parses the .qtd trace, and analyzes hotspots against the source with frame-time, memory, and pixmap-cache summaries. Does NOT cover Qt Quick 3D.
Qt Qml Docs
TheQtCompanyRnD
Generates standalone Markdown reference documentation for QML components and applications. Use this skill whenever you want to document QML files, create API reference docs for a QML component or module, document a Qt Quick application, or produce developer-facing documentation from .qml source code. Triggers on: "document this QML", "write docs for my QML", "create reference docs", "document QML component", "QML API docs", "document my Qt Quick component", "document my Qt app", or any time one or more .qml files are provided and documentation is needed. Works with single files, pasted code, or entire project folders. DO NOT use if the user asks for QDoc format output.
Qt Qml
TheQtCompanyRnD
Applies QML best practices when producing or working with QML source code. Use whenever QML code is the primary subject: writing, reviewing, fixing, refactoring, optimizing, or debugging QML files, components, or bindings. Do NOT trigger for purely conversational QML questions where no code is produced or examined (e.g. "explain how anchors work").
Qt Figma Token Extraction
TheQtCompanyRnD
从 Figma 提取设计令牌，生成 design-tokens.json 以及可供 Qt 项目直接使用的 QML 单例文件。
更多Design & Creative技能
Theme Factory
anthropics
提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。
Slack Gif Creator
anthropics
为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。
Frontend Design
anthropics
在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。
Canvas Design
anthropics
依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。
Brand Guidelines
anthropics
将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。
Frontend Design
anthropics
指导智能体为新界面或改版界面进行独特、有意图的视觉设计。