【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话，制作个人页面原型，效果让人惊叹！

技术分享 4个月前 (09-09) 0 999+

关注

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 支持一键部署)。

【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话，制作个人页面原型，效果让人惊叹！

<!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>&copy; 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>