最近发现一个巨牛的人工智能的学习网站，给大家分享一下~可点击下方链接查看！
[人工智能学习网站](https://www.captainbed.cn/sc)
长大好多烦恼，好愁！
目录
前言
上年这个时候，刚拿到录取通知书。哥哥教我用ai智能体，其实就是向我炫技。当时我问他，为什么不能直接给我生成图表，直接给我生成多好，省得我再去复制了。他说，其实很简单，只要做个接口协议什么的就行，只是目前国内没人做。当时说的很高深，我也听不懂。没想到年底，这个功能就实现内测了。在某种程度上，我也算是预言了哈哈。
初步了解
Mcp到底是个啥？
Mcp，全称 Model Context Protocol，翻译过来是模型上下文协议。你不用管这高大上的名字，简单说，它就是和大 AI 模型聊天时，一种把相关信息整理好、按规矩传给 AI 的方式。
之前我们使用的AI智能体如果比作是个思考问题的大脑，那么Mcp就是思考后，给你去干活的。AI大模型是给你思维结果，而Mcp就是调用工具给你做好工作。也就是低代码~
发展
2024 年 11 月，Anthropic（由 OpenAI 前员工创办）发布并开源 Mcp。当时 AIGC 发展快但存痛点，AI 模型与外部数据、工具连接不足，此前方案缺通用性。Mcp 提供标准化交互方式，助 AI 与外部系统互动。后获多家支持，OpenAI 等巨头入局，成 AI 智能体时代关键技术。真的好快啊！
理论基础
与 RAG（为大模型提供充足上下文）和 Function Calling（让模型能使用工具）密切相关，在它们基础上实现 AI 与外部系统更高效交互。
核心组件
使用逻辑
目前在Claude，OpenAI GPT，阿里云百炼，纳米AI都有接入Mcp，可以在工具箱中调用工作使用的Mcp来完成现有工作，但是带来的问题是权限过大，不安全。
于传统API不同之处
- 传统 API 参数变更时，用户必须更新代码，否则请求可能失败。
- MCP 采用动态灵活方式，客户端连接服务器时会先了解其能力，服务器也会动态更新功能描述，客户端无需重写代码就能适应变化，大幅降低维护成本。
模型推荐
事先声明！！不是广告！！不是广告！！红衣大叔没给我打钱！！当然，也欢迎纳米AI官方给我打钱~~
打开我们的大模型，选择工具，我们可以看到有很多官方或个人开发的mcp工具，我们可以点击使用
提出要求
他会给你充分的回答，但是，我觉着还是不够方便，如何直接get成品呢？
纳米ai有另一功能，相当于成熟的mcp堆出来的agent，点击智能体页面
我选择网页搭建
我们可以看一下最后成品
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>L'Éclat | 精致美妆体验</title>
<link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css">
<style>
:root {
--beige: #F5F5DC;
--light-yellow: #FAF8ED;
--gold: #D4AF37;
--soft-pink: #F8D7DA;
--transition: all 0.3s ease;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: var(--light-yellow);
color: #5A5A5A;
line-height: 1.6;
}
.header {
background-color: var(--beige);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-family: 'Times New Roman', serif;
color: var(--gold);
letter-spacing: 2px;
}
.nav-item {
transition: var(--transition);
border-bottom: 2px solid transparent;
}
.nav-item:hover {
color: var(--gold);
border-bottom-color: var(--gold);
}
.hero {
background: linear-gradient(135deg, var(--light-yellow) 0%, var(--beige) 100%);
min-height: 500px;
}
.product-card {
background-color: white;
transition: var(--transition);
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.category-badge {
background-color: var(--soft-pink);
color: #8E4A49;
}
.price {
color: var(--gold);
font-weight: bold;
}
.btn-primary {
background-color: var(--gold);
transition: var(--transition);
}
.btn-primary:hover {
background-color: #C19A3D;
transform: translateY(-2px);
}
.footer {
background-color: var(--beige);
}
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body class="fade-in">
<!-- 导航栏 -->
<header class="header">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="logo text-3xl font-bold">L'Éclat</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">护肤</a>
<a href="#" class="nav-item">彩妆</a>
<a href="#" class="nav-item">香水</a>
<a href="#" class="nav-item">关于我们</a>
</nav>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-gray-100">
<i class="fas fa-search text-gray-600"></i>
</button>
<button class="p-2 rounded-full hover:bg-gray-100">
<i class="fas fa-user text-gray-600"></i>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 relative">
<i class="fas fa-shopping-bag text-gray-600"></i>
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
</button>
</div>
</div>
</div>
</header>
<!-- 英雄区域 -->
<section class="hero flex items-center">
<div class="container mx-auto px-6 py-16">
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4">发现你的独特之美</h1>
<p class="text-xl mb-8">精选全球优质美妆产品，为您带来非凡的护肤与彩妆体验</p>
<button class="btn-primary text-white px-8 py-3 rounded-full font-medium">探索新品</button>
</div>
</div>
</section>
<!-- 产品分类 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">产品分类</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="category-card p-8 text-center rounded-lg bg-gray-50 hover:bg-soft-pink transition cursor-pointer">
<div class="w-16 h-16 mx-auto mb-4 bg-soft-pink rounded-full flex items-center justify-center">
<i class="fas fa-spa text-2xl text-pink-600"></i>
</div>
<h3 class="font-medium">护肤系列</h3>
</div>
<div class="category-card p-8 text-center rounded-lg bg-gray-50 hover:bg-soft-pink transition cursor-pointer">
<div class="w-16 h-16 mx-auto mb-4 bg-soft-pink rounded-full flex items-center justify-center">
<i class="fas fa-paint-brush text-2xl text-pink-600"></i>
</div>
<h3 class="font-medium">彩妆系列</h3>
</div>
<div class="category-card p-8 text-center rounded-lg bg-gray-50 hover:bg-soft-pink transition cursor-pointer">
<div class="w-16 h-16 mx-auto mb-4 bg-soft-pink rounded-full flex items-center justify-center">
<i class="fas fa-wind text-2xl text-pink-600"></i>
</div>
<h3 class="font-medium">香水系列</h3>
</div>
<div class="category-card p-8 text-center rounded-lg bg-gray-50 hover:bg-soft-pink transition cursor-pointer">
<div class="w-16 h-16 mx-auto mb-4 bg-soft-pink rounded-full flex items-center justify-center">
<i class="fas fa-gift text-2xl text-pink-600"></i>
</div>
<h3 class="font-medium">礼盒套装</h3>
</div>
</div>
</div>
</section>
<!-- 精选推荐 -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<div class="flex justify-between items-center mb-12">
<h2 class="text-3xl font-bold">精选推荐</h2>
<div class="flex space-x-2">
<button class="px-4 py-2 border rounded-l-full">新品</button>
<button class="px-4 py-2 border">热销</button>
<button class="px-4 py-2 border rounded-r-full">特惠</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 产品卡片1 -->
<div class="product-card rounded-lg overflow-hidden">
<div class="relative">
<img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="玫瑰精华面霜" class="w-full h-64 object-cover">
<div class="absolute top-2 right-2 category-badge px-3 py-1 rounded-full text-xs">护肤</div>
</div>
<div class="p-4">
<h3 class="font-bold mb-2">玫瑰精华面霜</h3>
<p class="text-sm text-gray-600 mb-4">深层滋养，焕发肌肤活力</p>
<div class="flex justify-between items-center">
<span class="price">¥298</span>
<button class="btn-primary text-white px-4 py-2 rounded-full text-sm">加入购物车</button>
</div>
</div>
</div>
<!-- 产品卡片2 -->
<div class="product-card rounded-lg overflow-hidden">
<div class="relative">
<img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="丝绒唇膏" class="w-full h-64 object-cover">
<div class="absolute top-2 right-2 category-badge px-3 py-1 rounded-full text-xs">彩妆</div>
</div>
<div class="p-4">
<h3 class="font-bold mb-2">丝绒唇膏 #12</h3>
<p class="text-sm text-gray-600 mb-4">哑光质地，持久不脱色</p>
<div class="flex justify-between items-center">
<span class="price">¥168</span>
<button class="btn-primary text-white px-4 py-2 rounded-full text-sm">加入购物车</button>
</div>
</div>
</div>
<!-- 产品卡片3 -->
<div class="product-card rounded-lg overflow-hidden">
<div class="relative">
<img src="https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="清晨花园香水" class="w-full h-64 object-cover">
<div class="absolute top-2 right-2 category-badge px-3 py-1 rounded-full text-xs">香水</div>
</div>
<div class="p-4">
<h3 class="font-bold mb-2">清晨花园香水</h3>
<p class="text-sm text-gray-600 mb-4">清新花香调，50ml</p>
<div class="flex justify-between items-center">
<span class="price">¥458</span>
<button class="btn-primary text-white px-4 py-2 rounded-full text-sm">加入购物车</button>
</div>
</div>
</div>
<!-- 产品卡片4 -->
<div class="product-card rounded-lg overflow-hidden">
<div class="relative">
<img src="https://qcdn2.zhaomi.cn/t11de458816ceac5d1e59b3cfaf.png" alt="假日礼盒" class="w-full h-64 object-cover">
<div class="absolute top-2 right-2 category-badge px-3 py-1 rounded-full text-xs">礼盒</div>
</div>
<div class="p-4">
<h3 class="font-bold mb-2">假日礼盒套装</h3>
<p class="text-sm text-gray-600 mb-4">精选5件明星产品</p>
<div class="flex justify-between items-center">
<span class="price">¥998</span>
<button class="btn-primary text-white px-4 py-2 rounded-full text-sm">加入购物车</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 品牌故事 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="md:flex items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
<h2 class="text-3xl font-bold mb-6">我们的故事</h2>
<p class="mb-4">L'Éclat 源自法语，意为"光芒"。我们相信每个女性都拥有独特的光芒，而我们的使命就是帮助您发现并绽放这份美丽。</p>
<p class="mb-6">自2015年创立以来，我们始终致力于从全球精选最优质的化妆品和护肤品，只为您带来最安全、最有效的美丽体验。</p>
<button class="btn-primary text-white px-6 py-2 rounded-full">了解更多</button>
</div>
<div class="md:w-1/2">
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="品牌故事" class="w-full rounded-lg shadow-lg">
</div>
</div>
</div>
</section>
<!-- 客户评价 -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">客户评价</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="客户头像" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">张小姐</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"玫瑰精华面霜真的太好用了！我的皮肤变得水润有光泽，会一直回购的！"</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="客户头像" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">李女士</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"丝绒唇膏的颜色太美了，而且一点都不干，持久度也很好，已经买了三个颜色了！"</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="客户头像" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">王小姐</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-600">"清晨花园香水味道很清新，不会太浓烈，适合日常使用，包装也很精美。"</p>
</div>
</div>
</div>
</section>
<!-- 订阅区 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-4">订阅我们的电子报</h2>
<p class="mb-8 max-w-2xl mx-auto">订阅即可获取新品上市、独家优惠和护肤美妆小贴士，首次订阅还可获得9折优惠券！</p>
<div class="max-w-md mx-auto flex">
<input type="email" placeholder="您的电子邮箱" class="flex-grow px-4 py-3 border rounded-l-full focus:outline-none focus:ring-2 focus:ring-gold">
<button class="btn-primary text-white px-6 py-3 rounded-r-full font-medium">订阅</button>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="logo text-2xl font-bold mb-4">L'Éclat</h3>
<p class="text-gray-600">发现你的独特之美</p>
</div>
<div>
<h4 class="font-bold mb-4">快速链接</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-gold">首页</a></li>
<li><a href="#" class="text-gray-600 hover:text-gold">所有产品</a></li>
<li><a href="#" class="text-gray-600 hover:text-gold">新品上市</a></li>
<li><a href="#" class="text-gray-600 hover:text-gold">特惠活动</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">客户服务</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-gold">联系我们</a></li>
<li><a href="#" class="text-gray-600 hover:text-gold">配送信息</a></li>
<li><a href="#" class="text-gray-600 hover:text-gold">退换政策</a></li>
<li><a href="#" class="text-gray-600 hover:text-gold">常见问题</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">关注我们</h4>
<div class="flex space-x-4 mb-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gold hover:text-white">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gold hover:text-white">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gold hover:text-white">
<i class="fab fa-xiaohongshu"></i>
</a>
</div>
<p class="text-gray-600">客服时间: 9:00-21:00</p>
<p class="text-gray-600">客服热线: 400-123-4567</p>
</div>
</div>
<div class="border-t border-gray-200 mt-12 pt-8 text-center text-gray-500">
<p>© 2025 L'Éclat 美妆. 保留所有权利.</p>
</div>
</div>
</footer>
<script>
// 简单的淡入动画
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.fade-in');
elements.forEach(el => {
el.style.opacity = '0';
setTimeout(() => {
el.style.transition = 'opacity 1s ease';
el.style.opacity = '1';
}, 100);
});
// 产品卡片悬停效果
const productCards = document.querySelectorAll('.product-card');
productCards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-5px)';
card.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
card.style.boxShadow = '0 5px 15px rgba(0,0,0,0.05)';
});
});
});
</script>
</body>
</html>你别说，你还真别说！纳米ai有两把刷子！红衣大叔打钱！！！！
图片来源：阿里云