（已解决）零审美后端佬，求问现在如何用 AI 搞定 UI 交互和视觉？
- 内容介绍
- 文章标签
- 相关推荐
我之前是从事后端的工作。完全没有做过 UI/UX 相关的工作，原生审美基本停留在“有个白框加个按钮能点就行”的阶段。想请教几个问题：
- 你们现在的 AI + UI 工作流是怎样的？
- 目前主流且好用的工具有哪些？
我知道有figma，ui-ux-pro-max。但是还没实际的使用过，不知道咋样？
--【壹】--：
是的,逻辑问题还好一点,主要是做出来的前端产物太奇怪了
--【贰】--：
得有参照物，不然纯skill也不太行，有参照物后就截图使用谷歌的ai studio快速做静态demo进行固化样式和效果，再用claude和codex扩展和调试
--【叁】--：
通过cc-switch快速给多个code装skills，个人推荐以下这些，感觉是提升挺大的
image1855×508 68.8 KB
当然gemini是前端最严厉的父亲了 审美一直挺在线的我觉得，加skills更强
--【肆】--：
新人第一帖，有啥不对地方，请指正
--【伍】--：
之前用过loveable，图片还原度还挺高的
--【陆】--：
感谢分享，我学习下，测试下回来回复
--【柒】--： 最近想弄博客了，可以看看大家的前端设计吗，我的美术细胞几乎为零
这是我压箱底的几个网站
ai prompt:
Browse 120+ UI Design Styles & AI Prompts | StyleKit https://www.designprompts.dev/
审美参考：
https://godly.website/ https://dribbble.com/ https://www.landingfolio.com/
代码参考：
https://v0.app/
图标：
https://lucide.dev/
看过来～
--【捌】--：
蹲一下
--【玖】--：
1.首先安装find-skill，让AI自己去找和UI/UX交互以及前端审美有关的skill，譬如uiuxpromax frontend skill playwright skill等。
find-skills by vercel-labs/skills
Discover and install skills for AI agents.
2.在以下资源站中找一个你喜爱的模板或者组件，部分站点是自带提示词的可直接复制或者修改，如果没有可以考虑把link直接贴给AI让他自己读
Design Prompts - AI-Powered Design Style Explorer
Explore 31+ stunning design styles rendered from the same data. Get AI-ready prompts to recreate any aesthetic in your own projects.
UI Style Prompt - AI UI 设计风格提示词库
探索 70+ 种现代 UI 设计风格，获取专业 AI 生成提示词。
React Bits
An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
Variant – Endless designs for your ideas, just scroll
Enter an idea for an app or site and see endless design options just by scrolling.
json-render | The Generative UI Framework
The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.
3.到这一步AI就基本上有了硬编码数据+提示词约束，可以大概了解你的需求并且产出一个质量相对较高的前端了。后续返工微调如果你是做web系列可以考虑用playwright，或者dev chorme还是什么，忘记了貌似是个浏览器测试mcp，这一步是为了让AI能用无头/有头浏览器去看看他写的大粪有哪里需要调整。
基本我的个人思路就是这些了，有Gemini的情况下最好还是利用上把，codex哪怕用我这套工作流也会写神人前端，特别是喜欢把面向开发的输出丢到页面当中。
对了 提示词尽量不要过于抽象化，可以在开始做前端设计之前先让AI对照着你的产品方向去参考类似的市场竞品，然后把他们的设计风格提炼出来，譬如IOS的液态玻璃这种。如果用自然语言只会让codex写出一堆大粪，这还是太考验模型本身能力了
--【拾】--：
蹲着看大佬们的经验
--【拾壹】--：
我试下。谢谢佬
--【拾贰】--：
我也是后端，也缺前端美的交互，我觉得是需要的，而且得好好学学
--【拾叁】--：
重点还是ui这一块,就算只能设计出来图片,其实问题也解决了
--【拾肆】--：
同! 在springboot狂用中间件的时候没想到有一天要审视自己的审美了
我现在要么给截图要么给HTML, 要么让它生成几套模板, 我再提示
--【拾伍】--：
用某个库，模仿某个网站
--【拾陆】--：
我就是在用的这个skills
主要还是需要有一个方向感～ 给 ai 一个参照物，才能达到你想要的效果
--【拾柒】--：
主要是没有参考物，没有交互和视觉，感觉只用ai做出来的经常有问题
--【拾捌】--：
可以试试 pencli
--【拾玖】--：
我测试下，学习下
我之前是从事后端的工作。完全没有做过 UI/UX 相关的工作，原生审美基本停留在“有个白框加个按钮能点就行”的阶段。想请教几个问题：
- 你们现在的 AI + UI 工作流是怎样的？
- 目前主流且好用的工具有哪些？
我知道有figma，ui-ux-pro-max。但是还没实际的使用过，不知道咋样？
--【壹】--：
是的,逻辑问题还好一点,主要是做出来的前端产物太奇怪了
--【贰】--：
得有参照物，不然纯skill也不太行，有参照物后就截图使用谷歌的ai studio快速做静态demo进行固化样式和效果，再用claude和codex扩展和调试
--【叁】--：
通过cc-switch快速给多个code装skills，个人推荐以下这些，感觉是提升挺大的
image1855×508 68.8 KB
当然gemini是前端最严厉的父亲了 审美一直挺在线的我觉得，加skills更强
--【肆】--：
新人第一帖，有啥不对地方，请指正
--【伍】--：
之前用过loveable，图片还原度还挺高的
--【陆】--：
感谢分享，我学习下，测试下回来回复
--【柒】--： 最近想弄博客了，可以看看大家的前端设计吗，我的美术细胞几乎为零
这是我压箱底的几个网站
ai prompt:
Browse 120+ UI Design Styles & AI Prompts | StyleKit https://www.designprompts.dev/
审美参考：
https://godly.website/ https://dribbble.com/ https://www.landingfolio.com/
代码参考：
https://v0.app/
图标：
https://lucide.dev/
看过来～
--【捌】--：
蹲一下
--【玖】--：
1.首先安装find-skill，让AI自己去找和UI/UX交互以及前端审美有关的skill，譬如uiuxpromax frontend skill playwright skill等。
find-skills by vercel-labs/skills
Discover and install skills for AI agents.
2.在以下资源站中找一个你喜爱的模板或者组件，部分站点是自带提示词的可直接复制或者修改，如果没有可以考虑把link直接贴给AI让他自己读
Design Prompts - AI-Powered Design Style Explorer
Explore 31+ stunning design styles rendered from the same data. Get AI-ready prompts to recreate any aesthetic in your own projects.
UI Style Prompt - AI UI 设计风格提示词库
探索 70+ 种现代 UI 设计风格，获取专业 AI 生成提示词。
React Bits
An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
Variant – Endless designs for your ideas, just scroll
Enter an idea for an app or site and see endless design options just by scrolling.
json-render | The Generative UI Framework
The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.
3.到这一步AI就基本上有了硬编码数据+提示词约束，可以大概了解你的需求并且产出一个质量相对较高的前端了。后续返工微调如果你是做web系列可以考虑用playwright，或者dev chorme还是什么，忘记了貌似是个浏览器测试mcp，这一步是为了让AI能用无头/有头浏览器去看看他写的大粪有哪里需要调整。
基本我的个人思路就是这些了，有Gemini的情况下最好还是利用上把，codex哪怕用我这套工作流也会写神人前端，特别是喜欢把面向开发的输出丢到页面当中。
对了 提示词尽量不要过于抽象化，可以在开始做前端设计之前先让AI对照着你的产品方向去参考类似的市场竞品，然后把他们的设计风格提炼出来，譬如IOS的液态玻璃这种。如果用自然语言只会让codex写出一堆大粪，这还是太考验模型本身能力了
--【拾】--：
蹲着看大佬们的经验
--【拾壹】--：
我试下。谢谢佬
--【拾贰】--：
我也是后端，也缺前端美的交互，我觉得是需要的，而且得好好学学
--【拾叁】--：
重点还是ui这一块,就算只能设计出来图片,其实问题也解决了
--【拾肆】--：
同! 在springboot狂用中间件的时候没想到有一天要审视自己的审美了
我现在要么给截图要么给HTML, 要么让它生成几套模板, 我再提示
--【拾伍】--：
用某个库，模仿某个网站
--【拾陆】--：
我就是在用的这个skills
主要还是需要有一个方向感～ 给 ai 一个参照物，才能达到你想要的效果
--【拾柒】--：
主要是没有参考物，没有交互和视觉，感觉只用ai做出来的经常有问题
--【拾捌】--：
可以试试 pencli
--【拾玖】--：
我测试下，学习下