最近很多人问我，为啥我用 Claude 写的应用就没那么漂亮？

所以教大家一些非常简单的技巧，用上了以后你也能搞定这么漂亮的界面

👇下面是具体的技巧和完整提示词

完整内容这里：https://mp.weixin.qq.com/s/tUOAfd4OI56QxD94-0PPKw

1️⃣第一个技巧：

不用非得用语言来描述你想要的界面样式，可以去一些设计平台找一些你喜欢的设计稿将图片上传到图片让模型参考。

如果你不知道去哪找的话，国内推荐站酷、海外的话推荐 Dribbble 和 Layers。

在跟 Claude 说的时候就可以忽略那些不好描述的地方，重点描述静态图片无法表现的部分，比如下面的这个卡片组件。

我就让 Claude 注意交互的动画和输入框聚焦之后的渐变动画上，界面内容和风格就让他按图片生成。

2️⃣第二个技巧：

在让 Claude 生成界面的时候，你会发现 Claude 生成的页面没有图片，本来应该是图片的部分经常是空白的，这个就很影响结果的视觉表现。

其实我们可以要求他引用一些在线的图片来填充到页面需要图片的部分。

这里首先推荐 unsplash，他是一个开源图片网站，里面有世界各地的设计大神上传的图片，而且可以直接引用。

可以看下面加上图片之后的卡片是不是就好看很多了。

3️⃣第三个技巧：

另外 claude 在生成页面的时候本来应该是图标的地方，他喜欢用 emoji 来代替，emoji 也很好，但是在一些严肃的页面上就会显得格格不入。

这里可以要求 Claude 在生成页面的时候引用在线的图标库，比如Font Awesome或Material Icons，这些开源图标库可以通过 CDN 直接引用，而且不需要部署。

可以看到引用了 Font Awesome 图标库的图标之后我们的界面变得更加简洁和整齐。

4️⃣第四个技巧：

我们常用的前端样式代码是用 CSS 写的，但是 CSS 本身的一些样式其实没有太考虑美观度的要求。

这就导致你让 Claude 写样式的时候他就会过渡自己发挥，美观度也就没办法得到保障，而且你对样式要求多之后他要从头写的 CSS 也就越多浪费很多 Token。