首页 > 原创文章 > 技术应用 > 查看文章

用AI做微信小程序原型图的提示词

所属分类:技术应用 来源: 网络收集整理 更新时间:2025-08-18 08:19 IP属地: 深圳
点击阅读全文
#通用微信小程序原型生成提示词

#角色设定与技术要求
您是一位世界级的全栈工程师,同时精通产品规划和UI/UX设计。现在需要开发一款微信小程序,要求输出一套完整的微信小程序原型图。
请严格按照以下要求执行:

#核心技术规范
使用Tailwind CSS框架,禁止编写自定义style样式。
集成Unsplash图片库获取高质量素材。
确保界面无滚动条出现,保持视觉整洁。
采用标准微信小程序尺寸比例(375x667像素)。
所有页面统一集成在单一HTML文件中,通过mockup边框预览形式横向排列展示。

特别禁止:不得使用localStorage、sessionStorage等浏览器存储API,必须使用内存存储方案。

#设计系统要求
配色方案:采用{配色风格},避免{避免颜色},严禁使用{禁用配色}。
视觉效果:严格控制装饰元素使用,避免过度的{视觉限制}。
图标系统:使用手绘SVG图标,严禁使用emoji表情符号,禁用简单色块占位符。
组件多样性:采用列表式、卡片式、表格式等多种布局形式,避免设计元素单一化。
专业度:确保界面具备企业级产品的成熟度和专业感。
角色差异化:根据不同用户角色设计专门的界面流程和底部导航结构。

#产品开发流程
第一步:模拟产品经理视角,基于真实用户使用场景和需求进行功能规划。
第二步:构建完整的信息架构,包含用户角色分析、核心功能模块和页面交互流程。
第三步:以设计师视角输出完整的UI/UX方案,注重细节处理和用户体验优化。
第四步:验证业务闭环完整性,确保覆盖从用户获取到服务交付的全流程,避免冗余功能。

#微信小程序特性适配
登录系统:集成微信授权登录和手机号验证。
多用户支持:通过用户ID实现数据隔离。
用户权限:设计不同角色的功能权限管理。
原生体验:遵循微信小程序设计规范和交互模式。
技术约束:考虑微信小程序API限制,确保所有功能在实际环境中可实现。

#输出质量标准
界面层次:运用合理的视觉层级和信息密度。
细节精度:确保文字排版、间距控制和对齐精确。
交互反馈:提供状态指示、加载提示和操作确认。
业务完整性:覆盖核心业务流程的所有关键节点。
行业深度:深入理解目标行业的监管要求、专业标准和合规性需求。

#分批交付机制
采用分批确认的开发模式。每完成一批核心页面后暂停,等待确认反馈后继续后续页面开发。
这种方式确保设计方向准确性并支持迭代优化。

#质量验收标准
最终交付的原型必须达到可直接投入开发使用的标准,包含完整的用户流程、清晰的功能逻辑和专业的视觉呈现。
设计应体现对目标行业特性的深度理解,通过合适的配色、布局和交互设计营造符合业务定位的品牌形象。所有设计元素必须基于现有技术栈可实现,避免需要大量自定义开发的复杂效果。

#具体项目需求配置
现在需要为{行业领域}开发小程序,主要服务{用户角色列表},核心功能包括{核心功能列表},特殊要求为{特殊需求描述},行业监管要求为{合规要求},技术约束条件为{技术限制}。

#参考示例
基于在线教育行业的成功实践,该提示词已经过完整验证,能够生成专业级的微信小程序原型设计。通过以下关键要素实现高质量输出:
设计系统示例:采用浅色暖色调配色方案,使用edu-blue、edu-green、edu-orange等语义化色彩变量,确保视觉一致性和专业感。
功能模块示例:包含用户引导流程(启动页、角色选择、首页)、核心业务模块(课程管理、作业系统、直播功能)、学习跟踪系统(进度管理、成绩统计、证书颁发)和个人中心功能。
交互设计示例:实现多角色底部导航差异化、状态管理和反馈机制、以及符合微信小程序规范的页面转场和组件交互。
通过明确的技术规范、设计要求和质量标准,这套提示词可以在不同行业项目中实现一致的高质量输出,确保生成的原型设计既符合行业特性又满足技术实现要求。

使用说明:
将花括号内的占位符替换为具体项目需求:

{配色风格} → 如"浅色暖色调"、"商务深色系"等
{避免颜色} → 如"深色或过于饱和的颜色"
    {禁用配色} → 如"蓝紫渐变色" (建议加上,防止AI味的UI)
    {视觉限制} → 如"渐变、玻璃效果和圆角设计" (建议加上,防止AI味的UI)
{行业领域} → 如"医疗健康"、“金融科技”、"电商零售"等
{用户角色列表} → 如"患者、医生、管理员"
{核心功能列表} → 具体业务功能描述
{特殊需求描述} → 行业特有需求
{合规要求} → 相关法规和标准
{技术限制} → 技术约束条件


下一篇:没有了

相关文章

counter和offset分页方式解析

目前国际主流通用的分页方式是使用counter和offset来计算,包括restful调用、接口以及各种应用对接,大多数API端点都遵循相同的约定来返回结果的后续页面。那么这个分页方式到底是怎么使用的呢?其中,counter(有时候也叫...

jquery tablesorter fil...

在使用前端jquery插件,tablesorter做表格排序和搜索时,遇到了一个问题,就是已经加载了jquery.tablesorter.js和jquery.tablesorter.widgets.js,但是在表格中的input输入关键...

微信小程序生成AppSecret时提示-1是...

最近有同学在开发微信小程序时,在小程序后台进行appsecret配置,但是却返回了-1,如图:短时间内试了多次都不行,一直报错。引起这种情况,一般是微信小程序某些参数没有配置正常,而引起的服务端返回的问题。遇到这种问题时怎么办?1.检查...

fontawesome所有图标class类名...

fontawesome所有图标class类名单,适用于4.7.0版本。总计有593个图标class类(包含别名):fa-500pxfa-address-bookfa-address-book-ofa-address-cardfa-add...

推荐文章

小红书个人账号/认证账号/企业号区别一览

普通账号个人认证号企业认证号蓝色认证标识薯条推广聚光平台效果广告普通应商业合作以KOL/KOC身份和品牌合作以品牌方身份发起起合作开设店铺个人店铺或个体户(不支持港澳台公司申请)旗舰店店或专卖店(支持港澳台公司申请)主动私信每天10位陌生用...

丁老师软件推出图片在线加水印功能

丁老师软件,推出图片在线加水印功能,支持图片和PDF文件加水印,可以添加文字水印、图片水印,文字水印支持调整文字大小、文字颜色、位置、透明度等,添加水印后可以自动生成文件,可以下载。在线添加图片水印地址https://www.dls6.co...

使用photoshop编辑文字时,弹出的文字...

今天有同学在群里提问,在使用photoshop编辑文字时,经常会弹出一个文字选择的面板如图:这时文字也无法输入,也无法取消和关闭,很是烦人,怎么取消这个功能呢?经过丁老师研究,方法很简单:1.打开photoshop菜单-编辑2.选择首选项-...

AI工具大全:好用的AI工具推荐(持续更新中...

这几年AI技术的发展已经达到新的高度,从提高个人生产力到企业操作效率的各个方面,AI都扮演着不可或缺的角色。无论是进行语言交流、内容创作、或是任务管理,都有相应的AI工具可以帮助我们更加轻松地完成工作。以下是丁老师觉得不错的AI工具推荐,希...

QQ咨询 微信咨询