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、網頁及嵌入式目標提供介面與體驗設計指引或稽核，涵蓋設計原則與 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
指導代理為新介面或改版介面進行獨特、有意的視覺設計。