11:39学了100小时后,我才发学习MCP的最佳方式是这个!
花叔用亲手构建一个图片生成MCP服务的方式解释工具连接:把MCP官方资料、TypeScript示例和图像模型调用说明交给AI,让它在网页开发时规划配图、生成图片并填回页面。实操从新建项目、配置模型服务到编译排错,再用球鞋电商首页检查结果,最后展示将代码发布到社区的步骤。教程特别区分服务代码和使用者自己的密钥配置,让功能能够重复使用。
花叔的工作台 / 视频手记
AI工具实测、独立开发与内容创作。先看要点,感兴趣再看完整实践。
用AI做产品 74条
11:39花叔用亲手构建一个图片生成MCP服务的方式解释工具连接:把MCP官方资料、TypeScript示例和图像模型调用说明交给AI,让它在网页开发时规划配图、生成图片并填回页面。实操从新建项目、配置模型服务到编译排错,再用球鞋电商首页检查结果,最后展示将代码发布到社区的步骤。教程特别区分服务代码和使用者自己的密钥配置,让功能能够重复使用。
14:25花叔把小猫补光灯扩展到网页端,用CodeBuddy配合CloudBase,从开发模板出发完成前后端演示。视频按小步迭代推进:先实现全屏换色,再修改布局、加入自拍预览与拍摄,最后连接云端存储、相册和公开访问链接。过程中保留依赖缺失、界面不合预期和MCP连接问题的修复,展示不会写代码的人如何通过描述需求、检查结果和补充反馈推进产品。
14:32本期梳理Cursor1.0的主要更新,演示Bugbot连接GitHub审查代码、BackgroundAgent在云端执行任务,以及Memories记录偏好。视频还介绍MCP图形化配置、对话中呈现图表和用量看板,交代当期功能开关、仓库前提与额外计费等条件。结尾提醒初学者以要做的产品为中心,按实际需要逐步使用功能,避免把掌握工具全部选项当成目标。
11:49DeepSeek R1更新后,花叔用交互专题页、小游戏、画板、翻译、风格写作和图片画廊等任务观察变化。演示中既有页面交互失效、画线偏离鼠标等问题,也有通过自然语言反馈修好画板的过程;翻译与脱口秀脚本则留给观众对照判断。最后他把画廊的图片对应和动画效果与Claude生成结果比较,同时明确单个小任务的优势不足以证明整体编程能力领先。
14:50本期介绍ClaudeOpus4和Sonnet4发布时的定位,围绕扩展思考与工具调用、并行执行、文件记忆和长任务持续性讨论它们对智能体的意义。实测部分用Cursor生成模型介绍网页,并以同一套提示词制作播客应用原型,对照旧版Claude及Gemini的结果。花叔主要从需求遵从、界面细节和交互完成度评价体验,同时区分普通编程任务与更复杂任务的模型选择。
15:26花叔尝试复刻《坦克世界》一个PVE玩法的部分机制,用AI生成坦克图片与3D资产,再借Unity和DeepSeekV3逐步实现移动、射击、敌人刷新与场景配置。视频讲解对象、组件、脚本和资源导入,也呈现碰撞设置不当导致坦克掉出地面的失败。最终得到的是粗糙的可玩Demo;作者明确指出,它距离商业游戏的完成度、氛围与细节仍很远,创意拆解和持续调试依然由人推动。

8:51本期挑战通过通义手机App配合Xcode开发「小猫爱心眼」。花叔从小红书用户拍摄爱心眼的行为发现需求,将动态爱心视频转成可切换颜色和动效的应用,再演示描述需求、复制代码、反馈报错、运行测试和准备上架信息的过程。视频强调产品先解决实际问题,并提出一周获得一万用户的挑战目标,但本期尚未验证目标是否实现。
11:40本期利用腾讯元宝接入DeepSeek V3和HTML预览的能力,连续展示七种网页生成场景:简历、公众号排版、数据图表、活动官网、个人主页、会议纪要和复杂文档可视化。视频保留了追加要求、调整颜色与布局的过程,也指出个人主页生成的信息有错误。重点是把已有材料整理成可见、可分享的成果,并通过持续反馈改进输出。
24:03借B站十万粉奖牌和新书出版两个节点,花叔回顾离开大厂两年的探索:从提示词分享进入视频创作,借真实使用经验获得咨询机会,再通过AI编程持续做产品,小猫补光灯成为其中的重要转折。他也分享旅居生活与自主工作的感受,强调这些结果并非预先规划,包含运气和长期尝试;给想转型的人最直接的建议,是保留生活余地,从自己愿意反复做的事情开始。
10:42本期用豆包电脑版完成三个练习:图片压缩网页、B站数据图表和长文翻译网站。演示从自然语言需求出发,直接预览HTML或运行Python,再根据下载失败、坐标轴显示和运行报错继续修改。更复杂的翻译任务则生成前后端文件、调用模型接口并导出项目。视频强调版本切换、代码注释和真实结果检查,鼓励先做解决自己具体问题的小工具,不必一开始就追求完整商业产品。
18:46本期使用Trae和Xcode演示一款本地待办应用从需求到提交审核的过程。先让AI梳理「以终为始、要事第一」的产品思路,生成六个界面的可交互原型,再把需求文档和截图交给Builder实现。视频保留编译错误、界面异常及修复过程,随后制作图标、打包上传并填写商店资料。最终到达提交审核阶段,而应用体验与细节仍有继续优化的空间。

4:28本期围绕「丑咪排行榜」介绍Zion无代码平台的使用:上传猫咪照片获得AI评价,并把用户登录、点数、支付和历史记录接入同一产品。花叔说明,此前模型调用成本与支付接入使产品难以放量,这次通过可视化数据库和行为流补全流程,同时分别调用视觉理解与文本生成能力。视频展示了支付后恢复点数及继续体验,但没有提供长期运营或盈利数据。
30:42在Manus内测引发讨论的时期,花叔参与圆桌,和其他UP主区分大模型、聊天应用与智能体,并现场查看象棋游戏、旅行攻略、个人主页等任务结果。花叔结合信息采集与应用开发体验,分享任务拆解的价值,也指出长上下文中断、细节控制和交付可靠性的问题。讨论进一步延伸到通用与专用智能体的关系,以及普通人如何从具体生活需求出发试用AI。
14:16本期演示Cursor配合Claude 3.7 Sonnet生成多界面高保真App原型,并讲解提示词如何经过多轮试错形成。为减少长代码截断,作者改用Agent模式,将每个界面拆成独立HTML,再汇总平铺展示。视频依次检查播客、社区和影音等原型,最后现场生成图文视频社交应用,并修复缩略图与设置页,说明视觉原型仍需逐项查看和反馈。
13:18花叔演示「先做可视原型,再转成应用初版」的AI开发流程,用Cursor和Claude 3.7制作习惯养成应用。第一步让AI分析需求、规划页面,再以HTML集中展示多个界面;第二步创建Xcode项目,把原型作为参考继续生成iOS代码。过程中展示长代码被截断的补全方法、编译报错的反馈修复,以及添加习惯、打卡和统计界面的检查,并明确初版距离正式上架仍有工作。
10:56本期把DeepSeekR1的文本生成与Claude的开发能力组合起来,用Cursor制作「红薯吐槽机」。用户输入公开主页链接后,网站先获取适合模型阅读的内容,再调用模型生成幽默文案;随后逐步补充头像昵称、界面样式和Firebase数据保存。视频强调一次只交给AI相对有限的任务,并用实际抓取结果补足上下文。内容展示开发与迭代,部署步骤则指向已有教程。
18:14本期介绍Claude 3.7 Sonnet的混合推理与编程特点,讨论为什么应结合真实软件任务和人类偏好评估模型,而不只看竞赛跑分。演示包括网页开发盲测、天气动效页面、参照截图复刻首页,以及将文章整理为SVG信息卡。视频也介绍Cursor中常规与思考模式的选择;Claude Code当时尚未取得测试机会,相关判断属于初步观察。

13:00本期针对DeepSeek服务拥堵,梳理本地蒸馏模型、云API、自租服务器和第三方整合产品四类使用路径,再介绍Perplexity、秘塔、Cursor、Windsurf、Monica及自制的DeepSeek伴侣。视频按搜索、文档编辑和聊天等需求说明差异,最后用批量生成脱口秀内容的脚本说明,API还可服务于自动化流程,不只是接入聊天界面。
8:10旅居时常遇到猫咪,花叔由此搭建一个能通过图片和视频交流的「猫咪顾问」。他在阿里云百炼创建应用,连接知识库、选择视觉模型,并写清角色、品种辨别与评分流程,再分别用图片和视频通话测试。发布后,他在曼谷街头对着一只猫进行实地演示,观察回答速度和是否遵循资料中的评价标准。教程展示了知识检索、多模态理解与可视化配置如何组合成小应用。

14:27花叔把Cursor与Windsurf的比较集中在一个实际问题:AI是否读到了完成任务所需的文件内容。他用长字幕文件测试普通对话、智能体模式和指定文件的差异,观察不同工具如何搜索、截取与补读上下文,再结合新手起步和复杂项目给出选择建议。视频最后建议及时记录项目结构与进度、控制文件复杂度,并在阶段任务完成后开启新对话,减少无关上下文干扰。
公开视频提供字幕整理的摘要与章节;充电专属内容请到B站查看。