CoCopilot

HD-1897219906229383456.mp4

第一个技巧:让模型参考设计稿

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

如果你不知道去哪找的话,国内推荐站酷、海外的话推荐 DribbbleLayers

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

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

image.png

第二个技巧:填充在线图片

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

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

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

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

image.png

第三个技巧:图标库替代Emoji

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

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

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

image.png

第四个技巧:TailwindCSS