四大技巧帮你用 Claude 生成专业设计

最近，Claude 3.7在网页和应用界面设计上的表现十分亮眼，能做出复杂交互动画和软件逻辑，像丝滑卡片拖动、呼吸效果渐变动画、带视差效果的交互网页等，关键是每个案例制作时间都不超20分钟。今天就分享4个提升AI界面设计质量的关键技巧，让你的作品也能颜值飙升！

巧用参考图片

描述界面样式别只用文字，去设计平台找心仪设计稿上传给模型参考。国内推荐站酷，海外可选Dribbble和Layers。跟Claude沟通时，着重描述静态图片无法展现的部分，比如动画效果，界面内容和风格就让它按图生成。

填充在线图片

Claude生成的页面常出现图片空白的情况，影响视觉效果。我们可以让它引用在线图片，unsplash这个开源图片网站就很不错，里面有海量优质图片，还能直接引用，给页面加上图片后，效果立竿见影。

引用专业图标库

Claude爱用emoji代替图标，在严肃页面很违和。我们可以要求它引用如Font Awesome或Material Icons这类在线图标库，通过CDN直接引用，方便快捷，还能让界面更简洁整齐。

使用TailwindCSS

常用的CSS样式在美观度上有欠缺，Claude写样式时容易“放飞自我”，美观难以保证，还浪费Token。让Claude用CDN引用TailwindCSS写组件样式就好多了，它封装的样式美观简洁，能确保色彩、响应式和基础组件的美观度。

按照这四个技巧，再配合这个提示词模板，就能让Claude设计出美观的界面或组件。

我需要创建一个[具体描述你的页面/组件类型]，请帮我生成美观且响应式的HTML+CSS代码。
## 设计参考

我希望设计风格类似于以下参考：
[上传参考图片或描述设计灵感来源]

## 技术要求
- 请使用HTML, TailwindCSS 和少量必要的 JavaScript
- 引用 Tailwind CSS（v3.0+）通过CDN
- 页面需完全响应式，在移动设备和桌面端都能良好显示

## 图片资源
- 请使用 Unsplash API 提供的图片作为内容图片 (https://source.unsplash.com/...)
- 根据内容主题选择合适的关键词

## 图标要求
- 使用 Font Awesome 或 Material Icons等专业图标库 (通过CDN引用)
- 避免使用emoji作为图标替代品

## 交互细节
[描述任何需要的交互动画或效果，例如：]

- 按钮悬停时有轻微放大效果
- 表单输入框聚焦时显示渐变边框
- 卡片在悬停时有阴影加深效果

## 特别注意
- 确保代码干净且有适当注释
- 提供完整可运行的HTML文件，包含所有必要引用
- 优化视觉层次和间距，确保设计美观专业

整理自 歸藏的 X 文