用途：design-expert 是供 Claude 等 AI 编程助手在执行过程中读取的设计参考技能，适用于组件设计、设计系统选择与搭建、响应式布局以及 Figma 分析等 UI/UX 工作。
主要能力：
- 设计原则约束：采用原子化设计（Atoms→Molecules→Organisms→Templates→Pages）、移动优先、使用设计令牌而非硬编码值，并坚持每个项目只用一个设计库。
- 设计系统选择：针对企业应用推荐 Ant Design、MUI、Mantine；现代 Web 推荐 Tailwind + shadcn/ui；React Native 移动端推荐 NativeWind；原型推荐 Bootstrap、Tailwind。
- 自动检测：从 package.json 识别 @mui/material、antd、tailwindcss、@chakra-ui/react、nativewind、@mantine/core 等依赖，推断当前所用设计库。
- 文档获取：通过 Context7 获取对应版本的库文档，添加“use context7”以拉取版本化 API。
- 响应式断点：移动端小于 768px，平板 768–1024px，桌面大于 1024px。
- Figma 同步：基于 figma-developer-mcp（Framelink）的 get_figma_data 与 download_figma_images，读取布局、样式、文本和组件树并下载图片图标；该服务器不提供 get_variable_defs 与 get_code_connect_map，调用会报错。
使用方式：先读取项目内已有的设计系统文件（.claude/design/design-system.md），沿用其中确定的库、色板与字体；只有在没有该文件时才执行设计系统选择逻辑，并将结果持久化。同步 Figma 时，把读取到的颜色、字体、间距注入设计令牌体系与设计系统文件，作为唯一事实来源，避免把十六进制色值手工复制进组件；生成节点前，按 Figma 图层名与 src/components/ 做名称匹配，优先组合已有组件，避免重复生成导致设计系统偏移；图片与图标通过下载接口获取，而不是重新描摹。
适用场景：需要在 AI 辅助编码过程中保持设计一致性的前端项目、需要根据 package.json 推断设计库的项目、需要将 Figma 设计同步为设计令牌和组件的团队。
限制：资料未说明具体安装命令、收费方式或平台要求；Figma 相关能力依赖 figma-developer-mcp，且不包含 Dev-Mode-MCP 的变量定义与 Code Connect 映射工具。