Trae AI编程创意实践-DIY粽子应用

article/2025/7/22 5:07:12

创意背景

最近恰逢端午假期,我就萌生了一个想法,能否用AI IDE来帮我实现一个DIY粽子应用,能够制作不同口味和形状的粽子。

过去你如果要实现同样的功能成本或许会非常高,比如你需要学习掌握前端相应的技术栈和完成线上部署解决云服务器和域名等问题。

有了AI IDE,你只需要输入你的想法,能够快速实现你的 MVP(Minimum Viable Product,最小可行产品) 代码,并且还能通过 MCP(Model Context Protocol) 技术实现一键部署至一些云平台上。

开发环境

  • AI IDE:Trae、Cursor等
  • 配置发布到掘金的MCP Server

使用文档:通过 Trae 等 AI IDE 配置 MCP一键发布到掘金:https://juejin.cn/post/7506466734702968847

实现过程

Builder with MCP模式提开发需求

这里选用Builder with MCP模式来实现我们的代码,大模型会根据我们的需求自动调用所需的MCP Server完成功能。

实现的过程遇到以下问题:

  1. 环境和权限问题
  2. 无法本地运行调试

整个过程我们都可以让模型帮我们自动分析和解决问题,我们只需要在必要的时机介入来即可。

一键发布到掘金

前面我们已经配置了一键部署应用到掘金的MCP Server,我们只需要在对话框中提示“将代码部署到掘金”,模型就会帮助我们将工程部署到掘金。

目前掘金只支持纯HTML/CSS/JS项目,我们需要前面写Prompt给模型的时候,要注明这一点。

效果展示

线上预览地址:https://aicoding.juejin.cn/pens/7510158910255431731

功能特点

  • 粽子自定义 :可以选择粽子类型(甜/咸)、形状、馅料、大小、包裹风格和颜色
  • 实时预览 :所有设置变更都会实时反映在预览区域
  • 保存和分享 :可以保存粽子图片或分享给他人
  • 响应式设计 :适配不同屏幕尺寸的设备

总结

本文通过一个简单的实践案例,展示了如何利用AI IDE快速生成一个Web应用,并借助MCP Server实现一键部署至掘金平台。这一过程不仅高效,而且极大地简化了传统开发流程中的复杂性。整个实践中,AI工具在代码生成、逻辑设计以及调试优化等方面展现了卓越的能力,而MCP Server的一键部署功能则进一步降低了将应用上线的门槛。这种全新的研发模式或许将在未来成为一种常态,为开发者乃至产品人员提供了一种前所未有的高效解决方案。

在当今快速迭代的互联网环境中,验证创意想法的速度往往决定了产品的成败。传统的开发模式通常需要投入大量的人力、时间和资源来构建最小可行性产品(MVP),而AI编程的出现彻底改变了这一局面。通过AI辅助开发,我们能够以极低的成本快速搭建出功能完善的MVP,从而更高效地验证市场需求和用户反馈。这种能力在AI编程普及之前是难以想象的,它不仅大幅降低了技术门槛,还让更多非技术背景的产品经理、设计师等角色可以直接参与到产品开发的过程中。

未来已来,AI驱动的技术浪潮正在深刻地改变着软件开发的生态。无论是个人开发者还是企业团队,都可以借助这些工具和技术,在激烈的市场竞争中抢占先机。作为技术从业者,我们有幸亲历并参与这一历史性变革,见证AI如何重塑研发流程、提升生产效率,并推动创新边界不断拓展。让我们一起拥抱这股技术浪潮,探索更多可能性,共同书写属于未来的科技篇章!


http://www.hkcw.cn/article/GdwXpspYfk.shtml

相关文章

在Amazon Q辅助下,半小时开发了一个俄罗斯方块游戏

大家好,我是晓凡 写在前面 在AI的辅助下,晓凡基于HTML、CSS和JavaScript 开发了简单的俄罗斯方块游戏。 小伙伴们可直接跳转文末获取源码。 一、最终效果 二、功能特点 7种经典方块形状(I/O/T/S/Z/L/J)键盘控制(方…

14.Wifi模组(ESP8266)

目录 WIFI 模组讲解 WIFI 模组和 TCP/IP 的关系 常见的 WIFI 模组ESP8266 ESP8266 相关 AT 指令集介绍 AT 指令集的格式 指令分类 1 指令分类 2 与 ESP8266 通信,串口参数如何配置 ESP8266WIFI 设置 3 种无线通信模式: 开发板相关的硬件电路 作为…

13.三种低功耗和RTC实时时钟

目录 低功耗 低功耗的目的 如何降低功耗 如何测量功耗 STM32 中的电源系统 后备供电区域如何实现始终有电 STM32 中的低功耗 睡眠模式 停止模式 待机模式 三种低功耗模式的编程 睡眠模式 停止模式 待机模式 RTC 实时时钟 RTC 实时时钟的作用 实现实时时钟的必要硬件 …

海军舰艇编队辗转多海域实战化演练 锤炼协同作战能力

南部战区海军某训练中心联合某驱逐舰支队组织渭南舰、玉林舰等多艘舰艇,辗转多个海域,展开多个课目训练,检验编队协同作战能力和指挥员决策水平。在编队航行途中,突然接到上级通报,当前活动海区有“敌”无人艇活动,各舰立即进入战斗状态。渭南舰雷达战位迅速发现并上报不…

贾冰瘦脱相 压力给到沈腾 明星瘦身潮引发热议

5月31日,演员贾冰的妻子发布了一段视频,祝福大家端午节快乐,并配文“从此我家多了个瘦子”。在两人合影中,贾冰明显瘦了很多,评论区里大家都在询问他如何瘦下来的。贾冰妻子回复说,主要是通过少吃多运动的方式,甚至一天只吃一顿饭。贾冰本人也在评论区开玩笑说:“一次少…

PyTorch实战——基于生成对抗网络生成服饰图像

PyTorch实战——基于生成对抗网络生成服饰图像 0. 前言1. 模型分析与数据准备2. 判别器3. 生成器4. 模型训练5. 模型保存与加载相关链接 0. 前言 我们已经学习了生成对抗网络 (Generative Adversarial Network, GAN) 的工作原理,接下来,将学习如何将其应…

C++四种类型转换方式

const_cast,去掉(指针或引用)常量属性的一个类型转换,但需要保持转换前后类型一致static_cast,提供编译器认为安全的类型转换(最常使用)reinterpret_cast,类似于c语言风格的强制类型转换,不保证安全;dynamic_cast,主要用于继承结构中&#xf…

得物C++开发面试题及参考答案

HTTP/HTTPS 协议的区别及 HTTPS 加密过程 HTTP(超文本传输协议)是一种用于传输超文本的协议,它是明文传输的,这意味着数据在传输过程中容易被截取和篡改,存在较大的安全隐患。而 HTTPS(超文本传输安全协议…

头歌之动手学人工智能-Pytorch 之优化

目录 第1关:如何使用optimizer 任务描述 编程要求 测试说明 真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。 —— 巴尔扎克开始你的任务吧,祝你成功! 第2关:optim.SGD 任务描述…

RV1126-OPENCV Mat理解和AT函数

一.Mat概念 Mat 是整个图像存储的核心也是所有图像处理的最基础的类,Mat 主要存储图像的矩阵类型,包括向量、矩阵、灰度或者彩色图像等等。Mat由两部分组成:矩阵头,矩阵数据。矩阵头是存储图像的长度、宽度、色彩信息等头部信息&a…

DeepSeek R1-0528模型:五大升级亮点,引领AI推理新高度

在AI技术迅猛发展的浪潮中,模型的迭代升级不断推动着行业的进步。DeepSeek R1-0528模型的推出,犹如一颗重磅炸弹,在AI领域激起千层浪。它究竟有何神奇之处?下面为你揭秘其五大全新升级亮点。 深度思考能力显著提升 DeepSeek R1-05…

司机缺氧离世有5个上学孩子 家庭重担引关注

近日,46岁的河南卡车司机常志荣在青藏高原离世,卡友团队一同将其骨灰接回老家。6月1日,常志荣已经在老家安葬。他去世后,留下了重组家庭的6个孩子,其中5个孩子还在上学。车友任先生透露,常大哥出发青藏线运输前,同行曾建议他至少携带两罐氧气,但他为省下30元费用,最终…

迪士尼情侣和一家三口打架 拍照争执引发冲突

6月1日,浦东公安分局接到报警称迪士尼乐园内发生打架事件。初步调查显示,闫某某(男,22岁)与女友在拍照时,因刘某某(男,36岁)夫妻的女儿进入拍摄画面,双方发生口角并引发肢体冲突,造成闫某某和刘某某互有皮外伤,小女孩未受伤。目前,调查处理工作正在进行中。当天,…

温度计“液泡”是什么,温度计为什么能测温?

温度计“液泡”是什么,温度计为什么能测温? 液体膨胀式温度计介绍 最近,有位小朋友说,他看的一本科普书上说:把温度计插在水里,水分子就会对液泡产生撞击,液泡里面的分子就会跟着动起来&#x…

C++学习过程分享

空指针:int *p NULL; 空指针:指针变量指向内存中编号为0的空间;用途:初始化指针变量注意:空指针指向的内存不允许访问注意:内存编号为0-255为系统占用空间,不允许用户访问 野指针:…

【IC】RTL功耗高精度预测

介绍 美国能源部(DOE)的一份综合报告“半导体供应链深度潜水评估”(2022年2月)呼吁将能源效率提高1000倍,以维持未来的需求,因为世界能源产量有限。能源效率是当今设计师的首要任务。能源效率的整体方法必…

美国要求澳大利亚上调军费 提升至GDP的3.5%

当地时间6月1日,美国国防部长赫格塞思在新加坡会见了澳大利亚副总理兼国防部长理查德马尔斯。双方讨论了美澳联盟的关键优先事项。赫格塞思在会谈中建议澳大利亚尽快将国防开支提高到国内生产总值的3.5%。尽管澳大利亚不是北约成员国,美国总统特朗普此前曾多次要求北约成员国…

高反缺氧去世卡友已回老家下葬 留下6个孩子引关注

近日,46岁的河南卡车司机常志荣在青藏高原不幸离世。他的卡友团队一同将其骨灰接回老家,并于6月1日在老家安葬。常志荣去世后,留下了重组家庭的六个孩子,其中五个孩子还在上学。车友任先生透露,常志荣出发前曾被建议至少携带两罐氧气,但他为了节省30元费用,最终只购买了…

亚历山大本赛季两战步行者场均39分 雷霆双胜步行者

NBA总决赛的对阵双方是雷霆和步行者。本赛季两队交手两次,雷霆分别以120-114和132-111取胜。这两场比赛中霍姆格伦都没有出战。亚历山大在这两场比赛中的表现非常出色,场均能够贡献39分、7篮板、8助攻、1抢断和1盖帽,场均罚球次数达到11.5次,真实命中率为71.1%。在面对步行…

六地将有大到暴雨 端午出行需谨慎

中央气象台今日6时继续发布暴雨蓝色预警和强对流天气蓝色预警。福建、广东、广西等六个地区将出现大到暴雨,多地还将遭遇8级以上的雷暴大风或冰雹天气。正值端午假期最后一天,出行前请务必关注天气情况。责任编辑:zhangxiaohua