Cursor
Cursor 结合轻暖底色与清晰边界，信息和内容优先，兼具编辑器式细致。
开发者工具创作者工具
原始 HTML
适合：项目控制台、SaaS 后台、开发者工具
AI 界面风格起手器
选择真实产品风格，复制 DESIGN.md / 提示词
不做官方声明，不做品牌化替代，只做受启发的可落地视觉起点。给 Cursor、Claude Code、Codex、v0、Lovable、Bolt 一个更统一、更少模板味的 UI 起手规则。
按项目类型选风格
先按工具场景缩小范围，再进入详情复制提示词或完整 DESIGN.md。
热门精选
先试 Notion、Linear、Stripe、Vercel、Cursor、Figma 这组高频风格。
6/6
Figma
Figma 强调协同和创作性，布局中常见多层级工具条与画布思维。
创作者工具
原始 HTML
适合：可视化创作界面、画布工具、素材管理
Linear
Linear 的深色优先风格强调任务效率、事项管理与轻量高密度交互。
SaaS 仪表盘开发者工具
原始 HTML
适合：团队协作产品、任务管理、后台运营面板
Notion
Notion 的信息主张是“内容优先”，淡色底与中性线条驱动轻量编辑体验。
SaaS 仪表盘创作者工具
原始 HTML
适合：团队协作产品、任务管理、后台运营面板
Stripe
Stripe 兼具严谨金融与品牌化设计，强调接口、交易与报告信息可视化。
金融支付SaaS 仪表盘
原始 HTML
适合：支付系统、订单后台、财务看板
Vercel
Vercel 的开发者导向界面极简且强调项目发布、日志与可观察性。
开发者工具SaaS 仪表盘
原始 HTML
适合：项目控制台、SaaS 后台、开发者工具
结果已更新，点击卡片可查看详情。
快捷使用流程
把视觉方向变成 AI 工具能直接执行的启动规则。
步骤 1
找到风格
先按行业 / 工具类型选分类，再按关键词筛选。
步骤 2
复制提示词
复制快速提示词或 Cursor / Claude Code 专用提示词。
步骤 3
用 AI 生成起手页
用完整风格规范统一页面语义与视觉。
常见问题
这些风格是官方的吗？
均为受启发方向，用于启动设计系统风格参考，不是官方设计系统，不替代官方品牌规范。
如何使用 DESIGN.md？
在风格详情页复制完整 DESIGN.md 到 Cursor、Claude Code、Codex、v0 等工具，作为前端起手规则。