如果您要分析代码功能,可以参考以下步骤:
原创路导SocialPrompt 2025年02月20日14:00浙江无意中看到了一个博客网站,风格我非常喜欢,所以就想要拥有一个。被复制的网站地址:https://zed.dev/blog我用AI做出来的网址:https://zenblog-zpit.vercel.app/做的过程中顺手记录了整个过程,在实现中,我尽量不使用编程术语,尽量用大白话。实际效果[heading2]准备工作[heading3]分析要拷贝页面的技术栈[content]1.1.打开https://www.wappalyzer.com/输入要分析的网站地址1.2.得到技术栈,我们主要关心框架和ui[heading3]截图要克隆的网页[content][heading3]分析页面功能[content]这个页面比较简单1.1.顶部导航栏2.2.页面主体区域2.1.分类在左边2.2.文章列表在右边2.3.标题位置2.4.文章卡片展示位置2.5.文章列表和分类区域3.3.底部导航栏
AI Review is a feature that allows you to review your recent changes in your codebase to catch any potential bugs.AI Review是一项功能,可让您查看代码库中的最近更改以捕获任何潜在的错误。You can click into individual review items to see the full context in the editor,and chat with the AI to get more information.您可以单击各个审阅项以查看编辑器中的完整上下文,并与AI聊天以获取详细信息。[heading3][heading3]Custom Review Instructions自定义审核说明[content]In order for AI Review to work in your favor,you can provide custom instructions for the AI to focus on.For example,if you want the AI to focus on performance-related issues,you could put:为了让AI Review对您有利,您可以为AI提供自定义说明以专注于。例如,如果您希望AI专注于与性能相关的问题,您可以输入:This way,AI Review will focus on the performance of your code when scanning through your changes.这样,AI Review在扫描更改时将专注于代码的性能。[heading3][heading3]Review Options查看选项[content]Currently,you have a several options to choose from to review:目前,您有几个选项可供选择进行审核:Review Working State查看工作状态This will review your uncommitted changes.这将查看您未提交的更改。Review Diff with Main Branch查看Diff with Main BranchThis will review the diff between your current working state and the main branch.这将查看当前工作状态与main分支之间的差异。Review Last Commit查看上次提交This will review the last commit you made.这将审查您所做的最后一次提交。
我的目的是做出完整的效果,细节的样式问题不做处理,因此下一步要实现的是:文章列表部分和底部导航栏。[heading4]文章列表部分[content]提示词:根据图片实现文章列表部分。位置在当前内容的下面。可以看到很快就写出来效果。?小技巧—不要直接点击全部接受,先看效果。由于AI修改的内容不一定符合实际需求。所以不要直接接受,要先检查效果是否符合需求。如果不符合,可以拒绝。或者让AI解释新增代码的作用,再决定是否接受。我们可以看到,样式和原文件不太一样,但是和项目整体的ui是一样的,对于UI的样式目前不一定要完全一样,我们的逻辑是先做出来功能,然后调整样式,那么接下来,我们可以发现:左侧分类菜单栏还没有。?功能分析:实际使用我们会发现,左侧菜单栏,分类内容是文章的分类,在页面滚动的时候,菜单会吸顶。提示词:根据图片实现文章部分左侧菜单栏,内容是文章的分类,在页面滚动的时候,菜单会吸顶。执行后会发现有异常。?异常调试技巧—选中所有异常,然后添加到对话。直接对话:解决所有异常。我们发现位置有问题,那么接下来就是调整位置。精准修改小技巧—让AI添加注释,解释每一段代码对应的功能是什么,这样,可以直接找到对应的代码,然后精准提出修改建议。AI也可以根据注释更好的定位修改位置。提示词技巧—说清楚比说的多更重要,大部分情况下也不需要特殊语法,能够明确的说清楚要实现的功能的位置,大小,效果是最重要的。效果完美。文章列表太少了,让AI增加几条,我们看看完整效果。