文章摘要
AI摘要生成

前言

使用cursor写前端的时候,抽风的紫渐变色简直是所有模型的通病,界面UI千篇一律,尝试使用ui-ux-pro-max-skill插件辅助提升cursor编程的UI设计

skill概念

unnamed

下载ui-ux-pro-max-skill

官方项目地址:https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

安装使用npm全局安装npm install -g uipro-cli

新建项目plantUML-web文件夹 使用命令uipro init --ai cursor 初始化插件

image-20260116104738338

同时需要预装python3.x系列环境,ui-ux-pro-max-skill的查询资料需要让cursor使用python去查询关联

plantUML的后端服务可以参考这篇文章

https://blog.aiheadn.cn/archives/c26af6c.html

编码

编程过程中发现cursor没有自动扫描到ui-ux-pro-max-skill,然后又生成了抽风紫色页面

可以在提示词后面增加一句

参考ui-ux-pro-max渲染 使用简约的蓝白配色 属于开发者工具风格

image-20260116111742485

从智能体的Explored来看,已经引用了ui-ux-pro-max.md说明文件,然后查询prompts.vsv

生成效果为简约风格,UI简单清爽

image-20260116112045840

我们可以再增加提示词让他更美化一些,先去官方的样例库查询对应的风格,挑选一个比较好看的界面

https://ui-ux-pro-max-skill.nextlevelbuilder.io/

image-20260116112414821

例如AI Chatbot Platform,那么继续让cursor对项目UI进一步优化

image-20260116112916029

这里使用python去搜索对应资料信息

image-20260116113609437

整体上非常清爽的界面。

成品

预览地址:http://web.aiheadn.cn/plantuml/

gitee: https://gitee.com/tian3615/plantuml-web

github: https://github.com/2585570153/plantuml-web