AI做前端总生成丑丑的蓝紫色?试试这些方法
作者：微信文章如果你什么参考都不给AI的话，让它直接生成前端页面，多半是惨不忍睹，让人觉得“一眼AI”的。所以，不要让它凭空生成设计，而是要给它好的参考。
在模型的选型上，最好选用Claude做前端设计。GPT也好Grok也罢，GLM和Qwen试过也不太行，审美都不如Claude。但倘若你用不了Claude，这里有一些方法可以拯救前端设计。
一、Nano-banana生成概念图
就是谷歌之前爆火的那个生图模型，在AI Studio里面可以免费用，比如我让它生成移动端单词卡的首页和登录页面，它生成了如下的效果。
请注意，它们都只是纯图片，PNG格式，不能直接复制代码使用。但是你可以把图片发送给AI编程助手，让它们直接参考图片的设计来设计你的产品原型。
如果你对它生成的效果不满意，你大可以多试试不同的提示词和风格。
二、stich做设计原型
谷歌的另一款产品stich，它可以根据自然语言描述或上传的图像 / 草图 / 线框图，快速生成用户界面（UI）设计 + 对应的前端代码（HTML / CSS）。
它还支持将生成的设计导出到 Figma 以便进一步编辑和协作。Stitch 使用 Google 自己的模型（如 Gemini 2.5 Pro）作为其多模态、生成能力的底层引擎 。
它生成的页面完成度相当之高，几乎是拿来就可以用的程度，以下是我随便对话几轮的落地页面，有浅色模式、深色模式，和notion风格仿照，最终我是用了notion风格。对同一个 prompt 或界面设计，可以生成多个变体，方便选择或进一步细化。
Stitch 主要生成静态界面和样式，不支持复杂的交互、状态管理或与后端逻辑的深度集成。生成的界面文本也默认多为英文。
三、配色集定画面基调
很多人用AI编程生成都是蓝紫蓝紫的界面，一点都不调。其实让界面颜色好看很简单，互联网上非常多配色集，色号都标注出来了，挑喜欢的颜色搭配，然后把RGB对应的代号（例如#CBDE5）给到AI编程助手实现即可。图片来自小红书博主【矿石色谱研究所】。
你也可以随手一搜很多设计网站，都会有颜色搭配的方案。这是我挑选一种棕色色号，作为网站主基调的效果。我喜欢白棕色的搭配。
四、开源项目找组件
有时画面的小细节，比如表单啦、弹窗啦、按钮啦，想改得独特些，这时候可以去找开源项目的网站，里面已经有很多组件的设计了，在遵守开源许可证的前提下，就可以用别人的设计了。
https://www.flowbase.co/
https://www.untitledui.com/react?ref=producthunt
https://daisyui.com/
不过UIUX设计的第一层逻辑是照顾用户体验，第二层才是好看。要避免为了花里胡哨的效果，牺牲功能，或者为了使用TailwindCSS而产生各种报错和兼容性问题，或者导致加载慢的性能问题。
更多产品和创业思考：
尽早建立评估体系，别让产品迭代变成抽盲盒
初创公司的增长之道：如何让AI主动推荐你的产品？（下）
为什么【碗】，不会被骂作是【陶瓷】的套壳产品？
AI产品是基于成本+预期利润率定价，还是价值定价？
XML、YAML还是Markdown？提示词结构的效用之分
开发Agent，有哪些值得做的脏活累活？
传统产品未经思考接入AI，好比给马车装上火箭推进器
我教60岁阿姨学AI，产品只能Chat是很蠢的交互设计
五位数的Agent开发商单，我的商业化思考
Token越耗越多，AI产品还能用免费策略推广么
长尾掘金：互联网如何让小众商品找到它的受众？
像烧烤摆摊一样AI创业
读《小米创业思考》，聊痛苦的意义和命运的馈赠
Claude首席产品官的启发：产品化、模型迭代、人机协作的未来
AI产品创业如何避免伪需求？我思忖了两个判断标准
AI应用出海创业中
页:
[1]