如何使用 Cursor
制作好看的前端页面
不是你不会用 Cursor，是你缺一份设计规范。本文提供从参考网站提取设计系统到生成 .cursorrules 的完整工作流。
页面总是"AI 味"太重
紫蓝渐变、圆角卡片、千篇一律的 Hero 布局——AI 生成的页面缺乏设计个性。
提示词无法表达审美意图
"帮我做一个好看的页面"这种模糊指令，AI 只能给出最安全的通用方案。
没有设计系统，迭代即走样
每次修改都让页面越来越乱，因为没有统一的颜色、字体和间距规范。
问题诊断
为什么你的 Cursor 页面总是"不好看"
缺少设计参考，AI 只能"凭感觉"
当你只给 AI 一句"做一个好看的页面"时，它只能调用训练数据中最常见的模式——通常是紫蓝渐变、玻璃拟态、圆角卡片。这些设计在 2023 年可能新鲜，但现在已经烂大街。
提示词缺乏结构化设计意图
"现代风格"、"简洁大气"这类主观词汇对 AI 没有意义。AI 需要的是具体、可量化的设计参数：配色 HEX 值、字体族、间距 Token、阴影参数、圆角大小。
没有设计系统，迭代即失控
AI 生成的代码往往是"一次性"的——没有 CSS 变量、没有统一的设计 Token。当你要求"把按钮改成红色"时，AI 可能只改了某几个按钮，而忽略了页面其他地方的按钮样式。
方法论
核心原则：设计优先，代码次之
在用 Cursor 写代码之前，先让 AI 理解你要的设计系统。
找到设计参考
不要凭空想象。找到 1-3 个你喜欢的设计参考网站，用 Design Extractor 一键提取它们的设计系统。
提取设计规范
获取配色方案、字体栈、间距系统、动效参数、组件样式的结构化文档。
转化为 .cursorrules
将设计规范转化为 Cursor 能理解的规则文件，让 AI 在生成代码时自动遵循。
结构化提示词生成
使用包含设计规范的结构化提示词，让 AI 输出符合预期的初始页面。
视觉精调与组件化
用 Browser Visual Editor 微调细节，然后提取可复用组件。
Workflow
5 步实战工作流
STEP 01
找到参考，提取设计系统
用 Design Extractor 一键分析你喜欢的设计参考网站，30 秒内获取完整的配色、字体、间距、动效规范。
STEP 02
生成 .cursorrules 文件
将提取的设计规范转化为 Cursor 规则文件，定义颜色变量、字体层级、间距系统、组件样式。
STEP 03
结构化提示词生成初始页面
使用包含设计规范的结构化提示词，让 AI 生成符合设计系统的高保真初始页面。
STEP 04
Browser Visual Editor 精调
用 Cursor 2.2 的 Browser Visual Editor 指哪打哪，微调间距、颜色、排版细节。
STEP 05
组件化与复用
将页面拆分为可复用组件，建立项目级设计系统，确保后续迭代不走样。
模板库
可直接复用的提示词模板
复制粘贴即可使用，每个模板都包含完整的风格描述、配色要求和布局结构。
现代 SaaS 落地页
适合 B2B 产品、工具型应用的官方落地页，强调专业感和信任感。
请帮我创建一个现代 SaaS 产品的落地页，使用 React + Tailwind CSS。
## 设计规范
- **整体风格**: 深色科技风，强调专业感和数据密度
- **配色方案**:
- 背景: #0a0a0f
- 主色: #6366f1 (indigo)
- 文字: #f1f5f9 (白色系)
- 辅色: #1e293b (深灰)
- **字体**:
- 标题: Georgia, serif
- 正文: system-ui, sans-serif
- 代码: JetBrains Mono, monospace
- **间距系统**: 基于 4px，使用 16px/24px/32px/48px/64px
- **圆角**: 按钮 pill (9999px)，卡片 12px，输入框 8px
- **阴影**: 使用微妙的双层阴影，避免过重的投影
## 页面结构
1. **导航栏**: 固定顶部，透明背景滚动后变为毛玻璃效果
2. **Hero 区**: 左侧标题 + 右侧产品截图，强调价值主张
3. **Logo 墙**: 展示客户/合作伙伴 logo
4. **功能特性**: 3 列卡片网格，每卡有图标 + 标题 + 描述
5. **数据展示**: 大号数字 + 说明文字，建立信任
6. **定价**: 3 档定价卡片，中间为高亮推荐
7. **FAQ**: 手风琴式折叠问答
8. **CTA**: 底部行动召唤区
## 交互要求
- 滚动时导航栏背景过渡动画 (300ms)
- 卡片 hover 时轻微上浮 + 阴影增强
- 数字统计使用计数动画
- FAQ 展开/收起有高度过渡电商产品详情页
适合单品展示、预售页面，强调视觉冲击力和购买欲望。
请帮我创建一个电商产品详情页，使用 React + Tailwind CSS。
## 设计规范
- **整体风格**: 温暖高级，强调产品质感和生活方式
- **配色方案**:
- 背景: #fafaf9 (暖白)
- 主色: #ea580c (橙色系，热情)
- 文字: #1c1917 (深暖灰)
- 辅色: #f5f5f4 (浅灰)
- **字体**:
- 标题: Playfair Display, Georgia, serif
- 正文: Inter, system-ui, sans-serif
- **间距系统**: 基于 8px，使用 24px/32px/48px/64px/96px
- **圆角**: 产品图 16px，按钮 8px，标签 pill
- **阴影**: 产品图使用柔和阴影，避免扁平感
## 页面结构
1. **导航栏**: 简洁，突出品牌名和购物车图标
2. **产品区**: 左侧大图轮播 + 右侧产品信息
3. **卖点**: 4 个图标 + 文字的信任要素
4. **详情**: Tab 切换（详情/规格/评价）
5. **推荐**: 相关产品横向滚动
6. **CTA**: 固定的底部购买栏（移动端）
## 交互要求
- 产品图支持缩放查看
- 颜色/尺码选择有选中状态
- 加入购物车有反馈动画
- 图片轮播支持手势滑动个人作品集
适合设计师、开发者展示项目，强调个性化和创意表达。
请帮我创建一个个人作品集网站，使用 React + Tailwind CSS。
## 设计规范
- **整体风格**: 极简艺术感，大量留白，作品本身是最亮眼的元素
- **配色方案**:
- 背景: #ffffff (纯白)
- 主色: #000000 (纯黑，用于文字和强调)
- 文字: #000000 (标题) / #737373 (正文)
- 辅色: #f5f5f5 (浅灰背景)
- **字体**:
- 标题: Helvetica Neue, Arial, sans-serif (粗体)
- 正文: system-ui, sans-serif
- **间距系统**: 大量留白，模块间距 80px-120px
- **圆角**: 全部 0px (锐角，增强设计感)
- **阴影**: 不使用阴影，用边框分割
## 页面结构
1. **导航栏**: 极简，仅名字 + 邮箱链接
2. **Hero**: 大号姓名 + 一句话简介，底部滚动提示
3. **项目列表**: 大图 + 项目名 + 类型标签，纵向排列
4. **关于**: 头像 + 简介 + 技能标签
5. **联系**: 大号邮箱链接 + 社交媒体图标
## 交互要求
- 项目图 hover 时显示项目信息遮罩
- 页面滚动有平滑过渡
- 移动端菜单全屏展开
- 图片懒加载，有模糊占位案例
真实案例：从参考到输出
使用 Design Extractor 提取设计规范，再用 Cursor 复刻的完整流程演示。
Linear 风格仪表盘
提取 Linear 的深色科技风设计系统，用 Cursor 生成一个数据仪表盘页面。关键：深黑背景 + indigo 强调色 + 玻璃拟态卡片 + 极细边框。
Notion 风格文档站
提取 Notion 的极简编辑体验设计，生成一个文档/博客站点。关键：大量留白 + 清晰的层级结构 + 柔和的交互反馈。
Stripe 风格支付页
提取 Stripe 的精致表单设计，生成一个结账/支付页面。关键：精细的输入框样式 + 清晰的信息层级 + 安全感营造。
进阶
让页面从"能用"到"精致"的进阶技巧
这些细节决定了你的页面是"AI 生成的"还是"设计师级别的"。
让 AI 理解"高级感"
不要用"好看""高级"这类主观词。改用具体描述："使用 0.5px 的极细边框而非 1px"、"阴影使用 rgba(0,0,0,0.04) 而非默认黑色"、"标题使用 -0.02em 的字间距"。
动效的"少即是多"
一个页面最多 2-3 种动效类型。推荐组合：页面加载时的 staggered fade-in + hover 时的微位移。避免同时出现弹跳、旋转、缩放等多种动效。
响应式设计的提示词策略
在提示词中明确要求"Mobile-first"，并指定断点行为："在移动端，将 3 列网格变为单列，导航变为汉堡菜单，Hero 文字左对齐改为居中对齐"。
深色模式的优雅适配
不要简单反转颜色。深色模式应该：降低整体对比度（纯白文字 → 90% 白）、增加边框透明度（让层级更柔和）、调整阴影为"发光"效果。
FAQ
常见问题
因为 AI 在缺乏具体设计参考时，会调用训练数据中最常见的模式（紫蓝渐变、玻璃拟态、圆角卡片）。解决方案：先提取具体网站的设计规范，让 AI 有明确的参数可循。
放在项目根目录下，文件名为 `.cursorrules`（注意前面的点）。Cursor 会自动读取该文件并将其内容作为系统提示的一部分。
将 DESIGN.md 中的配色、字体、间距等规范整理成 .cursorrules 格式，或者直接在 Cursor 的 Chat 中粘贴 DESIGN.md 作为上下文，然后要求 AI 按此规范生成代码。
Browser Visual Editor 让你可以"指哪打哪"——点击页面元素，用自然语言描述修改，AI 自动定位并修改对应代码。适合快速原型和视觉微调，不适合复杂逻辑修改。
提示词的长度不是关键，结构才是。建议格式：项目背景 → 技术栈 → 设计规范（配色/字体/间距）→ 页面结构 → 交互要求 → 特殊注意。通常 300-800 字的结构化提示词效果最好。
在提示词中明确要求：1) Mobile-first 设计；2) 指定断点行为（如"<768px 时单列布局"）；3) 使用 Tailwind 的响应式前缀（md:、lg:）。
如果你有 Figma 设计稿，可以直接用 Figma MCP 或 Design Extractor 的 Figma 插件提取规范。但如果你的参考是"某个 live 网站"，Design Extractor 是唯一能从运行中的页面提取完整设计系统的工具。
可以。免费版 Cursor 的 AI 功能和 Pro 版相同，只是有使用次数限制。Pro 版（$20/月）提供无限 GPT-4/Claude 调用，但免费版足以完成本文介绍的所有工作流。