首页 > 极客资料 博客日记
【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,效果让人惊叹!
2024-09-07 18:30:05极客资料围观26次
AI Code 时代早已开启,自己才行动。上手一试,让人惊叹。借助这感叹的情绪,把今天操作Cursor的步骤记录下来,也分享给大家。
推荐大家上手一试,让你改变!
准备阶段
- 下载 Cursor(https://www.cursor.com/),点击右上角“Download”下载exe安装文件。
- 安装后,桌面会有一个Cursor图表。双击启动!
登录阶段
登录使用 github 账号,可以试用两周,上手试一试,了解AI Code的时间是完全充足的。
** 登录过程不必细说,根据软件提示即可!
开始使用
第一步:确定一个文件夹后,点击Cursor工作区 (File --> New text File) 创建一个新文件,名称为 index.html
第二步:直接在index.html的文件内容中,输入 “开始创建一个模板,主要介绍个人的作品信息,项目案例,联系方式,加上一些动态广告词”。 然后回车,页面中就会出现“ Ctrl + L to chat, Ctrl + K to generate”, 根据提示,同时案例Ctrl键和L键,出现有右边的CHAT窗口。
第三步:开始输入自己想要的模板,最开始可以很简单一句话,然后等待它的生成。在生成的代码片段中,右边有“Apply”按钮,点击后就可以生成 html 文件内容,
保存后,双击打开文件查看效果。很简单,太淡,不好。。。
第四步:层层深入的进行对话,让Cursor一次有一次的修改。
第二次对话: 布局太简单,没有样式,没有设计感,需要有现代风格的颜色。并且内容不丰富,需要填充内容
第三次对话: 为了让手机用户也能查看页面,请帮忙做出适应性页面展示。并且在作品展示上也添加6个示例, 在项目案例上,添加50个案例。
第四次对话: 作品展示减少到9个,然后把联系方式放到第二位去。并且在联系方式中添加微信二维码和图片
第五次对话: 同样,也是在联系方式栏中,增加个人照片,工作地址信息,公众号的二维码。外加个人的座右铭。
第六次对话: 请把个人照片部分移动到关于我的部分中,然后个人的座右铭需要单独一行来表示,并且有引用样式进行突出显示。
第七次对话: 关于我的照片,放在右边去,并且把文字描述加多,使得它占用的高度和照片一样。
动图展示:
最后,附带上生成的HTML模板内容,喜欢的朋友们可以直接填充内容并部署到Azure App Service上(PS: VS Code 支持一键部署)。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>张三的个人主页</title> <style> :root { --primary-color: #3498db; --secondary-color: #2ecc71; --text-color: #333; --bg-color: #f4f4f4; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--bg-color); margin: 0; padding: 0; } header { background-color: var(--primary-color); color: white; text-align: center; padding: 2rem 0; } nav { background-color: #333; padding: 1rem; overflow-x: auto; } nav ul { list-style-type: none; padding: 0; display: flex; justify-content: center; } nav ul li { margin: 0 1rem; white-space: nowrap; } nav ul li a { color: white; text-decoration: none; transition: color 0.3s; } nav ul li a:hover { color: var(--secondary-color); } main { max-width: 1200px; margin: 0 auto; padding: 1rem; } section { margin-bottom: 3rem; } h2 { color: var(--primary-color); border-bottom: 2px solid var(--secondary-color); padding-bottom: 0.5rem; } .works-grid, .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .work-item, .project-item { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s; } .work-item:hover, .project-item:hover { transform: translateY(-5px); } .work-item img, .project-item img { width: 100%; height: 200px; object-fit: cover; } .work-item h3, .project-item h3 { padding: 1rem; margin: 0; font-size: 1rem; } footer { background-color: #333; color: white; text-align: center; padding: 1rem 0; } @media (max-width: 768px) { .works-grid, .projects-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .work-item img, .project-item img { height: 150px; } .work-item h3, .project-item h3 { font-size: 0.9rem; } } .about-content { display: flex; align-items: flex-start; gap: 2rem; } .profile-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; order: 2; } .about-text { flex: 1; order: 1; display: flex; flex-direction: column; justify-content: space-between; height: 200px; } .contact-info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .contact-details { flex: 1; min-width: 250px; } .qr-codes { display: flex; justify-content: space-around; margin-top: 1rem; } .qr-code { width: 120px; height: 120px; margin: 0.5rem; } .motto { font-style: italic; color: var(--primary-color); text-align: center; margin: 2rem 0; padding: 1rem; border-left: 4px solid var(--secondary-color); background-color: rgba(46, 204, 113, 0.1); } @media (max-width: 768px) { .about-content { flex-direction: column-reverse; align-items: center; } .about-text { height: auto; } .profile-photo { margin-bottom: 1rem; } .contact-info { flex-direction: column; align-items: center; } .contact-details { text-align: center; } } </style> </head> <body> <header> <h1>张三的个人主页</h1> <p id="dynamic-slogan">创新、专业、高效</p> </header> <nav> <ul> <li><a href="#about">关于我</a></li> <li><a href="#contact">联系方式</a></li> <li><a href="#works">作品展示</a></li> <li><a href="#projects">项目案例</a></li> </ul> </nav> <main> <section id="about"> <h2>关于我</h2> <div class="about-content"> <img src="https://via.placeholder.com/200" alt="个人照片" class="profile-photo"> <div class="about-text"> <p>我是张三,一名充满激情的全栈开发者。我擅长前端和后端开发,有5年的工作经验。我热爱创新,善于解决复杂问题,并且乐于学习新技术。在工作中,我注重团队协作,善于沟通,能够高效地完成项目。</p> <p>我毕业于北京大学计算机科学与技术专业,在校期间就参与了多个开源项目的开发。毕业后,我先后在几家知名互联网公司工作,积累了丰富的实战经验。</p> <p>除了编程,我还热爱阅读和旅行。我相信这些爱好能够拓宽我的视野,激发我的创造力。我的目标是成为一名优秀的技术领导者,为推动技术创新贡献自己的力量。</p> </div> </div> </section> <blockquote class="motto">"用代码改变世界,用创新引领未来"</blockquote> <section id="contact"> <h2>联系方式</h2> <div class="contact-info"> <div class="contact-details"> <p>邮箱: zhangsan@example.com</p> <p>电话: 123-456-7890</p> <p>LinkedIn: linkedin.com/in/zhangsan</p> <p>GitHub: github.com/zhangsan</p> <p>工作地址: 北京市朝阳区xxx街道xxx大厦</p> </div> <div class="qr-codes"> <img src="https://via.placeholder.com/120" alt="微信二维码" class="qr-code"> <img src="https://via.placeholder.com/120" alt="公众号二维码" class="qr-code"> </div> </div> </section> <section id="works"> <h2>作品展示</h2> <div class="works-grid"> <div class="work-item"> <img src="https://via.placeholder.com/300x200" alt="作品4"> <h3>数据可视化项目</h3> </div> <div class="work-item"> <img src="https://via.placeholder.com/300x200" alt="作品5"> <h3>企业官网重构</h3> </div> <div class="work-item"> <img src="https://via.placeholder.com/300x200" alt="作品6"> <h3>AI助手开发</h3> </div> <div class="work-item"> <img src="https://via.placeholder.com/300x200" alt="作品7"> <h3>社交媒体应用</h3> </div> </div> </section> <section id="projects"> <h2>项目案例</h2> <div class="projects-grid"> <!-- 这里添加5个项目案例 --> </div> </section> </main> <footer> <p>© 2023 张三的个人主页. 保留所有权利.</p> </footer> <script> const slogans = [ "创新、专业、高效", "用心做好每一个项目", "为客户创造最大价值", "技术改变世界", "追求卓越,永不止步" ]; let currentSlogan = 0; setInterval(() => { currentSlogan = (currentSlogan + 1) % slogans.length; document.getElementById('dynamic-slogan').textContent = slogans[currentSlogan]; }, 3000); // 生成50个项目案例 const projectsGrid = document.querySelector('.projects-grid'); for (let i = 1; i <= 8; i++) { const projectItem = document.createElement('div'); projectItem.className = 'project-item'; projectItem.innerHTML = ` <img src="https://via.placeholder.com/300x200" alt="项目${i}"> <h3>项目案例 ${i}</h3> `; projectsGrid.appendChild(projectItem); } </script> </body> </html>
参考资料:
Cursor: https://www.cursor.com/
标签:
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”