四招让 AI 生成的界面不再"丑陋"

四招让 AI 生成的界面不再"丑陋"

最近在折腾 Claude，发现它在界面设计上确实有了质的飞跃。之前让 AI 写界面，要么是满屏的 emoji 图标，要么是空空如也的图片占位符，总之就是一个字——丑。

但掌握了几个窍门后，我现在 20 分钟就能搞定一个看起来还挺专业的界面。这些技巧说起来简单，但效果立竿见影。

案例展示

先上几个最近做的东西：

• 卡片拖动交互：滑动流畅，后面的卡片会自然浮现
• 搜索框动画：输入时有渐变色呼吸效果
• 视差网页：鼠标悬停会有变形和阴影变化

这些效果放在以前，设计师得在 AE 里倒腾半天，前端写代码更是头疼。现在？每个不到 20 分钟。

为什么你的 AI 生成界面那么丑

很多人问我："为什么我用 Claude 写出来的界面就是不行？"

其实问题不在 AI，在于你怎么"沟通"。我之前是大厂的产品设计师，深知设计这行的门道。今天就分享四个实用技巧，让你的 AI 界面脱胎换骨。

技巧一：别说话，给图

停止用文字描述你的设计想法。

去站酷、Dribbble 或 Layers 找个你喜欢的设计稿，直接扔给 Claude。图片比一千句描述都管用。

重点说清楚静态图片表达不了的东西：

• 动画效果怎么动
• 交互细节怎么响应
• 哪些元素需要特殊处理

界面风格？让 AI 照着图片来就行。

技巧二：别让图片位置空着

Claude 生成的页面经常在该放图片的地方留白，看着就很糙。

解决办法：让它用 Unsplash 的图片。

Unsplash 是个开源图库，直接引用不用下载。加了图片后，整个界面立马就有了质感。

https://source.unsplash.com/800x600/?nature

这种链接就能直接用，还能根据关键词自动匹配图片。

技巧三：图标别用 emoji

Emoji 在轻松场景还行，但正式界面上就太随意了。

改用专业图标库：

• Font Awesome
• Material Icons

这些都有 CDN，直接引用不用安装。图标统一了，界面就精致了。

技巧四：用 TailwindCSS

原生 CSS 写样式太费劲，而且 AI 容易乱发挥。

强制使用 TailwindCSS。

Tailwind 封装了一套成熟的设计系统，色彩、间距、响应式都有最佳实践。让 AI 用 Tailwind 写，就像给它戴上了"审美矫正器"。

通过 CDN 引入：

<script src="https://cdn.tailwindcss.com"></script>

完整提示词模板

把这些技巧整合成一个提示词：

我需要创建一个[你的页面/组件类型]，生成美观的HTML+CSS代码。

## 设计参考
风格参考：[上传图片或描述]

## 技术栈
- HTML + TailwindCSS + JavaScript
- Tailwind 3.0+ (CDN)
- 响应式设计

## 资源要求
- 图片：使用 Unsplash API
- 图标：Font Awesome 或 Material Icons (CDN)
- 禁止使用 emoji 作为图标

## 交互细节
- 按钮悬停：轻微放大
- 输入框聚焦：渐变边框
- 卡片悬停：阴影加深

## 输出要求
- 代码注释清晰
- 完整可运行的 HTML
- 优化视觉层次

进阶：生成 Figma 设计稿

如果你想把 AI 生成的界面转成设计稿：

1. 部署到线上：Claude/POE 自带发布功能，或者用 yourware.so
2. 转换为设计稿：用 Figma 插件 html.to.design

这个插件会自动生成带自动布局的组件，每天有 10 次免费额度。

总结

这四个技巧核心就是：别让 AI 瞎猜你的审美。

• 给图片参考，不要空洞描述
• 用真实图片，不要空白占位
• 用专业图标，不要 emoji 糊弄
• 用设计系统，不要原生 CSS

试试这些方法，你会发现 AI 生成的界面突然就"会做人"了。