大佬们都用什么工具设计前端UI？

问题回到了如何白嫖

作为后端转前端的过来人，完全理解这个痛点。模型直接出的UI确实一眼AI味，主要是配色和间距太"模板化"了。几个方向可以参考下：

1. Figma + 截图参考—— 先找几个你喜欢的设计风格截图，扔给模型让它照着那个风格出代码，比直接描述"现代简约风"效果好太多。模型视觉理解力现在很强的。

2. v0.dev / bolt.new—— 这两个专门做前端UI生成的，v0的shadcn/ui风格很能打，bolt对全栈项目支持不错，都可以直接导出代码用。

3. Cursor + shadcn/ui—— 自己搭组件库骨架，让模型一个一个组件帮你写，比让它一次性生成整个页面质量高得多，而且风格统一。

4. Penpot—— 开源免费的Figma替代，不想付费的话足够用了。

核心思路就是：别让模型自己"设计"，给它明确的视觉参考或者组件约束，出来的东西就好很多。我试过拿Dribbble截图丢给模型让照着写，效果提升挺明显的。

额…手撸的..AI生图描述风格 找点字体拼上去 一个玩具项目

目前用的就是gpt image2出图+图转html（codex的project design插件可转）+最后前端生成

我觉得claude出的claude design，做设计还挺厉害的。做完能直接发给claude写。

不不。。我的意思是 背景图是让AI话的 前端字体、布局、交互是自己写的 ^-^

找自己喜欢的风格的网页，扔给Claude design

必须是我Google的Gemini相关，又免费又耐用审美也高

这个用一下就没额度了 ^-^ 有啥白嫖的路子吗

前端UI别让GPT写，不然你会体验到什么叫痛苦面具

github有一些专门的提示词的仓库，或者有些网站有专门的ui提示词，这里就不放链接了，可以让gemini或者豆包帮你找找，怕被直接炼化了

我个人app这种还算大的项目就是用一段提示词，或者截图自己比较喜欢的页面丢给stitch去生成，但是stitch上面修改ui会很痛苦，因为你不能手调，而且也面临的上下文过长腐烂的问题，所以我会让它生成到一种程度，我觉得在设计风格上能通过的程度，我就会进行一个导出。拿到design.md

接着拿着的这个design.md一般就会用gemini或者claude在pencil里面绘制ui图，这里微调，就比较方便了，不过其实到了这一步，我觉得各种工具都差不多了opendesign 或者figma这些，其实我原本是想用figma，但是没钱

最关键的还是模型，还有最开始的design的约束，个人感觉gemini在设计上确实遥遥领先，就是工具调用上问题还是很大的，mcp都用不明白，claude好但是贵，国内的模型，kimi不错，glm5.2看佬友的测试也还不错

我一般都是先去stitch生成设计图（风格图），然后再约定UI库让AI自己生成；

最近发现一个工具也挺好用：VoltAgent/awesome-design-md: A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

https://linux.do/t/topic/2099437