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

embedded/2025/1/3 4:14:31/

使用 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 方式管理,确保状态的可控性和可观测性。
]

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


http://www.ppmy.cn/embedded/150253.html

相关文章

torch.nn.Sequential的用法

文章目录 介绍基本用法添加命名层动态添加层嵌套使用与自定义前向传播的区别 介绍 torch.nn.Sequential 是 PyTorch 中的一个容器模块,用于将多个神经网络层按顺序组合在一起。它可以让我们以更加简洁的方式定义前向传播的网络结构,适合简单的线性堆叠模…

使用CSS 和 JavaScript 实现鼠标悬停时图片放大、缩小和抖动

我们可以通过 CSS 和 JavaScript 来实现鼠标悬停时图片放大、缩小和抖动的效果。以下是一个简单的实现方式&#xff1a; 1.HTML 结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewp…

使用uWSGI将Flask应用部署到生产环境

使用uWSGI将Flask应用部署到生产环境&#xff1a; 1、安装uWSGI conda install -c conda-forge uwsgi&#xff08;pip install uwsgi会报错&#xff09; 2、配置uWSGI 在python程序的同一文件夹下创建 uwsgi.ini文件&#xff0c;文件内容如下表。 需要按照实际情况修改文件名称…

电脑中缺失的nvrtc64_90.dll文件如何修复?

一、文件丢失问题 案例&#xff1a;nvrtc64_90.dll文件缺失 问题分析&#xff1a; nvrtc64_90.dll是NVIDIA CUDA Runtime Compilation库的一部分&#xff0c;通常与NVIDIA的CUDA Toolkit或相关驱动程序一起安装。如果该文件丢失&#xff0c;可能会导致基于CUDA的应用程序&…

Unity3D 基于GraphView实现的节点编辑器框架详解

前言 在Unity3D游戏开发中&#xff0c;节点编辑器是一种强大的工具&#xff0c;它允许开发者以可视化的方式创建和编辑复杂的逻辑和流程。Unity提供了一个强大的UI工具包——GraphView&#xff0c;它使得创建自定义节点编辑器变得相对简单。本文将详细介绍如何使用GraphView实…

数据的简单处理——pandas模块——读取数据(Excel和csv格式)

使用Pandas模块可以从多种类型的文件中读取数据。本节主要从Excel和csv格式文件中读取数据为例&#xff0c;进行练习。 一、读取数据Excel格式 主要包括&#xff0c;读取完整表格、读取指定行数据、读取指定列数据。 二、读取数据csv格式 主要包括&#xff0c;读取完整表格…

ubuntu 20.04 国内源安装docker

先更新软件包&#xff0c;安装备要apt软件 # 更新软件包索引 sudo apt-get update# 安装需要的软件包以使apt能够通过HTTPS使用仓库 sudo apt-get install ca-certificates curl gnupg lsb-release使用阿里云源 # 添加阿里云官方GPG密钥 curl -fsSL http://mirrors.aliyun.co…

在C#中实现支持LINQ查询的自定义集合类

在C#中&#xff0c;若要使自定义集合类支持LINQ查询&#xff0c;需要实现一些特定的接口&#xff0c;这些接口通常与集合数据的枚举和操作有关。以下是一个基本步骤指南&#xff0c;用于创建一个支持LINQ查询的自定义集合类&#xff1a; 实现IEnumerable<T>接口&#xff…