用途：在组件设计、设计系统选择与搭建、响应式布局以及 Figma 分析场景中，为 Claude 提供可读取的设计参考。
主要能力：
- 设计原则：原子设计（Atoms → Molecules → Organisms → Templates → Pages）、移动优先、以设计令牌（颜色/间距/字体）代替魔法值、每个项目只用一个组件库以保持一致。
- 设计系统选择建议：企业级可选 Ant Design、MUI、Mantine；现代 Web 可选 Tailwind + shadcn/ui；React Native 移动端用 NativeWind；原型可用 Bootstrap、Tailwind。
- 自动检测：从 package.json 识别 @mui/material → MUI、antd → Ant Design、tailwindcss → Tailwind、@chakra-ui/react → Chakra、nativewind → NativeWind、@mantine/core → Mantine。
- 响应式断点：移动端 <768px，平板 768–1024px，桌面 >1024px。
使用方式：先读取设计单一事实来源（SoT），若存在 .claude/design/design-system.md，应沿用其中已确定的库、配色与字体，不要重新推荐；仅当没有 SoT 文件时才执行选择逻辑，并持久化选择结果。实现时用 Context7 获取当前库文档，添加 "use context7" 以拉取特定版本的 API。
Figma 同步：已安装的 figma MCP 为 figma-developer-mcp（Framelink），提供 get_figma_data（布局、样式、文本、组件树）与 download_figma_images；它不提供 get_variable_defs / get_code_connect_map，调用会报错。应把 Figma 当作来源而非重新生成器：调用 get_figma_data 读取颜色、字体、间距，写入设计令牌体系与 design-system.md，不要手抄十六进制色值；生成节点前按 Figma 图层名与 src/components/ 做名称匹配并复用已有组件；图片与图标用 download_figma_images 拉取。
限制：资料未提供收费、价格、平台支持范围与效果数据；该技能为 AI 消费型参考，人类可读说明见 docs/architecture/HIERARCHICAL_PLANNING.md 或 docs/getting-started/。