Components

ui-design-system 是面向 Design Systems 的 Claude skill，可帮助生成 design tokens、color scales、typography、spacing、responsive rules、component documentation 和 developer handoff assets，并提供参考资料及 Python token generator，支持输出 JSON、CSS、SCSS 或 summary。

figma-code-connect-components 可通过 Figma Code Connect 将 Figma 设计组件映射到匹配的代码组件。适用于设计实现对齐、variant 和 prop 匹配，以及在创建映射前先找到合适的本地组件。更适合 connect、map 或 link-to-code 工作流，不适合画布编写或整页生成。

使用 wpds 技能来构建或审查基于 WordPress Design System（WPDS）的 WordPress UI。它能借助 WPDS MCP server 帮你验证组件、tokens、模式和 package 适配，让你的 wpds 指南始终以权威文档为依据，而不是凭猜测。非常适合用于 Gutenberg、WooCommerce、WordPress.com、Jetpack 以及相关界面中的 wpds 与 Design Systems 工作。

figma-use 是在每次调用 use_figma 之前都应安装的技能，用于确保 JavaScript 能在 Figma 文件上下文中安全运行。它支持设计落地类工作，例如创建和编辑节点、连接变量与样式、构建组件和变体，以及以程序化方式检查文件结构。该仓库还包含使用指南、常见坑位和实践模式，可帮助减少常见的 Figma 自动化错误。

hig-components-search 是一款面向 Apple HIG 的 UI 设计决策技能，聚焦搜索字段、分页控件和路径控件。 当你需要了解 macOS 或 iPadOS 界面中的搜索行为、搜索范围、分页和层级导航时，它能提供清晰指引。 它尤其适合搜索 UX、搜索建议和结构化导航场景。

hig-components-menus 是一项面向菜单和按钮驱动命令界面的 Apple HIG 指导技能。 当你需要关于菜单、上下文菜单、工具栏、菜单栏以及相关控件的 UI 设计决策，并希望获得 Apple 风格的命令放置、分组和行为指导时，可使用 hig-components-menus 技能。

hig-components-layout 是一套 Apple HIG 导航与布局技能，用于在侧边栏、分栏视图、标签栏、列表、表格、大纲视图、列、面板、窗口、滚动视图、盒状容器和装饰元素之间做选择。适合在 UI 设计和应用结构决策中使用，尤其当你需要的是清晰、贴合平台规范的指导，而不是泛泛而谈的响应式布局建议时。

hig-components-dialogs 是 Apple HIG 的展示组件技能，用于在警报、操作表、弹出框、工作表和数字输入视图之间做选择。需要针对确认流程、破坏性操作、非模态内容，以及跨 iOS、iPadOS、macOS、watchOS 和 visionOS 的 UI 设计决策，进行清晰且符合 Apple 规范的对话框选型时，可使用这份 hig-components-dialogs 指南。

component-refactoring skill 可在 Dify 前端中借助 analyzer 驱动的指导，帮助你重构高复杂度 React 组件。适用于 `pnpm analyze-component --json` 显示复杂度高于 50、行数超过 300，或者你需要代码拆分、hook 提取，且希望获得更安全的 component-refactoring 指南，而不是泛泛而谈的重写建议时。

figma-generate-library 可帮助你从代码库出发，按顺序完成 tokens、组件库、文档以及浅色/深色主题的设计系统构建或更新。需要的是面向 Design Systems 的实用指南，而不是一次性的 mockup 时，就该用 figma-generate-library。它与 figma-use 互补，用于 Plugin API 调用。

figma-generate-design 可将已编码的页面、模态框、抽屉、侧边栏、面板及其他多区块视图，借助已发布的设计系统转换为 Figma。它会从 Code Connect 和相关来源中查找组件、变量、样式与资源，再按区块逐步组装屏幕用于 Design Implementation，而不是手工重画全部内容。当你需要与代码和 tokens 保持高一致性时，可使用 figma-generate-design 指南。

figma-use 是在 Figma Plugin API 工作流中安全调用 `use_figma` 的必备技能。请先安装并加载 figma-use，再用 JavaScript 编写、更新、检查或组织 Figma 文件。它尤其适用于设计实现、组件工作、变量、auto layout 以及程序化读取文件。

figma-generate-library 可将代码库转化为带有 tokens、variables、components、theming 和文档的 Figma 设计系统库。适合需要分阶段完成 Design Systems 工作流时使用，包括安装、初始化、发现、创建、验证以及与代码对齐等环节。

figma-generate-design 可将真实的屏幕、页面或多分区布局直接转成 Figma，并优先复用已发布的设计系统，而不是用通用图形拼搭。它非常适合做与代码或产品页高度一致、结构可编辑、基于 token 的统一 UI 设计。适用于整页 UI 设计更新，不适合粗略原型。