Univ Design — 为 Web 管理后台而生

消除代码的 AI味 定义你的界面

17种大厂设计系统的视觉宪法——不只是变量清单,更是设计哲学。让AI理解每种选择背后的「为什么」

向下滚动
AI写的代码,
一眼就能看出来
千篇一律的圆角、模板化的配色、毫无个性的间距——AI生成的管理后台有一种统一的"AI味"。问题不在AI,在于你只给了它hex值,没有给它哲学。
🎨

配色像复制粘贴

每次都是紫色渐变+白色背景。没有角色,没有理由,没有温度。设计系统告诉你"为什么用暖灰而非纯黑"。

📐

圆角永远8px

Carbon要0px尖锐、Material 3要20dp药丸——圆角不是审美偏好,是设计态度。每个系统有自己的立场。

🌑

深色模式就是反转色

Arco Design用10步算法色阶,Carbon有三种深色强度,Naive UI的暗色薄荷是身份标识——深色模式是平行世界,不是invert()。

选一种风格,
让AI理解你的审美
每个设计系统不是变量清单,而是设计师对开发者的口述——每种颜色有角色,每条规则有理由。
三步消除AI味
把设计系统视觉宪法交给AI Agent,它就知道的不只是"长什么样",而是"为什么"。
1

选择你的风格宪法

浏览17种设计系统,找到与你管理后台调性匹配的风格。下载对应的 .md 文件,放入你的项目目录。

// 选择示例: // 做企业后台 → ant-design.md // 做Vue后台 → element-plus.md // 做开发者工具后台 → naive-ui.md // 做跨平台管理后台 → tdesign.md
2

放入项目并告诉代理读取

把下载的 .md 文件放进你的项目目录,然后告诉你的编码代理读取此文件,根据其中的设计规范构建匹配的Web管理后台界面。

请读取项目中的 ant-design.md,然后根据其中的设计规范构建匹配的Web管理后台界面
3

代理输出有灵魂的代码

代理读取设计系统文档后,会理解哲学、颜色角色、组件解剖和布局规则——不只是hex值。它会知道为什么后台按钮是6px圆角而非4px,为什么管理系统的阴影使用暖灰而非纯黑。

// 代理读取 ant-design.md 后: 按钮圆角 = 6px // 笃定从容——8px网格的确定性 主色 = #1677FF // 企业蓝——确定性的颜色 阴影 = 暖灰rgba // 不是纯黑,是有温度的深度 深色模式 = 精心调校 // 不是反转色,是平行世界
带走17份视觉宪法

前往 GitHub 下载完整的设计系统文档包,离线使用、团队共享、随心定制。

⬉ 前往 GitHub 下载