↓

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

·175 字·1 分钟
AI

在 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. 根据我上传的设计稿截图开发，尽可能还原设计稿

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

注册小程序 #

https://mp.weixin.qq.com/cgi-bin/wx

填写小程序基本信息 #

邮箱验证 #

登记信息 #

提交成功 #

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

小程序信息 #

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

小程序名称 #

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

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

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

按照以上提示完善信息。

小程序类目 #

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

小程序备案 #

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

小程序开发与管理 #

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

体验版小程序 #

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

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

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

提交审核版本 #

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

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

审核通过 #

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

总结 #

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

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