【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话，制作个人页面原型，效果让人惊叹！
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/
【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 ...
随机推荐
- yb课堂之分布式应用下登陆校验解决方案 JWT讲解 json wen token 《八》
什么是JWT? JWT是一个开放标准,它定义了一种用户简介,自包涵的用于通信双方之间以JSON对象的形式安全传递信息的方法.可以使用HMAC算法或者是RSA的公钥密钥进行签名 简单来说:就是通过一定规 ...
- .NET周刊【7月第2期 2024-07-14】
国内文章 开源GTKSystem.Windows.Forms框架让C# winform支持跨平台运行 https://www.cnblogs.com/easywebfactory/p/18289178 ...
- EasyBPM进销存之物料管理
本文是EasyBPM平台实现进销存系列中的一篇,主要讲述物料的相关的管理. 在ERP系统中,"物料"一词有着广泛的含义,它是所有产品.半成品.在制品.原材料.配套件.协作件.易耗品 ...
- JuiceFS 直连 NFS 新功能介绍，赋能 NAS 进行 AI 训练
NAS 通过提供多用户网络数据存取服务,极大地简化了数据共享和管理.而 NFS 作为实现这种共享的一种主流协议,尽管广泛应用,但在处理复杂的 AI 训练场景时常常受限于其性能和一致性问题. Juice ...
- 阅读翻译Mathematics for Machine Learning之2.7 Linear Mappings
阅读翻译Mathematics for Machine Learning之2.7 Linear Mappings 关于: 首次发表日期:2024-07-23 Mathematics for Machi ...
- java一些位运算的方法
记录一些java位运算的方法 Integer.bitCount:用于记录一个int输转化成二进制之后里面包含了多少个1. 使用例题为leetcode2859 切记下面规则要先转二进制 &相同位 ...
- 【Vue】MineData 地图接入
一.文档资料: MineData开放平台: https://minedata.cn/md-platform/login/login MineData V2.1.0 接口文档: http://113.1 ...
- 【JavaScript】前端算法题 40道题+解析
前言 最近练习了一些前端算法题,现在做个总结,以下题目都是个人写法,并不是标准答案,如有错误欢迎指出,有对某道题有新的想法的友友也可以在评论区发表想法,互相学习 题目 题目一: 二维数组中的查找: 在 ...
- 强化学习中经典算法 —— reinforce算法 —— （进一步理解， 理论推导出的计算模型和实际应用中的计算模型的区别）
在奖励折扣率为1的情况下,既没有折扣的情况下,reinforce算法理论上可以写为: 但是在有折扣的情况下,reinforce算法理论上可以写为: 以上均为理论模型. ================ ...
- Ubuntu18.04下 修改conda环境和缓存默认路径
查看conda 的默认环境和缓存默认路径:conda info conda环境和缓存的默认路径(envs directories 和 package cache) envs directories ...