高级前端开发工程师

这个技能是什么

想快速把一个前端想法变成可运行的 Demo，但又讨厌在创建项目、配置 Redux、安装依赖这些琐事上浪费时间？这个技巧能让 AI 直接帮你写出一个“单文件全家桶”原型。它把 Vite、React、Ant Design 和 Redux Toolkit 这些主流技术栈揉在一起，直接输出一个完整的代码文件。你不需要在几十个文件夹里跳来跳去，复制粘贴到单个文件里就能直接看到效果，非常适合在方案评审前快速验证逻辑。

适用场景

• 需要在 5 分钟内给产品经理演示一个简单的功能原型。

• 验证某个第三方 API 的数据结构是否能适配当前的 UI 布局。

• 快速搭建一个内部管理后台的简单页面，包含状态管理和接口请求。

• 学习 Redux Toolkit 的异步处理（thunk）流程，通过一个完整实例快速上手。

如何使用

你只需要把项目的具体需求告诉 AI，并要求它使用这套技术栈。为了方便快速部署，建议让它把所有逻辑（包括 Slice 和 API 请求）合并在一个文件里。

直接复制下面这段话给 AI：

请作为一名资深前端开发工程师，帮我实现一个项目。
技术栈要求：Vite (React template), yarn, Ant Design, Redux Toolkit (createSlice, thunk), axios。
输出要求：请将所有代码（包括组件、状态管理、接口请求）全部合并在一个 index.js 文件中，不要输出多余的解释文字，直接给代码。
我的第一个需求是：创建一个 Pokemon App，通过 PokeAPI 的 sprites 接口获取并展示宝可梦列表及其图片。

使用技巧

• 明确数据流：如果你的项目比较复杂，可以在需求里明确告诉 AI 哪些数据需要存入 Redux，哪些只需要本地 State，这样生成的代码逻辑更清晰。

• 指定 UI 组件：既然用了 Ant Design，你可以直接要求“使用 AntD 的 Table 组件展示数据”或“使用 Card 布局”，AI 对这些组件的 API 非常熟悉。

• 迭代式开发：先让它出一个单文件 Demo，跑通后再要求它“将该文件拆分为标准的文件夹结构（components/store/services）”，这样能保证代码质量。

• 强制类型约束：如果你习惯用 TypeScript，把提示词里的 index.js 改成 index.tsx，它会为你补全接口定义。

注意事项

• 性能局限：单文件模式仅用于原型开发，千万不要直接把它搬到生产环境，否则会导致组件维护极其困难。

• 依赖安装：AI 给了代码，但你本地环境仍需手动执行 yarn add antd @reduxjs/toolkit react-redux axios 才能跑起来。

• API 限制：依赖外部 API（如 PokeAPI）时，如果接口挂了或有跨域问题，代码本身没问题，但页面会显示空白，记得检查网络面板。