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