首页 > 其他分享 >【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,效果让人惊叹!

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

时间:2024-09-07 18:22:53浏览次数:11  
标签:flex Code item AI text Cursor -- 1rem color

【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,效果让人惊叹! _二维码

AI Code 时代早已开启,自己才行动。上手一试,让人惊叹。借助这感叹的情绪,把今天操作Cursor的步骤记录下来,也分享给大家。

推荐大家上手一试,让你改变!

 

准备阶段

  • 下载 Cursor(https://www.cursor.com/),点击右上角“Download”下载exe安装文件。
  • 安装后,桌面会有一个Cursor图表。双击启动!

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

 

登录阶段

登录使用 github 账号,可以试用两周,上手试一试,了解AI Code的时间是完全充足的。

【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,效果让人惊叹! _项目案例_03

** 登录过程不必细说,根据软件提示即可!

 

开始使用

第一步:确定一个文件夹后,点击Cursor工作区 (File -->  New text File) 创建一个新文件,名称为 index.html

第二步:直接在index.html的文件内容中,输入 “开始创建一个模板,主要介绍个人的作品信息,项目案例,联系方式,加上一些动态广告词”。 然后回车,页面中就会出现“ Ctrl + L to chat, Ctrl + K to generate”, 根据提示,同时案例Ctrl键和L键,出现有右边的CHAT窗口。

【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,效果让人惊叹! _项目案例_04

第三步:开始输入自己想要的模板,最开始可以很简单一句话,然后等待它的生成。在生成的代码片段中,右边有“Apply”按钮,点击后就可以生成 html 文件内容,

【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,效果让人惊叹! _二维码_05

 保存后,双击打开文件查看效果。很简单,太淡,不好。。。

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

第四步:层层深入的进行对话,让Cursor一次有一次的修改。

第二次对话: 布局太简单,没有样式,没有设计感,需要有现代风格的颜色。并且内容不丰富,需要填充内容

第三次对话: 为了让手机用户也能查看页面,请帮忙做出适应性页面展示。并且在作品展示上也添加6个示例, 在项目案例上,添加50个案例。

第四次对话: 作品展示减少到9个,然后把联系方式放到第二位去。并且在联系方式中添加二维码和图片

第五次对话: 同样,也是在联系方式栏中,增加个人照片,工作地址信息,公众号的二维码。外加个人的座右铭。

第六次对话: 请把个人照片部分移动到关于我的部分中,然后个人的座右铭需要单独一行来表示,并且有引用样式进行突出显示。

第七次对话: 关于我的照片,放在右边去,并且把文字描述加多,使得它占用的高度和照片一样。

动图展示:

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

 

最后,附带上生成的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>邮箱: [email protected]</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/

 


当在复杂的环境中面临问题,格物之道需:浊而静之徐清,安以动之徐生。 云中,恰是如此!

标签:flex,Code,item,AI,text,Cursor,--,1rem,color
From: https://blog.51cto.com/u_13773780/11945860

相关文章

  • 【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,
    AICode时代早已开启,自己才行动。上手一试,让人惊叹。借助这感叹的情绪,把今天操作Cursor的步骤记录下来,也分享给大家。推荐大家上手一试,让你改变! 准备阶段下载Cursor(https://www.cursor.com/),点击右上角“Download”下载exe安装文件。安装后,桌面会有一个Cursor图表。......
  • LeetCode刷题 堆
    一:堆1、一种二叉树的结构(完全二叉树)2、完全二叉树:从上到下;从左到右;填满3、最大堆:根节点的权值大于孩子节点4、最小堆:根节点的权值依次小于孩子节点5、常用操作#创建堆(最大堆,最小堆)#添加元素#获取堆顶元素#删除堆顶元素#堆的长度#堆的遍历二:刷题215数组中的第K个最......
  • Kubernetes 1.25 containerd 环境部署 SuperMap iManager
    超图官网目提供的Kubernetes版本为1.20版本,容器运行时为docker本次部署使用已有的Kubernetes1.25版本集群,容器运行时为containerdKubernetes,containerd部署请自行了解,本次不做介绍,下面介绍在此环境上如何部署iManager11i并创建云套件1.环境介绍虚拟机CPU......
  • 【Leetcode:LCR 101. 分割等和子集 + 递归 + 记忆化搜索 + dp】
    ......
  • 测试你们认为最好的AI工具,是不是好用得自己试试!
    大家好,我是凡人,在OpenAI春季发布会后,GPT-4o一时风光无量,一个同事不信邪,非要用 GPT-4o版本对OpenAI官网上的例子尝试生成,本来还是嘲笑他的心态,但他还真的发现了点有意思的事情。今天决定对官网上部分例子进行简单测试,人家说再好的东西,也要亲自验证才安心。下面我们......
  • LeetCode刷题-哈希表
    一:哈希表1、有key:value键值对这样的概念;就是字典;通过key得到value2、hash碰撞问题:就是key的内存地址相同;使用链表的方法解决3、字典常见操作#创建哈希表hash_tabel={}#添加元素hash_tabel['name']='admin'hash_tabel['age']=25#删除元素delhash_tabel['name']#修改元......
  • AI是不是真的能落地应用,未来看看这三个行业
    大家好,我是凡人,最近也被GPT-4o刷爆了朋友圈,各种对OpenAI新布局的猜想也是层出不穷。GPT-4o再次将多模态交互拉到了新高度,一放出就颠覆了原有AI 给传统行业带来新冲击。还有不了解GPT-4o 的同学,可以查看我上一篇文章:GPT-4o横空出世!OpenAI26分钟重回巅峰!接下来,我会重点......
  • 怎样预测足球比赛?不用AI你就out了!
    一、引言你是否有过疑问,足球究竟该采用何种方案才能有效的进行预测呢?其实在足球比赛预测领域,采用人工智能(AI)技术的预测已成为一种趋势。如今你所看到的足球分析博主,以及各项足球预测系统,他们的背后统统都有AI预测的影子,在足球预测领域,AI已成为大众所归。AI预测系统地址(PC端)......
  • 五子棋AI 任务1:实现棋盘类
    绪论本篇将引导读者如何构建一个五子棋棋盘类,并且在结尾给出了已经写好关键接口的类定义,使得读者将注意力聚焦在功能的实现上。下载代码文件任务要求详解对于需要填写的部分,用#define语句定义宏进行了替代,以保证通过编译,在编写代码时删掉即可。#defineQUEST_BOOLtrue#d......
  • ikuai搭建AdGuardHome(保姆及教程)
    介绍本教程使用iKuai中使用Docker插件搭建AdGuardHome特别包含了IPv6的设置步骤AdGuardHome可以有效的拦截广告和增加dns解析速度爱快云平台配置爱快云平台上开启docker插件1.登录爱快云2.登录后点击插件应用3.点击要开启的设备然后点击(图标2)指向的箭头然后点击确......