核心概览
Cursor 将浏览器开发者工具、设计面板与 AI 助手集成至 IDE 窗口。用户点击页面任意元素即可修改样式，代码自动生成。
传统流程通常是 Figma 导出规范后手动编写 CSS，再切回浏览器验证效果。现在只需点击 H1 元素，拖动字号滑块，代码自动更新并实时预览。这实现了设计与开发的闭环。
功能架构
工作区分为三栏：
- 左侧：渲染中的 Web 应用（Live Preview）
- 中侧：源代码（HTML/JSX/CSS）
- 右侧：Visual Inspector 面板，这是核心交互区域
核心功能解析
点选即编辑
操作逻辑类似 Chrome DevTools，但更深度集成。
点击页面任意元素（如 button），右侧面板自动聚焦其 CSS 属性。支持实时调整 font-size、padding、opacity、border-radius 和 box-shadow。修改会即时同步到源码（.css 或 style={{}}）。
技术底层基于 DevTools Protocol 深度集成，支持 React/Vue/Svelte 组件树映射，而非仅 DOM 节点。
AI 深度协同
当选中一个 h1 标题时，AI 能感知上下文并生成建议代码供 Review。
例如输入指令："改成科技感渐变，字体加粗，加点微妙的悬停动画"。
Cursor AI 会自动识别当前光标位于 marketing-landing-page.jsx 的 H1 元素，并生成如下代码：
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent hover:scale-105 transition-transform">Welcome to the future</h1>
支持的操作包括重写文案（SEO 优化/多语言）、生成配色方案（基于 Design System Token）以及自动响应式适配（添加 @media 断点）。
Design System 集成
Visual Editor 支持绑定设计系统 Token，避免使用魔法数字。
| 属性 | 默认值 | 可选 Token |
|---|---|---|
| font-size | 1rem | text.sm, text.base, text.lg |
| color | #333 | colors.gray.800, colors.primary |
| spacing | 8px | space.2, space.4, space.6 |
