DianZhanDemo/.trae/rules/project_rules.md

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. 代码示例

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

---