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