思路重于实现，AI赋能开发新时代

引言：你的记账痛点，我懂

“又是一笔消费，懒得打开App手动输入了…”
“月底复盘，这‘其他’支出怎么又超支了？”
“记账5分钟，分类10分钟，太繁琐了！”

如果你也有以上困扰，那么这篇文章就是为你准备的。我曾经也一样，直到我用了周末两天时间，借助AI的力量，亲手打造了一个能听懂人话的智能记账助手。它让我能够：

• 随手一输：“周五充话费100” → 自动分类
• 随口一问：“我这月交通花了多少？” → 自动分析

本篇文章将带你从0到1完整实现这个项目，不仅分享思路，更会剖析核心代码。下一个周末，不妨也给自己创造一个开发小奇迹？

一、 效果展示：它到底能有多智能？

1. 自然语言记账

• 场景：在输入框里像聊天一样输入
• 输入：“周一早上星巴克买了杯拿铁，花了32元”
• 输出：自动识别并填充【日期：本周一】、【分类：餐饮】、【金额：32】、【备注：星巴克拿铁】

2. 数据查询与分析

• 场景：在输入框提问

• 输入：“我这周吃饭花了多少钱？”

• 输出：“本周餐饮消费共150元，占比35%，最高的一笔是周六的火锅128元。”

• 场景：在输入框提问

• 输入：“上周和老婆吃饭花了多少钱？”

• 输出：“上周和老婆餐饮消费共520元，占比75%”

二、 技术选型：快是周末项目的第一要义

本着“追求效率，快速实现”的原则，我选择了以下技术栈：

三、 实现思路：AI是如何听懂人话的？

• 需求文档：把你的需求提给AI,让他知道你要做什么，有哪些功能，页面是怎么样
• UI设计：再根据需求文档，生成UI图，这里我们可以用html
• 整体系统架构：再根据需求文档和UI页面做好整体系统框架

这一步很重要，需要让AI理解你需要做什么、做成什么样、用什么方法。

1、 需求文档提示词

### **智能记账小程序核心功能** 
**一、核心交互模块** 
小程序需包含以下两个主要输入交互区域： 
1. **记账输入区**（界面下方）：支持用户通过手动输入或语音输入方式记录消费描述信息
（示例：“咖啡花了30元”）。 
2. **问答输入区**（界面上方）：支持用户输入查询类问题以获取相关财务信息
（示例：“本月吃饭花了多少？”）。

**二、报表查询模块** 
需提供多维度数据可视化展示功能，清晰呈现用户的开支情况。

那么Ai生成的需求文档大概是这样：

# 智能记账小程序页面技术分析提示词

## 1. 颜色设计方案分析

### 主色调系统
- 主色（Primary）：采用蓝色 `#1E88E5`，用于主要操作按钮、高亮状态、活动标签和关键图标，代表智能与信任感
- 辅助色：
  - 支出色（Danger）：红色 `#F44336`，用于支出相关元素（按钮、分类图标、金额显示）
  - 收入色（Secondary）：绿色 `#4CAF50`，用于收入相关元素（按钮、分类图标）
  - 警告色（Warning）：黄色 `#FFC107`，定义但未在当前页面主要使用
- 中性色系：
  - 深色（Dark）：`#333333`，用于重要标题和主文本
  - 浅色（Light）：`#F5F7FA`，作为页面整体背景色
  - 多级灰色：用于文本、边框、非激活状态等（如 `#F1F1F1`、`#C1C1C1`、`#A8A8A8`）

### 色彩应用规则
- 支出与收入有明确的色彩区分（红色/绿色）
- 选中状态与未选中状态通过色彩变化明确区分
- 主要操作按钮使用主色调，次要操作使用灰色系
- 背景与前景文本有足够对比度，保证可读性

## 2. 布局结构组成分析

### 整体框架
- 移动端优先的响应式设计，使用 Tailwind CSS 构建
- 页面结构分为三个主要部分：顶部导航栏、记账模式切换器、主内容区

### 详细布局结构
1. **顶部导航栏**：
   - 固定定位（`sticky top-0`），带阴影（`shadow-sm`）和最高层级（`z-50`）
   - 三栏布局：左侧返回按钮、中间页面标题、右侧扫码按钮
   - 下方包含记账模式切换器

2. **记账模式切换器**：
   - 自定义滑块式切换控件，位于导航栏底部
   - 包含"自动记账"和"手工记账"两个选项
   - 自动记账默认选中并带有"推荐"标签

3. **主内容区**：
   - 两种视图模式根据选择动态切换显示
   - **手工记账视图**：
     - 金额输入区域（大字号显示）
     - 日期选择区域（自定义样式的日期选择器）
     - 收支选择区域（支出/收入切换按钮）
     - 分类选择区域（网格布局的图标按钮）
     - 底部确认按钮
   - **自动记账视图**：
     - 智能输入区域（大尺寸文本框）
     - 快速示例标签（可点击填充）
     - 查询/解析按钮组
     - 智能提示区域（条件显示）
     - 解析结果显示区域（条件显示）

## 3. 按钮元素特征分析

### 按钮类型与样式
1. **导航按钮**：
   - 图标按钮，位于顶部导航栏两侧
   - 返回按钮：灰色图标（`fa-arrow-left`）
   - 扫码按钮：主色调图标（`fa-qrcode`）

2. **模式切换按钮**：
   - 自定义滑块式按钮，绝对定位在背景容器上
   - 激活状态：白色背景、主色文字、带阴影
   - 非激活状态：透明背景、灰色文字
   - 带过渡动画（`transition-all duration-300`）

3. **功能按钮**：
   - 主要操作按钮（确认记账、解析）：
     - 主色调背景（`bg-primary`）、白色文字
     - 圆角设计（`rounded-xl` 或 `rounded-full`）
     - 脉冲动画效果（`pulse-effect`）
     - 悬停效果（`btn-hover`）
   - 次要操作按钮（查询）：
     - 灰色背景（`bg-gray-100`）、灰色文字
     - 圆角设计、悬停效果

4. **分类选择按钮**：
   - 圆形图标按钮（`w-14 h-14 rounded-full`）
   - 图标+文字组合（图标在上，文字在下）
   - 选中状态：主题色半透明背景+主题色文字
   - 未选中状态：灰色背景+灰色文字
   - 点击时有缩放动画（`scale-in`）

## 4. 交互逻辑流程分析

### 核心交互逻辑
1. **模式切换逻辑**：
   - 点击模式切换按钮，切换 `manualModeSection` 和 `autoModeSection` 的显示/隐藏状态
   - 切换时有淡入动画（`fade-in`）
   - 可通过 URL 参数 `mode=manual` 直接进入手工记账模式

2. **手工记账交互流程**：
   - 点击金额显示区域，弹出 `prompt` 输入金额
   - 点击日期显示区域，触发隐藏的日期选择器
   - 点击支出/收入按钮切换类型：
     - 切换对应按钮的样式（背景色和文字颜色）
     - 切换显示支出分类或收入分类区域
     - 重置分类选中状态
   - 点击分类图标选择具体分类：
     - 更新图标样式表示选中状态
     - 将选择结果存入 `localStorage`
   - 点击"确认记账"按钮：
     - 验证金额是否已输入
     - 收集记账数据（金额、类型、分类、日期）
     - 显示成功提示并跳转页面

3. **自动记账交互流程**：
   - 可手动输入描述或点击快速示例填充
   - 点击"解析"按钮：
     - 验证输入内容
     - 模拟智能解析（根据关键词识别事件类型）
     - 显示解析结果区域
   - 点击"查询"按钮：
     - 验证输入内容
     - 模拟查询功能
     - 以列表形式显示查询结果
   - 解析结果区域可点击"复制"按钮复制内容
   - 可点击"添加到记录"按钮提交解析结果

### 辅助交互效果
- 动画效果：包含淡入（`fadeIn`）、缩放（`scaleIn`）、脉冲（`pulse`）、滑动（`slideInRight`）等多种动画
- 过渡效果：所有状态变化都有平滑过渡（`smooth-transition`）
- 反馈机制：按钮点击、状态切换都有即时视觉反馈
- 自动提示：某些操作后会显示智能提示，并在几秒后自动隐藏

## 5. 技术实现要点
- 使用 Tailwind CSS 实现响应式布局和样式
- 自定义动画和过渡效果增强用户体验
- 使用 localStorage 临时存储用户选择
- 使用 Font Awesome 图标丰富视觉表现
- JavaScript 模拟智能解析和查询功能
- 移动端友好的交互设计（大点击区域、清晰反馈）
- 无障碍设计考虑（颜色对比度、标签文本）

2、 UI页面提示词（需要有一个大概构思）

根据需求文档内容，设计一款记账小程序的页面并以HTML格式呈现。
页面设计需风格新颖、符合大众审美偏好，且保持整体风格统一。
可合理运用开源图标资源以优化页面视觉效果与交互体验。

出图效果大概还可以吧，这样就把UI设计搞定了，有需要也可以慢慢调整

3、整体系统架构提示词

根据所提供的需求文档内容及UI页面设计，制定一份详细的系统架构方案。
该方案应全面覆盖系统的整体结构、模块划分、技术选型、数据流程、接口设计、安全策略及部署架构等关键要素，确保架构设计与需求文档及UI页面的功能和交互要求高度匹配。