为什么 AI 写的前端总是'丑哭'？这个插件直接帮你搞定配色和布局

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI实践者。

• • 关注公众号：#沉浸式趣谈，获取最新文章（更多内容只在公众号更新)
• • 个人网站：https://yaolifeng.com 也同步更新。
• • 转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI、出海、个人思考等内容。

如果本文对你有帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

今天分享一个Claude Code的设计插件，叫UI UX Pro Max。

如果你在用AI编程工具写前端代码，经常纠结配色、字体、布局这些设计问题，这个插件能帮上忙。

它就像是一个可搜索的设计知识库，配色方案、字体组合、UI样式、图表类型这些都有。

这个插件是干啥的

UI UX Pro Max说白了就是一个设计智能数据库。

里面收录了57种UI风格、95个配色方案、56组字体搭配、24种图表类型、29种落地页结构，还有各种UX最佳实践。

关键是它能跟AI编程工具直接整合。

你告诉Claude Code要做什么界面，它会自动搜索这个数据库，给你推荐合适的设计方案，然后直接生成代码。

不用再去Pinterest找灵感，不用去Dribbble扒配色，不用纠结用什么字体，都给你准备好了。

几个例子：

它有什么设计资源

UI风格库

Glassmorphism、Neumorphism、极简主义、野兽派、Aurora UI这些，一共50多种风格。

每种风格都包含配色方案、视觉效果、框架兼容性说明。

想要哪种风格，直接搜就行。

配色方案

针对不同产品类型的配色系统。

SaaS产品用什么颜色，电商网站用什么颜色，医疗应用用什么颜色，金融科技用什么颜色，都有专门的方案。

每个方案包含主色、辅色、CTA按钮色、背景色、文字色、边框色。

字体组合

50多组字体搭配，都是Google Fonts里能直接用的。

每组搭配都有Tailwind配置文件，还有适用场景说明。

Space Grotesk配Inter，Playfair配什么，这些经典组合都在里面。

图表类型

数据可视化的各种图表推荐。

折线图、柱状图、饼图、热力图这些，每种图表都有推荐的JS库，Chart.js、Recharts、D3.js该用哪个都写清楚了。

还有无障碍使用的注意事项。

落地页结构

14种转化率优化过的页面结构。

Hero区域配特性介绍、视频优先型布局、定价页结构，每种都有CTA按钮放哪里的建议。

UX指南

动画怎么用、无障碍设计怎么做、z-index怎么管理、加载状态怎么设计，这些最佳实践都有。

还包含反面案例，告诉你什么不该做。

支持哪些技术栈

它针对8个主流技术栈做了适配。

React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind，每个都有专门的最佳实践和代码示例。

比如你用React，它会给你State管理、Hooks用法、性能优化的建议。

你用Next.js，它会给你SSR、路由、API routes的指导。

不是通用的建议，而是针对具体框架的实践经验。

工作流程是怎样的

用起来很简单，就6个步骤。

第一步：你给个提示词，比如"做一个宠物美容服务的落地页，风格要轻松友好，重点是预约按钮"。

第二步：AI分析你的需求，产品类型是宠物服务，风格是轻松友好，页面类型是落地页，CTA是预约。

第三步：搜索设计数据库，找到匹配的产品类型、UI风格、字体搭配、配色方案、落地页结构、UX规则。

第四步：生成代码，直接用搜到的设计方案生成HTML/CSS，配色、字体、布局全都按照推荐的来。

第五步：质量检查，确保用了SVG图标、加了hover反馈、深色模式对比度够、响应式布局没问题。

第六步：输出可用的代码。

整个过程你不用管设计细节，AI会根据数据库里的最佳实践帮你搞定。

有实际案例吗

他们官网有39个网站演示。

涵盖20个不同类目，26个亮色模式，13个暗色模式。

都是用这个插件生成的真实案例，可以直接看效果。

点进去能看到代码实现，也能看到用了哪些设计方案。

开源免费

这个插件是开源的，可以直接用。

兼容Claude Code，集成起来很简单。

生成的代码可以直接用在生产环境，不是那种玩具项目。

如果你经常用AI写前端代码，又不想在设计上花太多时间，可以试试这个插件。

让AI帮你搞定设计决策，你只需要专注在功能实现上。