AI 写前端页面新手教程

让 AI 写前端页面时，不要只说“做得好看一点”。要说明页面用途、用户是谁、需要哪些功能、视觉风格和验收方式。

一、先说清页面目标

错误写法：

帮我做个首页，好看点。

更好的写法：

请帮我优化教程网站首页。目标用户是 AI 工具新手。首页需要突出快速开始、AI 入门、工具教程和进阶实战。风格要清晰、现代、不要太花。改完后检查移动端是否正常。

二、告诉 AI 页面结构

可以这样描述：

首页需要包含：
1. 顶部主标题
2. 一句简单介绍
3. 开始教程按钮
4. 四个教程分类入口
5. 最近更新教程列表

三、告诉 AI 不要做什么

不要使用过度复杂的动画。
不要让文字和按钮重叠。
不要改动无关页面。
不要引入新的大型依赖。

四、让 AI 检查适配

请检查桌面端和手机端布局，确保文字不溢出、按钮不重叠、图片能正常显示。

五、让 AI 验证

如果项目是 VitePress / Vite / Vue，常用验证：

npm run build
npm run dev

也可以让 AI 打开页面检查：

请启动本地服务，打开首页检查视觉效果，并修复明显的布局问题。

六、常用完整 Prompt

请帮我优化首页。目标用户是 AI 工具小白，页面要清晰、可信、容易开始。

要求：
1. 保留现有品牌和 logo
2. 首页第一屏要能看到开始教程入口
3. 增加 AI 入门、工具教程、进阶实战入口
4. 加一点克制的动效
5. 移动端不能文字溢出或重叠
6. 改完运行 npm run build