引言：
作为一名在IT行业算是“安稳度日”的小小前端，如今感受到了大环境下的改革（AI时代编程就这样悄然而至了），为了吃饱喝足的快乐生活，我决定继续开始记录学习AI的过程，加油吧，牛马们！
让我们先看看这两个世纪编程的演变
- 20世纪末：程序员通过记事本写代码
- 2000年后：IDE编程时代（集成开发环境进行编写代码）
- 当下：AI工具高校编程
（用户输入 -> 前端请求 -> 后端处理 -> AI模型 -> 返回响应 -> 前端渲染）
再了解一下AI相关术语吧
AI术语
1、人工智能（AI） 是指计算机系统模拟人类智能行为的能力，例如学习、推理或解决问题。
2、机器学习（ML） 是AI的一个子集，侧重于开发算法，使计算机能够从数据中学习并改进性能，而无需显式编程。
3、深度学习 是机器学习的一种方法，通过人工神经网络的多层结构处理复杂模式，如图像或语音识别。
4、自然语言处理（NLP） 专注于让计算机理解、生成和互动人类语言，应用于聊天机器人或翻译工具。
5、生成式AI 利用模型（如大型语言模型）创建新内容，例如文本、图像或音乐，常用于创意设计或自动化写作。
6、通用人工智能（AGI） 是指具备人类水平通用智能的AI，能够跨领域自主学习和解决各种问题，目前仍处于理论研究阶段。
7、强人工智能 与AGI密切相关，强调AI系统可能拥有自我意识和类人理解能力，但这一概念在学术界存在争议。
目前国内外主流的AI模型
1、国内-豆包（产自：字节跳动），MOE（混合专家：https://baike.baidu.com/item/混合专家模型/65370159）架构，UltraMem（百度百科地址：https://baike.baidu.com/item/UltraMem/65394590）效率优化。
目前主要应用：豆包APP、即梦APP、火山引擎等
2、国内-通义千问（产自：阿里巴巴），MOE结合“快思考、慢思考”架构（快思考基于直觉和情感，消耗算力极少，适合处理日常简单任务如寒暄回复；慢思考则涉及逻辑推理、复杂计算和批判性思考，需要多步骤深度分析，但算力消耗较高）。
Qwen3-Coder：主打一个丝滑编程（改天试试：https://chat.qwen.ai）
目前主要应用：淘宝、钉钉
3、国内-DeepSeek（产自：深度求索），MOE模型，深度探索+注意力机制
4、国外-GPT模型（3/4/4o/5）（产自：美国OpenAI），Transformer解码器（百度百科地址：https://baike.baidu.com/item/Transformer模型架构/64430120?fr=aladdin）
5、国外-Gemini（1/1.5/2/2.5/3）（产自：谷歌DeepMind，地址：https://baike.baidu.com/item/Gemini/63729669），Transformer架构，苹果将使用该模型改版Siri！！！
6、国外-Claude（产自：美国Anthropic），Constitutional AI训练模型（地址：https://baike.baidu.com/item/Anthropic/62639515?fromModule=lemma_inlink），2025年9月正式发布Claude Sonnet 4.5，官方称其为“世界上最好的编程模型”
上面是简单的AI介绍，从现在开始我们就要进入真正的实战AI项目
项目背景：AI时代，覆盖从产品交互设计、前端vue开发、后端node、数据库Mysql、AI大模型对接等功能的项目
第一步：项目原型设计
- AI时代，推荐一款设计工具，MasterGo（官网地址）
- 点击进入官网，登录注册后点击设计，进入到编辑页面，可以在导航条上看到AI图标，点击AI图标，可以输入自己的需求提示词（大家可以随意尝试一下）。
- 编写设计提示的核心要素：
（1）明确核心：产品的类型+风格+主色调
（2）分区拆解：如导航、侧边栏、聊天区域、底部输入框
（3）区域细节：顶部导航条的具体元素内容
（4）视觉细节：颜色、尺寸、间距等
（5）功能交互说明：下钻、悬停等 -
一个好的提示词是生成优质AI设计图的关键，我把本项目的提示词放到最后面供大家尝试，操作以及生成效果如下图所示：
image.png
image.png
附录一：UI设计图的提示词
一、AI 聊天网页界面设计
生成一款 现代简约风格的「AI 聊天网页界面」，严格遵循以下规范：
- 全局样式
•主色：珊瑚橙 #FF7F50
•所有按钮与卡片圆角：10 px
- 页面区块与尺寸
1.顶部导航栏 高度 70 px
2.左侧边栏 宽度 300 px
3.主聊天区 居中自适应宽度
4.右侧功能区
◦固定浮窗宽 60 px，高120px，半透明白背景
◦侧栏面板宽 320 px（默认隐藏，点击浮窗按钮滑入）
1.底部固定输入区 多行文本域 + 发送按钮（主色，圆角 10 px）
- 具体布局与交互
3.1 顶部导航栏
•最左：Logo + 项目名 “智能汇 AI”
•左侧 Tab（左缘与边栏右缘对齐）
a.聊天室 ——默认高亮，淡橙背景
b.笔记本
c.AI 画室
每个 Tab 添加小图标
•最右：用户信息（圆形头像 + 用户名），支持下拉个人中心
3.2 左侧边栏
•顶部居中按钮 “新建对话”（淡色填充，珊瑚橙虚线边框）
◦按钮右侧放折叠/展开图标
•下方对话列表（时间倒序）
◦默认：图标 + 标题 + 时间
◦悬停：时间隐藏 → 显示 “编辑 / 下载 / 删除” 三图标
3.3 主聊天区
•气泡式排版居中
•用户消息：左对齐，用户头像 + 主色气泡
•AI 消息：左对齐，AI 头像 + 白底浅灰边框气泡
•每条 AI 气泡左下放 4 个功能按钮：复制、朗读、收藏、下载
3.4 右侧功能区
1.固定小浮窗（高120px,宽40）
◦垂直排列两个 40 × 40 px 图标按钮：「我的」「问答」
1.侧栏（互斥显示）
◦我的提示词面板（点击「我的」按钮滑入）
▪顶部：40 px 高搜索框（回车搜索）+ 同行主色「新建」按钮
▪分组小按钮区（可新建 / 删除分组；点击筛选提示词）
▪下方卡片式提示词列表（悬停显 编辑 / 删除）
◦问答面板（点击「问答」按钮居中弹窗）
▪顶部：40 px 高搜索框
▪下方折叠面板：问题展开，答案默认折叠
▪弹窗宽度为视口 60%，右上配灰色圆形关闭按钮
3.5 底部输入区
•自适应多行文本域，灰色占位提示
•右侧垂直居中 “发送” 按钮（主色填充，圆角 10 px）
二、笔记本界面设计
删除AI聊天原先的对话气泡区域、底部输入框以及右侧固定浮窗。
（二）页面布局
- 顶部导航栏
•Tab 默认选中「笔记本」，高亮样式沿用主色文字 + 淡橙背景。
- 左侧边栏（笔记管理）
•按钮替换：将顶部「新建对话」改为「新建笔记」，样式不变；
•新增搜索框：在按钮下方新增 1 行搜索框，用于按关键词检索笔记；
•分割线：搜索框下方添加浅灰分割线；
•笔记列表：按创建时间倒序排列，每条仅显示「笔记标题」与「创建时间」，点击列表项可切换查看对应笔记内容。
- 主编辑区域
•顶部工具栏（高度 60px）：
◦左侧并列放置保存按钮、导出按钮；
◦右侧并列放置润色、扩写、翻译按钮；所有按钮采用简约小按钮风格；
富文本编辑器：占据除工具栏外的全部可视空间，上方自带文本格式化工具条，支持实时编辑与光标定位。
三、AI 绘画界面设计
沿用 AI 聊天界面风格，聚焦绘画功能。
（二）页面布局
- 顶部导航栏
•版式沿用原布局；
•将 Tab 默认高亮设置为「AI 绘画」。
- 左侧边栏（绘画管理）
•顶部按钮替换为「新建绘画」，其样式与原 “新建对话” 一致；
•下方列表显示已生成的绘画记录：按创建时间倒序排列，每条条目展示「绘画标题」与「创建时间」；点击条目可切换并在主聊天区查看对应的绘画对话。
- 主聊天区（对话生成图片）
•保持原对话气泡布局：左侧为用户提问，AI 回复位置不变；
•AI 回复内容改为图片（而非文本）；
•鼠标悬停图片时，在图片上方浮现下载与收藏图标按钮；
•用户可继续输入指令对图片进行 “再次修改”，新图片会依次追加到对话中。
- 底部输入区域
•输入框保持不变；
•在输入框正上方水平并列三个下拉框：
◦图片尺寸（例如：512×512、1024×1024…）；
◦绘画风格（如：卡通、油画、赛博朋克…）；
◦生成张数（1 - 4 张）。
- 右侧功能区
•原固定浮窗替换为单个收藏图标按钮；
•点击该按钮弹出图片收藏弹窗：内部使用瀑布流排列已收藏图片；图片悬停时显示下载与删除操作按钮。
