号外!我用Trae+Claude3.7开发的小程序上线啦

在 5 分钟打造超酷小程序设计稿,Trae+Claude 3.7 太神了!文章里,我们用 AI 生成了小程序的设计稿。然后在 30分钟开发完成!Trae+Claude 3.7 打造小程序全流程揭秘!里,我们用 AI 开发了小程序的全部代码。在 AI 的加持下不到两小时就完成了小程序上线的准备工作。今天它终于上线啦!

图片

可以扫描小程序码体验效果。

这里我再把生成设计稿和代码的提示词复制一下,大家可以直接使用。

生成设计稿

### 你是谁

你是一位资深全栈工程师和设计工程师,拥有丰富的全栈开发经验和卓越的审美能力,擅长现代化设计风格,尤其精通移动端设计与开发。

### 你要做什么

1. 需求分析与构思

- 用户将提供一个【App需求】。

- 以产品经理的视角,分析需求并构思网站的功能需求和信息架构。

- 自行定义网站的主题、目标用户和核心功能,确保设计与需求的契合度。

2. UI/UX 设计与开发

- 根据构思的功能需求,使用 HTML 和 Tailwind CSS 设计高质量的 UI/UX 参考图。

- 按功能模块划分(每个功能可能包含多个页面),为每个功能输出一个独立的 HTML 文件。

- 每个 HTML 文件中包含该功能的所有页面,页面以横向排列的 mockup 边框形式展示,彼此独立且互不干扰。

- 每完成一个功能的 UI/UX 参考图后,提示用户“是否继续”。若用户回复“继续”,则根据步骤设计并输出下一个功能的 UI/UX 参考图。

### 具体要求

1. 设计标准

- 设计需高级且有质感,运用玻璃拟态等视觉效果提升层次感。

遵守现代化设计规范,注重 UI 细节,确保界面美观、直观且用户友好。

- 特别关注移动端响应式设计,确保在不同设备上均有良好展示效果。

2. 技术实现

- 使用 Tailwind CSS CDN(例如 `https://cdn.tailwindcss.com`)完成样式设计,避免手动编写内联或外部 CSS。

- 图片素材从 Unsplash 获取,确保高质量且与设计风格匹配,界面中不得出现滚动条。

- 图标使用 Lucide Static CDN 引入(格式如 `https://unpkg.com/lucide-static@latest/icons/XXX.svg`),保持一致性和易用性。

- 每个功能的页面在单个 HTML 文件中实现,使用简单的 mockup 边框(例如虚线或阴影)分隔,横向排列,互不影响。

3. 代码规范

- 代码需简洁高效,易于维护,避免复杂的嵌套和冗余选择器。

- 仅在最终输出结果中提供完整的 HTML 代码,思考过程不包含代码片段。

请帮我设计:面向年轻用户的倒数日App

生成代码

你是一位资深前端工程师,拥有丰富的前端和微信小程序开发经验,请根据我的要求开发一个倒数日应用:
1. 使用微信小程序原生技术初始化项目
2. 主要功能包括我的倒数日、添加倒数日、倒数日详情
3. 根据我上传的设计稿截图开发,尽可能还原设计稿

今天这篇文章内容比较轻松,讲一下微信小程序发布的流程:

注册小程序

图片

填写小程序基本信息

图片

邮箱验证

图片

登记信息

图片

提交成功

图片

注册完成后,微信会给我们分配一个 AppID(小程序ID),后面会用到。

小程序信息

注册完成后要发布小程序还需要完成以下几步,补充小程序基本信息补充小程序类目小程序备案微信认证。其中微信认证是可选的,只有认证之后小程序才能被搜索和分享,个人主体的认证费用是30元/年。我们暂时先不认证,只完成前三步。

图片

小程序名称

我给小程序起了个萌萌的名字《萌鸡倒数》,小程序的头像我们当然也要用 AI 生成,这里我选择即梦,提示词如下:

简笔画风格卡通小鸡,左爪佩戴圆形电子手表,流畅黑色轮廓线配淡彩填充,扁平化矢量插画效果 。

图片

生成的图片第四个还不错,我就选择第四个。

图片

按照以上提示完善信息。

小程序类目

填写小程序类目,我选择“工具 > 备忘录”

图片

小程序备案

这一步需要的时间较长,提交备案完成后等待就行,备案通过后会有工信部的短信提示。

图片

小程序开发与管理

小程序开发与管理这里可以不用填,我们的开发者就是自己(AI)。

图片

体验版小程序

上面的步骤完成后,我们就可以在手机上体验小程序了。打开微信开发者工具,在详情里填写上上面分配的AppId。然后点击上传。

图片

在微信小程序后台可以看到线上版本、审核版本、开发版本。

图片

其中开发版本可以选为体验版,可以在手机上预览。

图片

提交审核版本

然后把体验版本提交审核:

图片

审核中的版本,等待微信审核,预计在1~7天。

图片

审核通过

审核通过之后微信会发通知提示,然后就可以发布上线了。

总结

作为每天一线接触 AI 产品的开发者,我深深感受到“AI一天,人间一年”的震撼。AI 对我们职业生涯已经产生了深刻的影响。每天面对 AI 产品的快速更新,甚至有种明天就是职业生涯末期的紧迫感。许多常规编程任务逐渐被取代,开发者不得不直面职业转型的压力。

然而危中有机,AI 技术带来的不仅是挑战,更是无限机遇。在 AI 助力下,今后会有越来越多的一人公司出现。我也会深入此变革浪潮,实践一个公司的可能性,感兴趣的朋友可以持续关注。也希望大家通过持续学习可以在AI浪潮中找到属于自己的位置,实现职业生涯的突破与成长。