“AI生成的界面太丑了，一眼就能看出来是AI做的。” 最近常听到这句话。
打开AI生成的网页，满眼渐变色、千篇一律的圆角卡片、烂大街的design system。就像同一个模板复制粘贴出来的。
不是AI不行，是用错了工具。
AI同质化的困境
用AI写前端代码，最容易踩的坑：AI味太重。
- 必须渐变色，还是高饱和度的
- 卡片必须圆角，半径还统一
- 配色永远是蓝紫色系
- 动画永远是淡入淡出
设计没问题。问题在于：太容易识别了。 用户一打开就知道：“哦，这是AI生成的。” 就像前几年的梗：“这是AI写的”——不是说质量差，是没有灵魂。
第一个：frontend-design
用下来最惊艳。
核心逻辑：极简主义 + 细节控。
生成提醒浇花的APP，不是堆渐变和动画，而是：
- 留白恰到好处
- 字体选择克制
- 配色干净，主次分明
- HTML/CSS/JS写得规范，React用得恰到好处
关键点：不用“烂大街”的设计。 那种第一眼说不出哪里不对，但就是舒服的设计。
下载： mcpservers.org/claude-skil…
第二个：UI-UX-PRO-MAX
前者是“细节控”，这个是**“审美控”**。 识别项目整体风格，给出符合审美的设计方案，不套模板。
注意： 用完可能把项目语言改成英语。 不是bug。可能需要手动调整中文。
第三个：interaction-design
解决另一个问题：网页太干巴巴。
设计再好看，交互生硬也是白搭。 interaction-design不讲理论，直接动手优化：
- 加载时：生成骨架屏，别留白
- 点击时：按钮加上微反馈动画（缩放、波纹），表单提交要有明确的加载和成功/失败状态
- 滚动时：长列表或卡片进入视口时，有平滑的淡入上浮效果（Scroll Reveal）
- 切换时：页面或Tab切换加上淡入淡出过渡
使用方式：
下载放在skills 目录，然后对AI说：
“帮我的首页优化交互体验。加载时生成骨架屏，点击按钮加上微反馈，滚动时卡片淡入上浮，页面切换用淡入淡出。”
然后等收代码。
工具不是终点
回到最初的问题：AI编程的界面不好看？
不是AI不行，是用错了工具。
就像做菜。
- 不锈钢锅能炒菜，但炒出来就是不如铁锅
- 电饭煲能煮饭，但煮出来就是不如砂锅慢炖
工具的差异，最终会体现在结果上。
这三个 skills，帮你从**“能用”升级到“好用”**。
- Frontend-design → 审美和细节
- UI-UX-PRO-MAX → 风格和质感
- Interaction-design → 交互
三个组合，AI生成的页面就不再是“一眼AI”。
说句实话。
AI编程不是终点，只是更高效的起点。 真正决定页面好不好看的，还是你用什么工具，以及你的审美理解。
这三个 skills，帮你在AI编程的路上，少走弯路，多走正路。
毕竟，用户不会关心你是AI写的还是人写的。 他们只关心：好不好用，好不好看。
我组建了一个vibecoding交流群，关注我，免费拉你进群~ v: zjzw2026
我是直觉造物 | SoloShip
一个拒绝内卷的10年架构师，
现在我只教普通人用AI做产品。
关注我，不写一行代码，
带你上线人生第一个的小工具。
