创建文件
在项目里新建：
your-project/
└── .cursor/
└── skills/
└── frontend-design.md把之前的内容写进去，保存为 .md 就行。
使用方式
在 Cursor 对话里直接引用：
@frontend-design.md 帮我设计一个登录页面description: 前端设计规范，创建有辨识度的高质量界面
globs: **/*.{tsx,jsx,css,html,vue}
alwaysApply: false
---
## 设计思维
在写代码前，先确定：
- 界面用途和受众
- 明确的美学方向（极简、复古、奢华、工业风等）
- 什么让这个设计令人难忘
## 字体规范
- 禁止使用 Inter、Arial、Roboto、system-ui 等通用字体
- 选择有个性的字体，搭配 Google Fonts 或本地字体
- 展示字体 + 正文字体 成对搭配
## 颜色规范
- 用 CSS 变量统一管理颜色
- 主色 + 鲜明强调色，避免平均分配的配色
- 禁止紫色渐变白底等 AI 审美套路
## 动效规范
- 优先 CSS 动画，React 项目用 Framer Motion
- 页面加载交错动画 > 散落微交互
- hover 状态要有惊喜感
## 布局规范
- 尝试非对称、重叠、打破网格的布局
- 大量留白 或 精心控制的高密度，二选一
- 避免千篇一律的卡片式布局
## 禁止事项
- 不用 Space Grotesk、Inter 等过度使用的字体
- 不用紫色渐变 + 白底的配色
- 不用预测性的组件模式
- 每个设计都要有独特性，不能雷同## 使用方式
在 Cursor 里，当你想触发这个规范时： @frontend-design 帮我设计一个登录页面
或者把 alwaysApply: true 改为自动对所有前端文件生效
技术栈规范 skill，专门定义项目用什么技术。
创建这个文件：
your-project/
└── .cursor/
└── skills/
└── tech-stack.md内容如下（根据你的实际情况修改）：
markdown
# 技术栈规范
## 前端
- 框架：Vue 3（Composition API）/ React 18
- 构建工具：Vite
- 语言：TypeScript
- 样式：Tailwind CSS
- 状态管理：Pinia（Vue）/ Zustand（React）
- 路由：Vue Router / React Router
- 动效：GSAP / Framer Motion（React）
- HTTP 请求：Axios
## 后端
- 语言：Node.js / PHP 8.x
- 框架：Express / NestJS / Laravel
- 数据库：MySQL / PostgreSQL / MongoDB
- ORM：Prisma / Eloquent
- 认证：JWT / Laravel Sanctum
## 开发规范
- 包管理：pnpm
- 代码风格：ESLint + Prettier
- 提交规范：Conventional Commits
- 环境变量：.env 文件管理
## 禁止事项
- 不用 jQuery
- 不用 class 组件（React）
- 不混用多个状态管理库
```
---
使用时：
```
@tech-stack.md @frontend-design.md 帮我创建一个用户登录页面