【2分钟让 Cursor 生成完整设计规范】
为什么很多 vibecoding 的产品，
功能已跑通，但一看 UI 就不成熟？
事实上很多项目都是功能先行，
当想认真打磨时， UI 往往成了最大短板。
今天分享一套方法，不用写代码，也不用画图。
只需要 Cursor ，2 分钟就能复刻生成完整的设计规范，立马能用。
先前往 Dribbble 或 站酷 浏览现成的产品设计案。注意：图片应当是正面视角，不要倾斜或有透视角度；保证元素清晰可见，不要太模糊。
打开 Cursor ，新建一个项目命名 demo 。拖拽图片到 Cursor 聊天框， Agent 选择 GPT 5.2 （它视觉识别比较好）。发送第一段提示词：
“以产品设计总监视角，深入分析所附的 UI 截图，并在本项目中生成一个 design.json 文件。该文件需高层次、明确地定义整个设计系统的视觉规则，包括：结构层级、间距、字体字号、颜色、整体设计风格与设计原则。design.json 将作为本项目唯一的设计规范来源。后续所有 UI 都严格遵循该文件，不得自行发挥或引入新的设计风格。”
执行完获得了 design.json 文件。把 Agent 切换到 Opus 4.6 ，它编程能力更强。输入第二段提示词：
“严格按照 中定义的设计风格，创建一个模拟仪表盘页面，用于展示设计规范中所有可能出现的 UI 组件。使用 React + Vite 构建，并将所有样式转换为 Tailwind CSS v3 实现，不得引入其他样式体系或自行设计。完成后在本地运行该项目以验证效果。”
打开页面查看，可用 Cursor 的指针选择页面元素发送到 Agent 来局部优化。
确认没问后，我们基于它来创建一个设计规范模板，发送第三段提示词：
“在本项目中创建一个名为 design 的文件夹，并在其中生成一个 design-system.json 文件。
该文件需明确、完整地定义本应用中所有组件与样式的具体设计规则，并补充必要的高层设计原则。
design-system.json 将作为 AI 在本项目中开发新功能时必须遵循的完整设计指南，后续所有 UI 实现均需以此文件为唯一依据，不得偏离。”
后续可基于这个规范让 Cursor 来输出新的页面，或者放到已有项目中让 Cursor 根据它来优化 UI。
优秀设计分享
为什么很多 vibecoding 的产品，
功能已跑通，但一看 UI 就不成熟？
事实上很多项目都是功能先行，
当想认真打磨时， UI 往往成了最大短板。
今天分享一套方法，不用写代码，也不用画图。
只需要 Cursor ，2 分钟就能复刻生成完整的设计规范，立马能用。
先前往 Dribbble 或 站酷 浏览现成的产品设计案。注意：图片应当是正面视角，不要倾斜或有透视角度；保证元素清晰可见，不要太模糊。
打开 Cursor ，新建一个项目命名 demo 。拖拽图片到 Cursor 聊天框， Agent 选择 GPT 5.2 （它视觉识别比较好）。发送第一段提示词：
“以产品设计总监视角，深入分析所附的 UI 截图，并在本项目中生成一个 design.json 文件。该文件需高层次、明确地定义整个设计系统的视觉规则，包括：结构层级、间距、字体字号、颜色、整体设计风格与设计原则。design.json 将作为本项目唯一的设计规范来源。后续所有 UI 都严格遵循该文件，不得自行发挥或引入新的设计风格。”
执行完获得了 design.json 文件。把 Agent 切换到 Opus 4.6 ，它编程能力更强。输入第二段提示词：
“严格按照 中定义的设计风格，创建一个模拟仪表盘页面，用于展示设计规范中所有可能出现的 UI 组件。使用 React + Vite 构建，并将所有样式转换为 Tailwind CSS v3 实现，不得引入其他样式体系或自行设计。完成后在本地运行该项目以验证效果。”
打开页面查看，可用 Cursor 的指针选择页面元素发送到 Agent 来局部优化。
确认没问后，我们基于它来创建一个设计规范模板，发送第三段提示词：
“在本项目中创建一个名为 design 的文件夹，并在其中生成一个 design-system.json 文件。
该文件需明确、完整地定义本应用中所有组件与样式的具体设计规则，并补充必要的高层设计原则。
design-system.json 将作为 AI 在本项目中开发新功能时必须遵循的完整设计指南，后续所有 UI 实现均需以此文件为唯一依据，不得偏离。”
后续可基于这个规范让 Cursor 来输出新的页面，或者放到已有项目中让 Cursor 根据它来优化 UI。
优秀设计分享