即刻App年轻人的同好社区
下载
置顶关于MCP最优质的内容的合集
文科生解释什么是MCP以及他有什么用？
MCP（Model Context Protocol）是Anthropic在去年提出的一种开放协议，用于标准化应用程序与大语言模型（LLMs）之间的上下文交互，它在外部数据源和AI工具之间建立链接，实现了类似AI应用的'USB-C'通用接口。
简单来说借助MCP可以用来给AI使用插件，来帮助AI能够看见、理解其他数据源，典型的应用场景比如在Windsurf和Cursor里，通过各种MCP工具完成一些AI本身无法实现的功能。我研究MCP的契机是发现通过一个Figma的MCP，能够比截图识别提供更加精确的页面结构和效果，当前也受限于Figma翻译层压缩后提供到大模型导致没办法一次性处理非常复杂的文件。
不过随着生态逐渐发展，MCP的应用场景越来越丰富，未来发展潜力巨大，只要你在使用AI编程就一定要花几分钟时间了解下MCP（尤其是和我一样不会编程的人）
【三个聚合MCP服务的网站 】
glama.ai
smithery.ai
github.com
【两个MCP视频的讲解 】
在用Cursor可以去看Jason的讲解，非常详细，就是语速快到起飞
www.youtube.com
在用Windsurf的，可以去看官方的视频版本
www.youtube.com
【一篇非常详细的MCP的普及文章】
guangzhengli.com
文科生解释什么是MCP以及他有什么用？
MCP（Model Context Protocol）是Anthropic在去年提出的一种开放协议，用于标准化应用程序与大语言模型（LLMs）之间的上下文交互，它在外部数据源和AI工具之间建立链接，实现了类似AI应用的'USB-C'通用接口。
简单来说借助MCP可以用来给AI使用插件，来帮助AI能够看见、理解其他数据源，典型的应用场景比如在Windsurf和Cursor里，通过各种MCP工具完成一些AI本身无法实现的功能。我研究MCP的契机是发现通过一个Figma的MCP，能够比截图识别提供更加精确的页面结构和效果，当前也受限于Figma翻译层压缩后提供到大模型导致没办法一次性处理非常复杂的文件。
不过随着生态逐渐发展，MCP的应用场景越来越丰富，未来发展潜力巨大，只要你在使用AI编程就一定要花几分钟时间了解下MCP（尤其是和我一样不会编程的人）
【三个聚合MCP服务的网站 】
glama.ai
smithery.ai
github.com
【两个MCP视频的讲解 】
在用Cursor可以去看Jason的讲解，非常详细，就是语速快到起飞
www.youtube.com
在用Windsurf的，可以去看官方的视频版本
www.youtube.com
【一篇非常详细的MCP的普及文章】
guangzhengli.com
54 344
推特的@Grok功能做的有点粗暴了，一个100+评论的推文下有30%在艾特Grok鉴真，很影响信息密度，稀释了真实用户的讨论和观点。该内容还是个小圈子的里的独有信源Knowhow，这AI能鉴真了才怪
3 00
看到小红书有些帖子用DeepSeek里的内容打广告，就用Windsurf做了个DeepSeek截图生成器，问题和答案你自己输入，然后套上个DeepSeek的界面壳
每周用AI做个垃圾小项目
geticon.online
（得用PC访问）
每周用AI做个垃圾小项目
geticon.online
（得用PC访问）
10 14
我擦，用一段话Claude直接帮我生成了一个完整可交互的冥想页面
能改背景色、调节动画速度、切换动画效果，居然还带音效...
一把梭出个应用好像在sonnet3.7里更加简单了
用R1生成的描述Prompt
帮我根据以下规范制作精美冥想动画设计页面，包含技术选择、视觉元素和交互设计建议：
一、技术栈推荐
1. 核心语言
Web动画三件套：HTML5/CSS3/JavaScript（兼容移动端/Pad/PC）
高级图形库：Three.js（3D粒子系统）+ GSAP（时间轴动画）
创意编程方案：p5.js / Processing（数学美学生成）
2. 辅助工具
颜色生成：Adobe Color / Coolors.co
音频处理：Tone.js（环境音效）+ Howler.js（呼吸引导）
性能优化：WebGL渲染 + RequestAnimationFrame
二、视觉呈现要素
1. 环境基底
复制
background: linear-gradient(
135deg,
#83a4d4 0%, /* 冷色调 */
#b6fbff 50%, /* 水色过渡 */
#f5f7fa 100% /* 柔光白 */
);
animation: skyFlow 20s infinite alternate;
2. 动态元素组合
粒子系统：正弦波流动的发光点（使用Three.js PointsMaterial）
呼吸焦点：CSS clip-path生成的多层同心圆脉动
自然隐喻：
缓慢绽放的L-system分形花
柏林噪声生成的流体光带
SVG路径动画模拟羽毛飘落
3. 光影控制
径向渐变模拟环境光
WebGL后期处理：辉光（Bloom）+ 景深效果
三、动画节奏设计
复制
const breathCycle = (target) => {
gsap.timeline({repeat:-1})
.to(target, {scale:1.2, duration:4, ease:"sine.inOut"}) // 吸气
.to(target, {scale:1, duration:6, ease:"power2.out"}) // 呼气
};
四、增强体验设计
1. 交互响应
麦克风输入驱动粒子运动（Web Audio API）
陀螺仪控制的星云旋转（DeviceOrientation API）
2. 多感官融合
3. 个性化设置
可调参数：粒子密度/动画速度/主色调
预设场景：星空模式/海底模式/极光模式
五、关键提示
色彩心理学：使用低饱和度莫兰迪色系
运动曲线：所有动画应用ease-out缓动
设备适配：CSS media查询区分横竖屏
能耗控制：后台标签页自动暂停渲染
能改背景色、调节动画速度、切换动画效果，居然还带音效...
一把梭出个应用好像在sonnet3.7里更加简单了
用R1生成的描述Prompt
帮我根据以下规范制作精美冥想动画设计页面，包含技术选择、视觉元素和交互设计建议：
一、技术栈推荐
1. 核心语言
Web动画三件套：HTML5/CSS3/JavaScript（兼容移动端/Pad/PC）
高级图形库：Three.js（3D粒子系统）+ GSAP（时间轴动画）
创意编程方案：p5.js / Processing（数学美学生成）
2. 辅助工具
颜色生成：Adobe Color / Coolors.co
音频处理：Tone.js（环境音效）+ Howler.js（呼吸引导）
性能优化：WebGL渲染 + RequestAnimationFrame
二、视觉呈现要素
1. 环境基底
复制
background: linear-gradient(
135deg,
#83a4d4 0%, /* 冷色调 */
#b6fbff 50%, /* 水色过渡 */
#f5f7fa 100% /* 柔光白 */
);
animation: skyFlow 20s infinite alternate;
2. 动态元素组合
粒子系统：正弦波流动的发光点（使用Three.js PointsMaterial）
呼吸焦点：CSS clip-path生成的多层同心圆脉动
自然隐喻：
缓慢绽放的L-system分形花
柏林噪声生成的流体光带
SVG路径动画模拟羽毛飘落
3. 光影控制
径向渐变模拟环境光
WebGL后期处理：辉光（Bloom）+ 景深效果
三、动画节奏设计
复制
const breathCycle = (target) => {
gsap.timeline({repeat:-1})
.to(target, {scale:1.2, duration:4, ease:"sine.inOut"}) // 吸气
.to(target, {scale:1, duration:6, ease:"power2.out"}) // 呼气
};
四、增强体验设计
1. 交互响应
麦克风输入驱动粒子运动（Web Audio API）
陀螺仪控制的星云旋转（DeviceOrientation API）
2. 多感官融合
3. 个性化设置
可调参数：粒子密度/动画速度/主色调
预设场景：星空模式/海底模式/极光模式
五、关键提示
色彩心理学：使用低饱和度莫兰迪色系
运动曲线：所有动画应用ease-out缓动
设备适配：CSS media查询区分横竖屏
能耗控制：后台标签页自动暂停渲染
00:28
14 05
