设计系统

使用 design-system skill 生成或审核 UI 系统，从现有代码中提取 tokens，并在真实仓库中检查样式一致性。

使用 shadcn skill 检查项目上下文、运行正确的 CLI 命令、安装组件，并基于文档中的模式完成 UI 组合，包括 base 与 radix 的差异、表单、主题以及 registries 的用法。

design-consultation 是一项 design-consultation 技能，用于把粗略的产品想法转化为完整的设计方向。它会生成 DESIGN.md 作为单一事实来源，并提供预览，以及关于字体、颜色、间距、布局和动效的系统级指导。适合新产品和需要统一起点的 UI 界面。

ui-ux-pro-max 是一款面向 AI 辅助 UI/UX 设计的综合技能，提供网页和移动端项目的布局、风格、配色体系、字体排版及 UX 规则等结构化指导。适合需要在 React、Next.js、Vue、Svelte、Tailwind、shadcn/ui、SwiftUI、React Native、Flutter 及 HTML/CSS 等技术栈中做出实用设计决策的开发者和团队。可用于 UI 规划、评审与优化，提升设计智能。

ckm:design-system 基于清晰的 token 架构，帮你构建三层 tokens、组件规格、CSS variables、Tailwind 映射，以及保持品牌一致性的幻灯片素材。

ckm:design 是一项结构化设计技能，用于任务路由并产出 logo、CIP mockup、横幅、幻灯片和 SVG 图标。它提供实用参考、CSV 驱动选项和 Python 脚本，适合需要可复用设计流程的用户，而不只是依赖通用提示词输出。

ckm:brand 是一款品牌工作流 skill，用于创建、更新和审查品牌指南、品牌信息、语调、视觉识别，以及通过实用脚本和检查清单同步 design tokens。

design-system-patterns 可帮助团队围绕 token 结构、theming 架构和可复用组件 API 模式，构建设计系统与组件库所需的可扩展 UI 基础。

visual-design-foundations 可帮助团队用字阶体系、颜色 tokens、间距规则和图标规范搭建实用的 UI 系统。你可以用它建立稳固的设计基础、产出 style guide、审查视觉层级，并在清晰设计约束下生成可直接落地的 CSS variables。

web-component-design 技能可帮助团队为 React、Vue 和 Svelte 设计可复用的 UI 组件，提供稳健的 API 模式、无障碍指导，以及面向设计系统的样式取舍参考。

使用 tailwind-design-system skill 构建 Tailwind CSS v4 设计系统，涵盖 tokens、theming、variants、accessibility 以及从 v3 到 v4 的迁移指导。

polish 是一项用于最终复核的 UI 审查技能，专门在发布前检查对齐、间距、一致性、token 使用和微细节问题。它最适合那些功能已经可用，但整体感觉“差一点，还不够精致”的界面、流程或组件。你可以用它提升上线就绪度、设计系统对齐度和整体质量，而不必做不必要的重设计。

figma-create-design-system-rules 可帮助你为 Figma-to-code 工作生成项目专属的 Design System 规则。可用它来沉淀组件规范、命名、tokens、文件位置，以及哪些内容不应硬编码，从而让 AI 编码代理在整个仓库中保持一致。需要连接 Figma MCP server。

site-architecture 可用于规划或重构网站的信息架构，包括页面层级、导航、URL 规则与站内链接策略。你可以用它产出 sitemap、导航规范、URL map，以及用于营销与 UI/UX 规划的 Mermaid 或 ASCII 网站结构图。

normalize skill 用于审查 UI 功能，并将其重新对齐到你的设计系统。了解 normalize 的安装选项、所需的 frontend-design 准备工作，以及它在页面、路由和组件中的实际用法。

extract 技能可帮助团队识别重复的 UI 模式、design token 和组件，并规划或执行向现有 design system 的整合，以更稳妥的迁移路径推进落地。

normalize 技能会审查一个 UI 功能，并将其重新对齐到你的 design system。了解 normalize 的安装适用场景、必需的 /frontend-design 准备工作，以及在页面、路由和组件中的实际使用方式。

extract 技能可帮助团队识别重复出现的 UI 模式、design token 和组件，并将其整合进现有设计系统，同时制定更稳妥的迁移方案。

design-md 技能会分析 Stitch 项目，并把其中的界面整理成语义化的 DESIGN.md 事实来源，帮助你在布局、语气、颜色和组件语言上保持一致。若你需要的是面向未来 Stitch 生成的可提示指导，而不只是一个视觉摘要，那么 design-md 很适合用于 Design Systems。

使用 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 自动化错误。

mui 是一份聚焦 Material UI v7 与 React 前端实践的指南，涵盖 `sx` 样式、theme 定制、响应式布局，以及 v7 迁移中的关键变化。你可以用它来判断是否安装该 skill、了解核心文件结构，并基于当前 `@mui/material` 最佳实践生成 MUI 组件。

makepad-2.0-theme 是一套面向 Makepad 2.0 的主题技能，用于应用 `theme.*` 变量、切换深色/浅色主题，并保持设计 token 的样式一致性。本指南可帮助你了解 makepad-2.0-theme 的安装与用法，适用于生产级 UI 和设计系统。

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