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>&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>

参考资料：

Cursor: https://www.cursor.com/

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

Ficow 的 AI 平台快速上手指南(ChatGPT, NewBing, ChatGLM-6B, cursor.so)
本文首发于 Ficow Shen's Blog,原文地址: Ficow 的 AI 平台快速上手指南(ChatGPT, NewBing, ChatGLM-6B, cursor.so). 内容概览前言 ...
【Azure Developer】解决Azure Key Vault管理Storage的示例代码在中国区Azure遇见的各种认证/授权问题 - C# Example Code
问题描述使用Azure密钥保管库(Key Vault)来托管存储账号(Storage Account)密钥的示例中,从Github中下载的示例代码在中国区Azure运行时候会遇见各种认证和授权问题, ...
【Azure Developer】使用Microsoft Graph API 批量创建用户,先后遇见的三个错误及解决办法
问题描述在先前的一篇博文中,介绍了如何使用Microsoft Graph API来创建Azure AD用户(博文参考:[Azure Developer]使用Microsoft Graph API 如 ...
【Azure Developer】使用Java代码启动Azure VM(虚拟机)
问题描述在使用Java的启动Azure VM的过程中,遇见了com.azure.core.management.exception.ManagementException: Status code ...
【Azure Developer】【Python 】使用 azure.identity 和 azure.common.credentials 获取Azure AD的Access Token的两种方式
问题描述使用Python代码,展示如何从Azure AD 中获取目标资源的 Access Token. 如要了解如何从AAD中获取 client id,client secret,tenant id ...
【Azure Developer】使用 Microsoft Authentication Libraries (MSAL) 如何来获取Token呢 (通过用户名和密码方式获取Access Token)
问题描述在上一篇博文<[Azure Developer]使用 adal4j(Azure Active Directory authentication library for Java)如何来 ...
IBM Watson启示录：AI不应该仅仅是炫技
IBM Watson启示录:AI不应该仅仅是炫技 https://mp.weixin.qq.com/s/oNp8QS7vQupbi8fr5RyLxA 导 ...
CSS cursor 属性--css html 鼠标手型,鼠标形状,鼠标效果,样式
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...
【Azure Developer】VS Code运行Java 版Azure Storage SDK操作Blob (新建Container, 上传Blob文件，下载及清理)
问题描述是否可以用Java代码来管理Azure blob? 可以.在代码中加入azure-storage-blob依赖.即可使用以下类操作Azure Storage Blob. BlobServic ...
微软要如何击败Salesforce？Office365、Azure、Dynamics365 全面布局AI | 双语
微软在上月宣布组建自己的 AI 研究小组.该小组汇集了超过 5000 名计算机科学家和工程师,加上微软内部研究部门,将共同挖掘 AI 技术. 与此同时,亚马逊,Facebook,Google,IBM ...

随机推荐

怎样理解 Vue 的单向数据流？
数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件 ...
css3 html5
vscode的使用什么是HTML5? HTML5新增语义化标签多媒体标签 <audio>音频标签谷歌浏览器把autoplay属性给我们禁用. 两种音频格式的播放视频标签<v ...
mybatis 逆行工程附源码
导读逆向工程说白了,就可以简化开发工作量,自动生成一些死板的东西,比如POJO.映射文件等等,然后在将代码拷贝至实际工程,直接拿来用! 项目结构 GeneratorSqlMap.java impor ...
人类高质量 Java 学习路线【一条龙版】
Java 学习路线一条龙版 by 鱼皮. 原创不易,请勿抄袭,违者必究! 大家好,我是鱼皮.现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了.大部分的博主推荐资源 ...
基于Java网络书店商城设计实现(源码+lw+部署文档+讲解等)
系统介绍: 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于网络书店商城当然也不能排除在外,随着网络技术的不断成熟,带动了网络书店商城,它彻底改变了过去传统 ...
Profinet转Modbus模块减轻通讯编程工作量实现Modbus通讯
巴图自动化PN转Modbus模块(BT-MDPN10)能够实现Profinet协议与Modbus协议之间的转换,使得Profinet协议设备与Modbus协议设备进行连接并能够相互通信. 通过使用巴图 ...
写写Redis十大类型hyperloglog(基数统计)的常用命令
hyperloglog处理问题的关键所在和bitmap差不多,都是为了减少对sql的写操作,提高性能,用于基数统计的算法.基数就是一种数据集,用于收集去重后内容的数量.会有0.81%的误差 hyper ...
.NET 权限工作流框架 TOP 榜
前言 .NET权限管理及快速开发框架.最好用的权限工作流系统. 基于经典领域驱动设计的权限管理及快速开发框架,源于Martin Fowler企业级应用开发思想及最新技术组合(SqlSugar.EF.Q ...
Jmeter函数助手1-CSVRead
CSVRead函数适用于读取文件获取参数值. 用于获取值的CSV文件 | *别名:csv文件路径 CSV文件列号| next| *alias:读取列,0表示第一列,1表示第二列 1.首先我们需要一个文 ...
web3 产品介绍 Dune Analytics 区块链的数据探索和可视化链上热点和趋势一手掌握
Dune Analytics 是一个强大的数据分析平台,旨在帮助用户在区块链上进行数据探索和可视化. Dune Analytics的特点: 数据查询与可视化:Dune Analytics允许用户从多个 ...

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