如何用AI做一款app

推荐你从一个最最基础的小任务开始让AI先帮你按照best practice写一个say hello的示例程序，并解释每个文件的作用及程序运行的逻辑。这样，你可以通过最基础的绝对不会出错的小任务，来学会必备的调试技能。“我在学习写chrome插件。请选择最适合小白上手的技术栈，按照best practice为我生成一个简单的示范项目，但要包含尽可能全面的典型文件和功能。请为我讲解每个文件的作用和程序运行的逻辑。”此处要求AI按照best practice来写非常重要：文件一开始就有良好的组织，后续功能复杂了才不会乱套。还有一个偷懒小妙招：如果你用的是o1-mini，你可以在prompt最后添加这句：“请生成create.sh脚本，运行脚本就能直接创建插件所需要的所有文件。请教我如何运行脚本。”（如果windows机器则是create.cmd）足够勤勉的的o1-mini会为你生成一段超级长的代码，并给出提示，你只需要复制粘贴并执行，一次性生成十多个目录和文件，超方便。[heading2][heading1]2明确项目需求[content]你可以通过和AI的对话，来逐步明确项目需求。（如果你是训练有素的产品经理，可以忽略这一步）“我想要开发一个XXX。你能否像一个高级别的还懂技术的产品经理指导初级产品经理那样，向我提问，帮我梳理清产品功能，尤其要注意可能会涉及到技术方案选择的关键点。请一问一答，帮我由全局到细节逐步梳理。不要一口气问我太多问题。”来来回回的对话后，你可以让AI帮助你梳理出产品需求文档。这样的文档会包含影响技术方案选择的细节，比直接给AI一段口头的需求描述要准确地多。在后续开发的时候每次新起一个聊天就把文档发给AI并告知你现在在做第几点功能，会非常方便。[heading2]

Eric Quan：贡献度可以说是接近100%了，我们几乎每行代码都靠Trae完成。因为我不是很擅长编程，所以原来代码完全依靠我的cofounder，我们严重缺乏能交付产品的开发效率。但使用了Trae以后，我们拥有了快速Ship的能力，尤其是对于前端代码开发而言，效率实在是太高了，我可以直接在窗口里看预览，确认是不是做到了我预期的效果。更重要的是，当你用Next.js时，Trae完全就是一个开发团队，可同时搞前后端。0到部署所需要的时间从原来的1周到现在的10小时，1个月的MVP能做到我们原来需要半年才敢想的App——不管是UI上还是优化上。具体到产品使用中，我用Chat模式更多，原因在于Chat更可控，它可以只修改我让它修改的东西。因为每一次变更都需要审查代码，我不希望它改动太多，我会觉得不安。但是我知道Trae有Builder模式，能够更自动化地生成代码，有的时候也会用到。

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