chichichi.icu/前言

前言

README AI 生成

作为一个后端开发，22年开始就一直“顺便”写着前端代码。但是这个网址前端内容我只用ai完成！若完全没有开发经验的小白（有开发经验的不许看！）需要参考提示词可以自行下载参考（我也很菜），每个标题下我都会尽量给你们带上相应的提示词并且会附上与ai交流的话术。

以下是ai告诉我如何写好提示词的对话：

chichichi：你是一个使用ai模型对话开发的的资深高手，并且人狠话不多不说任何废话。麻烦你告诉我，在开发过程中如果想要ai能够准确实现我所想要的样式及功能，我要如何发出指令，按步骤告诉我并且给我个示例。

ai：想让 AI 准确实现样式和功能，指令必须包含：目标、技术栈、视觉要求、交互逻辑、限制条件、验收标准。

按这个顺序发：

说明要做什么
- 例：开发一个后台订单管理页面。
指定技术栈
- 例：React + TypeScript + Tailwind CSS，不使用其他 UI 框架。
描述页面结构
- 例：顶部导航、左侧菜单、筛选区、数据表格、分页、详情弹窗。
描述视觉样式
- 指定颜色、间距、字体、圆角、阴影、布局宽度、明暗主题。
- 不要只说“高级、好看、简洁”，这些无法直接执行。
描述交互逻辑
- 例：点击筛选后更新表格；点击订单打开详情；删除前弹出确认框；加载时显示骨架屏。
说明响应式要求
- 例：桌面端三栏布局，平板端隐藏侧栏，移动端表格改为卡片列表。
说明限制
- 例：不要修改现有路由；不要新增依赖；保留现有接口；所有按钮必须可操作。
提供验收标准
- 例：页面无横向滚动；刷新后状态保留；空数据、加载中、报错状态完整。
要求 AI 先检查再修改
- 这样可以避免 AI 不看项目结构就直接乱写。

可直接使用这个模板：

你是一名资深前端工程师，请先检查项目结构、现有组件、样式规范和接口定义，再开始修改。

目标：
开发一个订单管理页面。

技术要求：
- React + TypeScript
- 使用项目现有的 CSS 方案
- 不新增依赖
- 不修改现有路由和接口
- 代码必须通过 TypeScript 检查

页面结构：
- 顶部：页面标题、导出按钮
- 筛选区：订单号输入框、状态下拉框、日期范围、查询按钮、重置按钮
- 内容区：订单数据表格
- 表格列：订单号、客户、金额、状态、创建时间、操作
- 底部：分页器
- 点击“查看”打开订单详情抽屉

视觉要求：
- 页面背景色为 #F6F7F9
- 内容区域最大宽度 1440px
- 卡片背景白色
- 边框颜色 #E5E7EB
- 圆角 8px
- 主色为 #2563EB
- 表格行高 52px
- 字体大小使用项目现有规范
- 页面整体风格克制、紧凑，适合高频操作
- 不使用渐变、装饰性大图和无意义动画

交互要求：
- 点击查询时根据筛选条件刷新数据
- 点击重置时清空所有筛选条件
- 加载时显示骨架屏
- 没有数据时显示空状态
- 请求失败时显示错误提示和重试按钮
- 删除订单前必须二次确认
- 查询条件和分页状态写入 URL，刷新后保持不变

响应式要求：
- 桌面端显示完整表格和侧边详情抽屉
- 平板端隐藏部分低优先级列
- 移动端将表格转换为订单卡片列表
- 页面不能出现横向滚动

执行步骤：
1. 先告诉我你发现了哪些相关文件。
2. 说明准备修改哪些文件以及原因。
3. 直接完成实现。
4. 运行项目已有的检查命令。
5. 汇报修改内容、测试结果和仍存在的问题。

开发时不要一次说“帮我做一个好看的页面”。正确方式是：

先实现页面结构和静态样式，完成后停止。

然后：

现在补充筛选、分页、详情抽屉和错误状态。

最后：

请检查桌面端 1440px、平板端 768px、移动端 375px，修复布局溢出、文字遮挡和按钮不可用问题。

核心原则：把审美词换成具体参数，把功能描述换成可验证行为，把“做完”换成验收条件。