ARTICLE · 1110841
AI 写的页面丑得不敢给客户看,别急,一个skills让你的页面变得非常美观
SKILL · 前端美化
前端美化 Skills 使用说明
用 skill 让 Vue3 前端变得漂亮炫酷：自定义一个，开源三个。
说明如何用 skill 让 Vue3 前端变得漂亮炫酷。
来源分两类：本项目自定义 + 开源社区。
01 / SOURCES
两个来源
02 / BUILT-IN
自定义 vue3-ui-beautify 怎么用
已内置在项目 .codebuddy/skills/，CodeBuddy 打开项目自动加载，无需安装。
自然语言触发 无需记命令
DIALOGUE · 你这样说我这样做
你：帮我把这个 Vue3 后台登录页做得炫酷一点
Agent：→ 自动调用 vue3-ui-beautify
你：用 Glassmorphism 风格美化这个 Dashboard，适配移动端
你：这个 Element Plus 表格太丑了，帮我统一主题色和圆角
它会输出
设计基调 + Vue 组件代码 + 主题变量覆盖 + 检查清单。
内置能力
5 种炫酷风格（毛玻璃/便当盒/暗色霓虹/极简/Soft UI）、Element Plus 主题定制、shadcn-vue + Tailwind 方案、响应式与动效规范。
03 / OPEN SOURCE
开源 UI UX Pro Max 怎么装（更强，可选）
它是 promt.txt 里提到的“UI UX Pro Max”，MIT 开源，125k stars，内置 79 种 UI 风格 / 192 套配色 / 74 组字体，原生支持 CodeBuddy 和 Vue。
bash · 三种安装方式
# 方式 1：npx 免安装
npx ui-ux-pro-max-cli init --ai codebuddy
# 方式 2：全局 CLI
npm install -g ui-ux-pro-max-cli
cd 你的项目
uipro init --ai codebuddy
# 方式 3：手动复制
# 把仓库 ui-ux-pro-max/ 文件夹复制到 .codebuddy/skills/
💡 TIP 前置与触发
前置：需要 Python 3.x（搜索脚本用，纯标准库）。
装完直接说“给我做一个漂亮的 Vue3 landing page”即可触发。
04 / CHOICE
选型建议
两者可共存：vue3-ui-beautify 管日常后台美化，UI UX Pro Max 管对外炫酷页面。
∞ / SUMMARY
一句话总结
SUMMARY 一句话总结
让前端漂亮炫酷的开源 skill 很多（UI UX Pro Max 最强），本项目也内置了轻量的 vue3-ui-beautify，在 CodeBuddy 里直接说需求即可触发。
· · ·
如果你觉得今天这篇有收获，欢迎关注，点赞、在看、转发三连，我们下篇见
DOWNLOAD 资源领取
后台回复【工具】→ 30 个 AI 工具总清单（持续更新）
关注我，用 AI 干得更快，靠本事卖得更贵。