告别手动创建设计系统，利用Cursor高效开发风格统一的高品质UI | 源码已开源
输入“/”快速插入内容
告别手动创建设计系统，利用Cursor高效开发风格统一的高品质UI | 源码已开源
告别手动创建设计系统，利用Cursor高效开发风格统一的高品质UI | 源码已开源
用户4242用户4242
用户3613用户36132025年8月19日修改
🔗
AI生成UI太粗糙？代码化设计系统提升人机协同美学
开篇
AI 生成页面能力乏善可陈
AI编程工具（如 cursor）直接生成页面能力很强，即便要求 AI 生成页面要美观，但也只是勉强可用级别（60 分水平），但不够精致。
因为现在的 AI 理解 UI 是类比式的，比较“守旧”，它见过很多例子，会模仿、套模板，比如：“大多数登录页是蓝色的+按钮在右边，那我也这么做。”但它并不真的懂「视觉均衡」「信息层级」「配色和谐」。
但是我们知道，好看的皮囊能创造溢价，为产品带来品质感和信任感。如果 AI 直出不能行，那难道非得让设计师来画图吗？你或许尝试过：
•
要求 cursor 模仿某个成熟产品的风格（如 Airbnb）开发？容易出现风格跑偏的情况，虽然乍一看好像都是统一的，但细看可能相同的元素，一会儿圆角是4，一会儿圆角是6。
•
截图（或 抓取现成的前端样式代码）让 cursor 抄作业？容易出现“想抄没得抄”的尴尬情况，要自己扩展就比较吃力了。
虽然两种方法效果都比起之前有所提升，但随着产品复杂度的提高，页面越来越多， 就会不够用了。
还有什么办法？可以让AI做出既漂亮、又风格统一的 UI 呢？
引入设计系统。设计系统就是一系列视觉变量，包含颜色、间距、圆角、阴影、文字、边框等等，若页面上所有的元素都是套用同一套漂亮的视觉变量衍生出来的，那自然效果不会差。
作者在不使用任何专业设计工具的前提下，只用传统模式10%不到的投入，定义了一套50+组件的web端的设计系统，特点：
•
完全代码化的，AI 可读的
•
样式属性、组件可在线预览
•
主题还可灵活修改
同时，这并不是玩具，作者用它编排了一个人机协同的 UI 构建流程，能够让 cursor 基于草图生成符合规范的可运行的 React 页面，实测效果稳定，且已在真实项目中投入使用。