Cursor 是 AI 原生代码编辑器。其风格整体偏暖:背景用暖米白(#f2f1ed)而非纯白,正文是带黄调的暖近黑(#26251e);CursorGothic 以激进负字距压缩展示标题,jjannon 衬线配 cswh 花体管正文,berkeleyMono 管代码,橙色(#f54e00)作强调。适合开发者工具与 AI 编程产品。
开发者工具现代极简
提示词模板
基础模板
Design a Cursor-inspired interface. - CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings; - jjannon serif for body text with OpenType "cswh" (contextual swash alternates); - berkeleyMono for code and technical labels; - Warm off-white background (#f2f1ed) instead of pure white -- the entire system is warm-shifted; - Primary text color #26251e (warm near-black with yellow undertone). Colors: #26251e, #f2f1ed, #e6e5e0, #ffffff with #f54e00 accent. Typography: - Background:.
变体提示词
📱 移动端
Design a mobile app with Cursor aesthetics. Use Cursor color identity with #f54e00 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Cursor style. Use Cursor color identity with #f54e00 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Cursor design language. Use Cursor color identity with #f54e00 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Cursor visual identity. Use Cursor color identity with #f54e00 accents. Compelling, conversion-focused.
使用示例
Cursor 应用
Web 端Build a web app with Cursor design language and #f54e00 color system.
Cursor 仪表板
仪表板Create a dashboard using Cursor style with data visualization and - Background: typography.
✅ 适合场景
- 开发者工具
- 代码编辑器与 IDE 界面
- 开发者效率工具官网
❌ 不适合场景
- 面向大众的消费电商
- 暖色调生活方式产品
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述,可复制或下载后交给 AI 编程工具使用。