Cursor实战：手把手教你用AI生成高质量React组件
提示词描述：
专为前端开发者打造的组件生成指南。通过步骤清单式的提示词，引导AI像导师一样输出结构清晰、包含状态管理和响应式样式的高质量React/Vue组件代码，适合在Cursor等IDE中配合使用，大幅提升UI开发效率。
提示语关键词：
AI写代码,Cursor提示词,React组件开发,AI生成前端代码,前端组件模板
提示词内容：
【应用场景】
同学们，在日常前端开发中，我们经常需要快速搭建各种UI组件。无论是后台管理系统的复杂表格，还是C端产品的交互动画弹窗，手动从零编写不仅耗时，还容易遗漏边界情况的处理。今天老师就带大家用AI创意助手，在Cursor等编程工具中快速生成高质量、可复用的前端组件代码。
【案例描述】
假设我们现在需要开发一个“用户数据看板”的卡片组件。老师会引导AI，不仅生成基础UI，还要包含数据模拟、加载状态和错误处理。通过下面的提示词模板，你只需填入核心信息，AI就能像资深导师一样为你输出结构清晰的步骤清单和完整代码，让你知其然更知其所以然。
【提示词正文】
你现在是一位拥有10年经验的资深前端架构师。请帮我编写一个名为 {组件名称} 的 {UI框架} 组件。该组件的核心功能是 {核心功能}。
请严格按照以下步骤清单进行思考和输出：
1. 组件结构设计：拆分合理的子组件，定义清晰的Props接口（必须包含TypeScript类型和默认值）。
2. 状态与副作用：使用合适的Hook管理内部状态，并妥善处理加载中、空数据和错误三种状态。
3. 样式实现：使用 {样式方案} 编写响应式样式，确保在移动端和PC端表现一致，并支持暗黑模式。
4. 代码注释：在关键逻辑处添加清晰的中文注释，重点解释“为什么这么做”而不是“做了什么”。
请确保代码符合ESLint规范，具备高可复用性，并直接输出完整可运行的代码。
【使用技巧】
老师提醒大家，使用这个提示词时，{核心功能} 尽量描述得具体一些，比如“支持拖拽排序、动态增删和防抖搜索”，这样AI生成的代码会更贴合实战。如果在Cursor中使用，建议开启Composer模式，让AI自动为你创建对应的文件并写入代码。
【延伸用法】
掌握了组件生成后，大家可以尝试让AI为你生成该组件的Storybook文档，或者让它根据Figma的设计稿截图直接生成对应的代码结构，进一步打通设计到开发的效率闭环。