掌握样式优先级是使用 ClaudeCode + Figma-MCP 高效还原 UI 设计的核心能力。以下是关键技巧与实践步骤：

---

一、样式优先级基础原理

在 CSS 中，样式优先级由选择器权重决定：
$$ \text{权重} = (\text{内联}, \text{ID}, \text{类/伪类/属性}, \text{元素}) $$
计算规则：

1. 内联样式（如 style="color:red"）权重：$1000$
2. ID 选择器权重：$100$
3. 类/伪类/属性选择器权重：$10$
4. 元素选择器权重：$1$
   示例：
   #nav .item:hover 权重 = $(0,100,20,0) \rightarrow 120$

---

二、Figma-MCP 工作流优化

通过 Figma 组件库（MCP）实现设计-代码一致性：

1. 创建 Master Component
   - 定义原子组件（按钮/输入框）
   - 绑定 CSS 变量（如 --primary-color）

2. 生成 ClaudeCode 映射
   - 提取 Figma 节点层级结构
   - 自动转换选择器权重关系

3. 优先级冲突检测
   - 标记权重相同的冲突样式
   - 建议添加 !important 或提升选择器

---

三、还原 UI 的 4 个关键技巧

1. 权重预判法

在 Figma 中标注组件层级：

graph LR
A[Container #header] --> B[Button .primary]
B --> C[Icon svg]

对应 ClaudeCode 输出：

#header .primary { /* 权重=110 */ }
.primary svg { /* 权重=11 */ } 

2. CSS 变量穿透

在 Master Component 中定义：

:root {
  --btn-padding: 8px 16px; /* 全局权重 */
}
.primary {
  padding: var(--btn-padding); /* 继承权重 */
}

3. 层叠上下文控制

对复杂组件启用隔离：

.modal {
  isolation: isolate; /* 创建新层叠上下文 */
  z-index: 10; 
}

4. 动态优先级调试

使用 ClaudeCode 实时反馈：

[检测报告]
冲突：.card > .title (权重=21) 与 #sidebar .title (权重=101)
解决方案：升级 .card > .title 为 .card__title

---

四、实战案例：按钮状态还原

Figma 设计：

• 默认状态：蓝色背景
• Hover 状态：深蓝色 + 阴影

ClaudeCode 输出：

/* 基础权重 */
.btn { 
  background: var(--blue);
  transition: all 0.3s; 
}

/* 提升 hover 权重 */
.btn:hover {  /* 权重=11 > 基础10 */
  background: var(--dark-blue);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

---

五、避坑指南

问题现象	根因	解决方案
样式覆盖失效	子组件权重不足	在 Figma 中提升组件层级
响应式样式冲突	媒体查询权重计算错误	使用 (min-width: 768px) 限定范围
!important 滥用	权重管理失控	通过 ClaudeCode 扫描并替换为 ID 选择器

最佳实践：每次迭代时运行 ClaudeCode --audit 生成优先级热力图，定位权重冗余区域。