核心目标

借助 Cursor 的 AI 辅助能力 + 自定义 Rules，从零实现一款「纯前端 AI 取名应用」，支持根据出生日期、性别、姓氏生成符合五行、生肖的名字，全程无需手动写复杂逻辑，聚焦需求落地。

流程:

一、前置准备

1. 环境：Cursor 已安装并配置中文语言，Node.js（v16+）、pnpm（或 npm）已安装；
2. 核心依赖：Vue 3、Vue Router（路由）、Pinia（状态管理）、TypeScript（类型校验）（Cursor 会自动生成依赖配置）；
3. 提前配置 Cursor Rules（让 AI 遵循固定开发规范）。

二、步骤 1：配置自定义 Cursor Rules（关键前提）

先给 AI 设定开发规则，确保生成的代码符合 Vue 3 最佳实践，无需反复调整格式。

操作：

1. 打开 Cursor → 设置（Ctrl+,）→ 通用 → Rules for AI → 编辑规则；
2. 复制以下规则（Vue 3 全栈开发规范），粘贴后保存：

# 角色定位
你是一名精通 Vue 3 的高级前端工程师，专注于纯前端应用开发，擅长用户体验优化和逻辑封装。

# 开发核心规则
1. 技术栈强制：使用 Vue 3 组合式 API（setup 语法糖），TypeScript 强类型校验，禁止选项式 API；
2. 状态管理：使用 Pinia 管理全局状态（用户输入、历史记录、配置信息），按功能拆分模块；
3. 路由配置：使用 Vue Router 4，路由拆分为「首页、取名页、历史记录页、设置页」；
4. 组件设计：组件化开发，拆分通用组件（如输入表单、名字卡片、按钮组件），确保可复用；
5. 代码规范：
   - 命名：组件用 PascalCase，变量/函数用 camelCase，常量用 UPPER_SNAKE_CASE；
   - 注释：关键逻辑加单行注释，组件/函数加文档注释（说明功能、参数、返回值）；
   - 样式：使用 scoped 作用域，优先用 CSS 变量适配主题（亮色/暗黑模式）；
6. 功能要求：
   - 纯前端实现，所有逻辑（五行分析、生肖匹配、名字生成）用 JavaScript 编写，无后端依赖；
   - 数据存储：用户输入和历史记录用 localStorage 本地存储，避免数据丢失；
   - 响应式设计：适配手机、平板、PC 端，表单和按钮尺寸随屏幕调整；
   - 输入验证：对出生日期、姓氏等输入做合法性校验，给出友好错误提示；
7. 输出格式：生成代码后，附带简单使用说明（如启动命令、核心文件说明），便于调试。

三、步骤 2：需求分析（编写 README.md 明确边界）

创建需求文档，让 AI 精准理解功能范围，避免生成无关代码。

操作：

1. 在 Cursor 中新建文件夹 ai-name-generator（项目根目录）；
2. 新建文件 README.md，输入以下需求描述（直接复制使用）：

# AI 取名应用（好名好运）需求说明
## 1. 应用概述
纯前端 Vue 3 应用，用户输入出生日期、性别、姓氏等信息，基于五行、生肖、音韵规则生成吉祥名字，支持历史记录保存和分享。

## 2. 核心功能
### 2.1 用户输入模块
- 必选：出生日期（年月日，格式YYYY-MM-DD，支持日期选择器）、性别（男/女单选）、姓氏（文本输入，1-2个汉字）；
- 可选：出生时辰（下拉选择：子时-亥时，共12个时辰）；
- 输入验证：日期需是过去的有效日期，姓氏不能为空且仅含汉字，给出错误提示。

### 2.2 名字生成模块
- 生成规则：基于出生日期计算五行（金、木、水、火、土）缺补，结合生肖吉祥字，搭配姓氏音韵和谐；
- 结果展示：每次生成3个名字，每个名字包含「名字全称、五行属性、生肖适配说明、寓意解释」；
- 操作功能：每个名字支持「保存、复制、语音朗读」，支持「重新生成」（换一批名字）。

### 2.3 辅助功能
- 历史记录：保存用户生成的所有名字，支持查看、删除单条记录、清空全部；
- 个性化设置：目标语言（默认中文）、主题切换（亮色/暗黑模式），设置自动保存；
- 分享功能：生成名字卡片图片（纯前端 Canvas 绘制），支持下载后分享到社交平台；
- 语音朗读：支持朗读名字全称和寓意（使用浏览器 SpeechSynthesis API）。

## 3. 技术栈
Vue 3（Composition API）、TypeScript、Vue Router 4、Pinia、CSS3（响应式布局）、localStorage（本地存储）。

## 4. 核心约束
- 纯前端实现，无后端依赖，所有逻辑（五行计算、生肖匹配、名字生成）本地完成；
- 名字库：内置 500+ 吉祥汉字（分男女），包含五行属性和寓意，以 JSON 格式存储；
- 性能要求：点击「生成名字」后，响应时间 ≤ 2 秒，无卡顿；
- 兼容性：支持 Chrome、Edge、Firefox 最新版本，无兼容性报错。

四、步骤 3：项目初始化（让 AI 生成项目骨架）

让 Cursor 基于 Rules 和需求，自动生成 Vue 3 项目结构和基础配置，无需手动执行 create-vue。

操作：

1. 在项目根目录新建文件 init-project.md，输入提示词：

基于当前项目的 README.md 需求和 Cursor Rules，帮我初始化 Vue 3 项目，完成以下工作：
1. 生成 package.json（包含所有依赖和启动/打包脚本）；
2. 生成项目目录结构（src 下的 components、views、router、store、assets、utils 等文件夹）；
3. 生成核心配置文件：vite.config.ts、tsconfig.json、.eslintrc.js（基础配置，确保项目可运行）；
4. 生成基础代码：
   - router/index.ts：配置 4 个路由（首页、取名页、历史记录页、设置页）；
   - store/index.ts：创建 Pinia 实例，拆分 user（用户配置）、history（历史记录）两个模块；
   - assets/data/name-library.json：内置名字库（分男女，包含汉字、五行、寓意）；
   - utils/：工具函数（date-util.ts 五行计算、zodiac-util.ts 生肖匹配、name-util.ts 名字生成）；
5. 生成后，给出项目启动命令和目录说明。

1. 按 Alt+\ 触发 AI 生成，等待生成完成后，项目根目录会自动出现完整的 Vue 3 项目结构。

生成后关键检查：

• 核心依赖是否齐全（vue、vue-router、pinia、typescript、vite 等）；
• 路由是否配置正确（4 个页面路由，默认跳转首页）；
• 工具函数是否生成（重点：五行计算和名字生成逻辑）。

五、步骤 4：AI 编程（生成页面和核心功能）

分模块让 AI 生成页面组件，逐步完善功能，避免一次性生成过多代码导致调试困难。

模块 1：生成首页（Home.vue）

操作：

1. 新建文件 src/views/Home.vue，输入提示词：

帮我生成首页组件，功能：
1. 页面结构：顶部标题（好名好运 AI 取名）、应用简介（3 行文字说明核心功能）、「开始取名」按钮（跳转至取名页）、底部版权信息；
2. 样式：简洁清新，背景用淡蓝色渐变，按钮居中且有hover效果，适配移动端；
3. 遵循 Cursor Rules：Composition API、scoped 样式、TypeScript 类型定义。

1. 按 Alt+\ 生成，直接保存文件。

模块 2：生成取名页（NameGenerator.vue）—— 核心页面

操作：

1. 新建文件 src/views/NameGenerator.vue，输入提示词：

基于需求和 Rules，生成取名页组件，包含 3 个部分：
1. 输入表单区：
   - 出生日期：使用原生 date 输入框（或简单下拉选择，无需复杂组件），标注「必填」；
   - 性别：radio 单选（男/女），默认选中「男」；
   - 姓氏：文本输入框，限制 1-2 个汉字，实时校验；
   - 出生时辰：下拉选择（子时到亥时），默认「未选」；
   - 提交按钮：「生成名字」，禁用状态（输入不完整时）；
2. 结果展示区：
   - 初始隐藏，生成后显示 3 个名字卡片（横向排列，移动端纵向排列）；
   - 每个卡片包含：名字全称（大号字体）、五行属性（如「五行补木」）、生肖说明、寓意解释；
   - 卡片操作：复制按钮（复制名字）、保存按钮（存入历史记录）、朗读按钮（朗读名字）；
3. 功能逻辑：
   - 点击生成按钮，调用 utils/name-util.ts 的 generateNames 函数，传入用户输入参数；
   - 生成结果存入 Pinia 的 history 模块，同时同步到 localStorage；
   - 重新生成按钮：清空当前结果，再次调用生成函数；
4. 样式：卡片带阴影和圆角，hover 轻微上浮，颜色搭配和谐（男/女卡片用不同主色调）。

1. 生成后，检查是否有缺失逻辑（如输入验证、函数调用），若有，补充提示词：“补充输入验证逻辑，出生日期必须是过去的日期，姓氏仅含汉字，否则显示红色错误提示”，让 AI 完善。

模块 3：生成历史记录页（History.vue）和设置页（Settings.vue）

操作：

• 历史记录页：新建 src/views/History.vue，提示词：“生成历史记录页，展示 localStorage 中保存的所有名字记录，每条记录包含名字、生成时间，支持删除单条和清空全部，无记录时显示「暂无历史记录」提示”；
• 设置页：新建 src/views/Settings.vue，提示词：“生成设置页，包含主题切换（亮色 / 暗黑模式，radio 选择），设置变更后实时生效并保存到 localStorage，页面样式与其他页面保持一致”。

模块 4：完善通用组件和工具函数

操作：

1. 新建 src/components/NameCard.vue，提示词：“生成名字卡片通用组件，接收 name（名字）、fiveElements（五行）、zodiac（生肖）、meaning（寓意）四个 props，实现卡片展示和操作功能（复制、保存、朗读），遵循组件化开发规范”；
2. 补全工具函数：若 utils/date-util.ts 缺少五行计算逻辑，输入提示词：“完善 date-util.ts 的 calculateFiveElements 函数，接收年月日和时辰，计算该日期对应的五行（金、木、水、火、土）分布，返回五行缺补结果（如「缺木」）”，让 AI 生成具体算法。

六、步骤 5：调试与优化（Cursor AI 帮你排错）

启动项目后，通过 Cursor 解决运行中的报错和体验问题。

操作：

1. 打开 Cursor 内置终端（`Ctrl+``），执行启动命令：

   # 安装依赖
   pnpm install
   # 启动项目
   pnpm dev
   

2. 访问终端输出的本地地址（如 http://127.0.0.1:5173/），测试功能：
   • 若页面空白：查看终端报错（如路由配置错误），复制报错信息，在 AI 侧边栏输入 “帮我修复这个报错：[粘贴报错信息]”，AI 会给出修复方案；
   • 若生成名字失败：检查 name-util.ts 的生成逻辑，输入提示词 “调用 generateNames 函数后没有返回名字，帮我排查代码问题并修复”；
   • 若样式适配差：选中对应组件的样式代码，输入 “优化这段样式，让卡片在手机端纵向排列，按钮尺寸适配小屏幕”；
3. 关键优化点：
   • 输入验证：确保出生日期不能选未来日期，姓氏仅含汉字；
   • 本地存储：测试刷新页面后，历史记录是否保留；
   • 语音朗读：确保浏览器支持 SpeechSynthesis API，无报错；
   • 响应式：缩小浏览器窗口，测试表单和卡片是否正常显示。

七、步骤 6：打包发布（纯前端部署）

项目调试完成后，打包生成静态文件，可部署到 GitHub Pages、Netlify 等平台，无需后端服务器。

操作：

1. 终端执行打包命令：

   pnpm build
   

   打包完成后，项目根目录会生成 dist 文件夹（静态文件，包含 HTML、CSS、JS）；
2. 部署方式（以 GitHub Pages 为例）：
   • 新建 GitHub 仓库（如 ai-name-generator），将项目代码推送到仓库；
   • 安装部署依赖：pnpm add -D gh-pages；
   • 在 package.json 中添加脚本：

     "scripts": {
       "deploy": "gh-pages -d dist"
     }
     

   • 执行部署命令：pnpm deploy；
   • 部署成功后，访问 https://[你的GitHub用户名].github.io/ai-name-generator 即可使用应用。