# Project Rules: Figma → Vue3 (with TailwindCSS4)

## 1. 工具链说明

- **IDE**: Trae IDE (>=0.5.5)
- **MCP**: Figma AI Bridge (通过 MCP Server 与 Trae 集成)
- **框架**: Vue3 (Composition API + `<script setup>`)
- **样式**: TailwindCSS v4 (原子化优先，避免自定义 CSS)

---

## 2. 设计稿 → 组件转换规则

### 2.1 命名与结构

- **组件命名**：遵循 PascalCase，例如 `ButtonPrimary.vue`。
- **文件组织**：
  - `components/ui/` → 基础 UI 组件
  - `components/layout/` → 布局容器
  - `components/composite/` → 复合组件（由多个 UI 组件组合）
- **Props 定义**：由 Figma 属性映射而来，必须使用 **强类型 (TypeScript)**。

### 2.2 TailwindCSS4 使用规范

- **优先使用原子类**，避免生成内联 style。
- **颜色/间距**：映射到 Tailwind 设计令牌（如 `bg-primary`, `text-secondary`）。
- **响应式**：使用 `sm:`, `md:`, `lg:` 前缀，避免写死像素。
- **排版**：统一使用 `font-*` 与 `leading-*`，禁止自定义行高。

---

## 3. Figma → Vue3 布局注意事项

### 3.1 Flex/Grid 映射

- **Figma AutoLayout → Tailwind Flex**
  - 水平排列 → `flex-row`
  - 垂直排列 → `flex-col`
  - 对齐方式 → `justify-*` / `items-*`
- **Figma Grid → Tailwind Grid**
  - 列数 → `grid-cols-*`
  - 间距 → `gap-*`

### 3.2 尺寸与约束

- **禁止固定宽高**：除非设计稿明确要求。优先使用 `w-full`, `h-auto`。
- **最小/最大约束**：映射为 `min-w-*`, `max-h-*`，避免溢出。
- **百分比布局**：优先转换为 `flex-grow`, `basis-*`，而非绝对定位。

### 3.3 绝对定位与层级

- **仅在必要时使用 `absolute`**（如浮层、模态框）。
- **层级管理**：统一使用 `z-*`，避免硬编码数值。

---

## 4. AI 转换流程约束

1. **输入**：Figma 设计稿（需启用 Dev Mode，确保组件/Frame 命名规范）。
2. **AI 解析**：Figma AI Bridge 提取节点 → 转换为 Vue3 组件骨架。
3. **Tailwind 优化**：自动替换内联样式为 Tailwind 原子类。
4. **人工校验**：开发者需检查以下内容：
   - 布局是否符合响应式规范
   - 是否存在冗余 class
   - 是否有未映射的设计 token

---

## 5. 代码示例

```vue
<!-- ButtonPrimary.vue -->
<script setup lang="ts">
defineProps<{
  label: string
  disabled?: boolean
}>()
</script>

<template>
  <button
    class="px-4 py-2 font-medium text-white rounded-md bg-primary hover:bg-primary/80 disabled:opacity-50"
    :disabled="disabled"
  >
    {{ label }}
  </button>
</template>
```

---

## 6. 审查清单 (Checklist)

- [ ] 所有组件均为 **Vue3 `<script setup>`** 写法
- [ ] 样式全部使用 **TailwindCSS4 原子类**
- [ ] 布局优先使用 **Flex/Grid**，避免绝对定位
- [ ] Props 类型定义完整，避免 `any`
- [ ] 组件命名与 Figma Frame 保持一致

---

✅ **总结**：通过 Trae + Figma AI Bridge MCP，我们要求 **自动生成的 Vue3 组件必须保持语义化、响应式、Tailwind 原子化**，并在布局上避免固定像素与绝对定位，确保代码可维护、可扩展。

---