如何使用AI创作APP

不用非得用语言来描述你想要的界面样式，可以去一些设计平台找一些你喜欢的设计稿将图片上传到图片让模型参考。如果你不知道去哪找的话，国内推荐站酷、海外的话推荐Dribbble和Layers。在跟Claude说的时候就可以忽略那些不好描述的地方，重点描述静态图片无法表现的部分，比如下面的这个卡片组件。我就让Claude注意交互的动画和输入框聚焦之后的渐变动画上，界面内容和风格就让他按图片生成。第二个技巧：在让Claude生成界面的时候，你会发现Claude生成的页面没有图片，本来应该是图片的部分经常是空白的，这个就很影响结果的视觉表现。其实我们可以要求他引用一些在线的图片来填充到页面需要图片的部分。这里首先推荐unsplash，他是一个开源图片网站，里面有世界各地的设计大神上传的图片，而且可以直接引用。可以看下面加上图片之后的卡片是不是就好看很多了。第三个技巧：另外claude在生成页面的时候本来应该是图标的地方，他喜欢用emoji来代替，emoji也很好，但是在一些严肃的页面上就会显得格格不入。这里可以要求Claude在生成页面的时候引用在线的图标库，比如Font Awesome或Material Icons，这些开源图标库可以通过CDN直接引用，而且不需要部署。可以看到引用了Font Awesome图标库的图标之后我们的界面变得更加简洁和整齐。第四个技巧：我们常用的前端样式代码是用CSS写的，但是CSS本身的一些样式其实没有太考虑美观度的要求。

?太长不看揭秘如何在20分钟内用AI创建专业级界面，并分享前四大核心技巧，让你的AI生成的应用脱胎换骨。丝滑卡片拖动交互与呼吸效果渐变动画展示带视差效果的交互网页案例分析四个提升AI界面设计质量的关键技巧完整提示词模板与设计稿转换方法最近大家可能都发现了Claude 3.7写出的网页或者应用界面在美观度上有了非常大的提升。可以写出非常复杂的交互动画和软件逻辑。接下来给大家展示一下Claude 3.7在这方面的实力。首先是我写的一个卡片拖动的交互，整个过程的过渡非常丝滑，后面的卡片会自己出现。然后是一个样式比较复杂的搜索卡片，亮点是输入框聚焦的时候会有非常漂亮的渐变色动画，类似呼吸的效果。最后是padphone老师做的带视差效果的网页，鼠标划过的时候会有变形，而且整体的投影会变化，每个组件也有单独的视差效果，还是可以交互的。这些以前设计师都得用AE或者其他动效工具做好久，要是写成代码的难度就更别说了。但现在上面这些案例每一个花费的时间都不会超过20分钟。话又说回来了，最近我发了案例和提示词之后，也有很多朋友说为啥我让Claude 3.7写出来的东西就丑的很。可能很多朋友不知道我在做AI之前的本职工作是大厂产品设计师。这篇内容里我会教大家一些非常简单的技巧，用上了以后你也能搞定这么漂亮的界面，而且我还会教你如何把这些网页变成设计稿方便后续的更新和迭代。第一个技巧：

Cursor Rules简单来说就是为你的Cursor做一个角色定位，让它以一个更加专业的角色为你服务。它允许开发者为AI助手设置特定的指导原则和行为模式，使AI在生成代码、提供建议和响应查询时，能够更好地适应开发者的编码风格和项目需求。我们首先设置一个通用规则。第一步，点击界面右上角的小齿轮图标在cursor settings中找到Rules将以下文本拷贝到User Rules后，关掉页面就可以了当你从新手村毕业，希望涉及更加专业的APP开发、前后端项目时，可以在下方github项目中寻找更加专业的Cursor Rules。https://github.com/PatrickJS/awesome-cursorrules或者使用https://cursor.directory/generate直接根据你的项目重点进行生成[heading2]如何使用Cursor制作第一个小作品[content]设置好Cursor Rules之后，我们便可以开始第一个小作品的创作了，我在这里演示的是一个打砖块的小游戏首先，在右侧对话框中输入本次项目的（可以非常口语化）我使用的是claude-3.7模型，静静等待代码生成完毕可以看到，左侧文件夹中已经生成了好几个文件，中间已经显示AI为你生成了不少代码，右边则是AI告诉你这次互动生成的具体内容。我们点击右下方的Accept all后，这些代码便生效了那么，我们怎么看到这个项目是什么样子的呢？第二步：直接跟AI说，运行项目点击AI提示的Run command，你就会跳转到一个预览页面页面内容我们希望生成的打砖块小游戏了，如果你玩起来有问题（比如操控感不好，不美观），可以让AI进一步帮助你美化。