Agent
我没有UI设计师,或者想为UI设计师提高效率怎么办?别急!!!!
设计基础前置条件
你可以使用在线或者离线docker部署设计网站。 在线设计站Penpot:打开 进入后,点左下角,帐号名称,点开,进入仪表板,接着最菜单最后一项:集成。
MCP服务器启用。打开switch开关,启用后下面有的一个链接:
https://design.penpot.app/mcp/stream?userToken=.....
这个连接复制出来,在你的IDE/agent里面配置MCP服务器如下:
其中的remix-icon服务是用来在设计中使用的图片,而不是用AI中常用 的Emoji表情及符号。
{
"mcpServers": {
"Penpot": {
"type": "https",
"url": "https://design.penpot.app/mcp/stream?userToken=....."
},
"remix-icon": {
"command": "npx",
"args": ["-y", "remixicon-mcp"]
}
}
}详细的官方教程见:配置MCP
设计UI
AI:Grok4.6 ,Claude4.8/5/fable 这些模型出来的设计比较不错。配置我的技能文档整体比较专业,没有AI味。出来后可以自行修改或者让AI再检查修改下,就可以进行交付了设计稿了。
配置好后:请在文档仓库下载:mobile-design-system 技能设计系统,可以让AI使用并设计出设计稿。
并且要打开pnepot网站,并创建好项目,打开一个项目后,顶部工具条会出现MCP连接状态
mcp连接成功后,就可以指挥AI设计了,如果局部设计,可以鼠标在设计稿中选项区域,再回到AI说我要修改我选中的区域。
如果要重新设计某一页面:
可以在设计网站 那边 选中一个画板让AI修改你选中的画板
也可以不选中告诉AI修改哪个标题的页面画板,AI会自行查询并重新设计
设计稿转UNIAPP/UNIAPP-x
有了设计稿肯定还要写布局,可以下载我的 penpot-to-uniapp 技能 ,实现转换为uniapp项目。
如果要转换为uniappx布局大同小意稍微改改就可以了。
