在 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浪潮中找到属于自己的位置,实现职业生涯的突破与成长。