*动手学AI辅助编程* 学习笔记day2（task2 && task3）
# 前言
学习链接：Datawhale-AI活动
使用平台：豆包 MarsCode - 工作台
不得不说，豆包线上版有好用也有不好用。好用在于，不用太担心编译环境了，但不好用是，本地版可以添加上下文文件，但线上版不行。
另外没有研究线上版提供的编译环境是否完善，所以这方面待定。
# 正文
图片 来自Datawhale-AI活动
规定使用的编程语言、界面要求、游戏规则、用户操作说明
关于前端的知识：
这里很好的讲清楚了这些名词的含义。对于小白来说，即使没有系统的认知，也可以抓住重点，学完就用。
task2在外观方面给出一些介绍。
而外观在完整的开发流程中，属于前端。
因此task3 则着重介绍将开发划分为前后端的一种思路。
一套完整提示词，可以一键复制：
请按照以下步骤帮助我创建一个“人生成就系统”： 步骤1：创建基本的HTML页面结构请帮我创建一个基本的HTML页面，包含<!DOCTYPE html>声明，<html>、<head>和<body>标签。在<head>中添加页面标题“人生成就系统”，并引入Tailwind CSS的CDN链接。 步骤2：添加页面头部和主容器在<body>中添加一个导航栏，包含页面标题“人生成就系统”。然后添加一个主容器，用于放置记录成就的表单和展示成就的时间轴。 步骤3：创建成就记录表单在主容器中添加一个表单，包含以下字段：- 成就标题（文本输入框）- 成就描述（多行文本框）- 成就日期（日期选择器）- 提交按钮使用Tailwind CSS进行样式美化。 步骤4：创建时间轴展示区域在主容器中，表单下方添加一个时间轴区域，用于展示用户记录的成就。时间轴应按日期排序，并以时间流动的方式展示。 步骤5：添加JavaScript逻辑以处理表单提交和时间轴更新使用JavaScript为成就记录表单添加提交事件监听器。提交时，获取表单数据，创建一个新的成就条目，并将其添加到时间轴中。确保成就按日期排序。使用Tailwind CSS进行样式美化。 步骤6：美化时间轴样式使用Tailwind CSS进一步美化时间轴，使其更具视觉吸引力。添加左右交错的时间轴节点，使用不同颜色区分不同年份或类别的成就。 步骤7：添加删除成就功能为每个成就条目添加一个删除按钮。点击删除按钮后，从时间轴中移除该成就，并更新本地存储。 步骤8：实现编辑成就功能为每个成就条目添加一个编辑按钮。点击编辑按钮后，允许用户修改成就的标题、描述或日期，并更新时间轴和本地存储。 步骤9：实现响应式设计使用Tailwind CSS确保页面在不同设备上均有良好的显示效果。调整时间轴和表单在移动设备上的布局，使其适应屏幕宽度。 步骤10：添加动画效果以体现时间流动为时间轴中的成就条目添加进入动画，使其在加载时依次显示，体现时间的流动。使用Tailwind CSS和CSS动画实现渐变效果。 步骤11：实现本地存储以保存成就数据使用浏览器的LocalStorage功能，将用户记录的成就数据保存到本地。确保刷新页面后，成就数据仍然存在并正确显示在时间轴上。 步骤12：优化用户体验和UI设计使用Tailwind CSS进一步优化页面的用户体验和UI设计。添加适当的颜色、间距和字体，使页面更加美观大方。确保时间轴条目在不同设备上均有良好显示效果。
# 总结一下：
task2 指出了ai编程中提示词的重要性（之前俺觉得这属于编程认知的一环，但即使不懂得也可以用，所以，提示词就是提示词）
task3 主要介绍了前后端的区别和开发思路，给了一个完整的提示词示例。
编程语言、界面要求、游戏规则、用户操作说明 ————列出开发步骤
