使用 AI Cursor 编程实现一个小产品 Chrome 扩展插件 MVP 功能

使用 AI Cursor 编程实现一个小产品 Chrome 扩展插件 MVP 功能,提前编写小产品需求技术文档作为上下文,再使用 currsor 单个页面维度生成,能够有效的减少错误,提升开发效率,所以我做了一个[小产品需求技术文档] 提示词分享出来,如下:

编写一个 [主题] Chrome 扩展插件产品技术文档,产品核心功能包括[功能描述1]、[功能描述2]、[功能描述3]等,具体流程如下:

1:产品背景:[基于产品核心功能,拆解出产品背景和用户故事,并分析其主要特点和优势]

2:产品目标:[根据产品背景生成三个产品目标]

3:产品需求:[

请按照产品功能需求描述1、需求2、需求3拆解出子需求

]

4:SEO 关键词:[基于产品核心功能,拆解出产品SEO关键词、长尾关键词、相似关键词等]

5:技术架构:使用 plasmoJS + React + Typescript + Tailwindcss + ShadcnUI 开发

6:项目结构:[理解并分析产品需求 + 技术架构生成新的项目结构]

7:UI 设计:[

整体:使用 Tailwindcss 实现响应式设计, 并使用 ShadcnUI 提供现代化的 UI 组件

布局:根据内容自动选择卡片式 + 网格式的布局方式,选择合适的布局方式进行展示

配色:使用 三色渐变配色 + 动画配色,并使用 Tailwindcss 提供的 color 类实现颜色变化

字体:使用 Google Fonts 字体,基于当前系统字体和其他字体进行混合

]

8:代码规范:[

原则:使用 SOLID、DRY、KISS、YAGNI、SRP、OCP、LSP 原则,易扩展、易维护、易理解、易单元测试、易迭代

需求:深入分析并全理解产品需求和用户期望

拆分:将复杂逻辑拆分为可管理的子需求,使得开发过程更加高效,减少返工

结构:拆解出项目结构,并根据理解的需求拆解项目结构、页面、组件、数据和状态

页面:给出合理的页面布局,并根据理解的需求拆解页面结构、组件、数据和状态

组件:hooks和纯函数方式完成,组件划分为页面组件、公共组件、UI组件、功能组件,并且组合优于继承,减少副作用

数据:数据请求和处理,使用 useSWR 完成,并且尽量使用 TypeScript 类型定义数据结构

状态:保持状态最小必需状态,如多组件需要共享状态时,将状态提升至最近公共父组件,保持单一数据源,避免冲突问题;优先使用 Props 数据传递,保持单向数据流,严格遵循 React 生命周期最佳实践,尽量避免使用副作用 hooks 时,减少重复计算的依赖项,并保持简洁的依赖或无依赖。全局状态尽量使用 useContext 和 useReducer 方式管理,确保状态的可控性和可观测性。

]

请严格按照流程一步一步和用户互动进行完成,文档内容应当充分补充,以便后续的版本升级和扩展。并且,当用户确认完成以后,再进行下一步,直到整体流程完成。

相关推荐
QQ1__8115175158 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
John_ToDebug8 小时前
深入剖析 WebHostView:浏览器内核中的桌面级 Web 宿主
chrome
钛态8 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子8 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室8 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI8 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing8 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者8 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册8 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李8 小时前
2026 年 Web 前端开发的 8 个趋势!
前端