作为前端，应该怎么写prompt,提高AI对前端的编码效率作为前端开发者，设计优秀的Prompt能显著提升AI编码效率。

作为前端开发者，设计优秀的Prompt能显著提升AI编码效率。以下是为你整理的实用Prompt策略：

🎯 精准提示的核心原则

text

[角色] + [上下文] + [任务] + [约束条件] + [输出格式]

示例：

text

作为资深前端专家，我正在开发一个React电商商品列表组件，需要：
1. 实现响应式网格布局（移动端1列，平板2列，桌面4列）
2. 支持图片懒加载和骨架屏
3. 包含价格过滤和排序功能
4. 使用TypeScript，遵循React最佳实践
请提供完整的组件代码，包含清晰的注释。

text

项目框架：Next.js 14 + TypeScript + Tailwind CSS
组件库：shadcn/ui
状态管理：Zustand
API交互：TanStack Query
特殊要求：需要支持暗黑模式、RTL布局

组件开发：

text

创建一个React表单组件，要求：
- 使用React Hook Form进行验证
- 集成Zod schema验证
- 包含错误状态提示
- 支持防抖提交（500ms）
- 提供完整的TypeScript类型定义

问题调试：

text

我遇到了一个Next.js 14中useSearchParams()在动态路由中的问题：
- 当前路径：/products/[id]?sort=price
- 问题描述：页面初始加载时searchParams为空
- 期望：首次加载就能获取查询参数
请分析原因并提供解决方案。

代码重构：

text

请优化这段组件代码，关注：
1. 性能优化（减少重渲染）
2. 代码可读性
3. 提取可复用逻辑
4. 添加错误边界
[粘贴你的代码]

markdown

请创建{组件名}组件：
技术栈：{React/Vue/Svelte等}
功能要点：
- {功能1}
- {功能2}
样式要求：{Tailwind/CSS Modules等}
交互需求：{动画效果、状态等}
输出：{完整代码/关键片段}

markdown

问题场景：{描述具体场景}
代码片段：{相关代码}
错误信息：{如有}
已尝试：{已尝试的解决方法}
期望结果：{希望达到的效果}

text

第一步：分析这个需求的实现方案
[需求描述]

第二步：针对方案中的关键难点提供实现代码

第三步：考虑边界情况和错误处理

text

方案A使用Context API，方案B使用Zustand，请：
1. 比较两者的优缺点
2. 给出性能对比数据
3. 为大型电商项目推荐方案

text

首轮：生成基础版本
第二轮：添加国际化支持
第三轮：优化移动端体验
第四轮：添加单元测试

text

请参考Ant Design的Table组件交互，实现一个简化的版本：
- 保留排序、筛选、分页核心功能
- 使用纯CSS实现，无外部依赖
- 响应式设计

text

需要处理以下数据结构：
const products = [
  { id: 1, name: "商品A", price: 100, stock: 10 },
  { id: 2, name: "商品B", price: 200, stock: 0 }
]

建立自己的Prompt库，记录：

每次交互后思考：

立即实践：从下次与AI协作开始，尝试为每个需求写清楚：

这样的Prompt能让AI生成更符合你项目需求的代码，减少反复调整的时间。