init6

.trae/rules/project_rules.md

@@ -0,0 +1,104 @@
+# 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 原子化**，并在布局上避免固定像素与绝对定位，确保代码可维护、可扩展。
+
+---