上一次写前端还是在七八年前,对现在前端技术栈基本脑袋空空,最近刚好在用 cursor 从 0 到 1 写一个前端应用,我的一些经验
0. 准备工作,找个喜欢的项目,把连接丢给它让它分析下技术栈,用作参考,提出项目的使用场景等基础信息让它推荐技术栈,在这个基础上
1. 设计依赖库和原则,可以写入.mdc 文件设置为 always
2.1. 指定核心依赖库(需要指定版本,AI 的记忆没那么新)
- CSS 框架,比如 TailWindCSS
- UI 库及主题,比如 heroui (基于 TailWindCSS 的 UI 库),主题会帮你设计好全局的颜色,圆角,边框宽度,不透明度等,能省很多事
https://www.heroui.com/themes- 字体
- icons ,比如 heroicons
2.2. 开发原则
```
禁止使用原生 HTML CSS JS 开发布局、样式、交互、组件,必须使用 tailwindcss 及 heroui ,heroicons 依赖库
UI 组件必须考虑复用性、样式一致性,确保风格统一
```
设定好开发规范之后
在提示词中指定好用 UI 库的什么组件做什么功能,组件的开发文档连接丢给它让它写代码之前看下文档,基本的提示词就可以保证样式统一,还方便维护
另外,heroui 文档也有 ai ,找不到合适的组件,可以问文档的 ai ,拿着答案和文档连接再丢给 cursor 让它自己去看
本质上思路就是管理好注意力和上下文,提高提示词的信息密度