小白也能设计高颜值软件!一款开源免费AI提示词生成工具,支持1比1还原设计,一键复制到Codex、Claude等使用

点击下方【开源放大镜】 "关注"、选择  "设为标星"

每天三分钟、打卡阅读

最快获取全网学习干货、行业资讯

前言

在使用Codex设计软件的时候，大多数人都会遇到一个问题：怎么让Codex按照自己的描述设计出一样的软件。

对于非专业人员而言，往往输入的提示词跟输出的产品是不匹配的，经常出现浪费大量Token，但是没有得到理想的软件。

今天给大家安利一款提示词生成工具，它支持你直接绘制UI界面，然后一键生成AI软件的提示词，实现1比1还原UI界面。

简介

M3E是一款开源免费的AI提示词生成系统，专为AI小白设计，可生成1比1还原UI设计的AI提示词。系统集UI提示词生成、100+主流组件、屏幕连线、点击滑动跳转、主题定制、预览走查、AI辅助等核心功能于一体，可一键生成结构化、可直接喂给AI编程工具的自然语言Prompt，帮助用户快速设计各类软件界面。

系统基于Next + React + TypeScript主流技术栈构建，支持静态部署，界面美观大气，操作简单流畅。十分适合小白用户、个人开发者、中小型UI设计团队、产品经理等用户快速开发各类产品使用。

功能列表

• 拖放组件：

• 内置按钮、图标按钮、FAB、拆分按钮、FAB菜单、标签片、应用栏、导航栏、悬浮工具栏、标签页、搜索栏、卡片、列表、对话框、消息条、文本输入框、下拉菜单、开关、复选框、单选按钮、滑块、图片、相机和地图占位符等30多种组件，用户可自由组合，设计不同的产品界面。

• AI工具提示词输出：

• 支持对整个设计或单个屏幕一键变成简洁的自然语言提示词，中文、英文、日文、韩文四语可选，一键复制粘贴到Claude Code、Codex、Gemini CLI、Cursor等AI工具即可1比1还原。

• 磁吸连接：

• 支持按钮、列表项拖近自动合并成相连的组，相同一组操作按钮无需手动对齐间距，凑近即成一体，有效提高设计效率。

• 交互管理：

• 支持任意可点击组件、应用栏图标、导航栏项目设置目标屏幕和过渡动画等效果，满足不同用户的使用需求。

• 滑动跳转：

• 支持设置屏幕上下左右滑动的跳转目标，预览时屏幕跟随手指移动。

• 主题定制：

• 内置配色七套主题方案，浅色深色、三档对比度、可跟随壁纸的动态配色，用户可自定义主题搭配。

• AI辅助：

• 原生集成OpenAI、Claude、Gemini、DeepSeek等主流大模型，在界面用既然语言描述需求，即可实现AI自动创作，密钥仅存在浏览器，请求直连服务商，无任何中间存储。

功能截图

编辑器界面：

预览走查：

提示词输出：

手机编辑：

功能导航：

AI绘画：

系统架构

架构组成：

├─ 画布编辑层（Editor）│  ├─ 30+ Material 3 Expressive组件│  ├─ 磁吸连接与自动成组│  ├─ 手机412×892 / 桌面1280×800双屏│  └─ 图层面板 / 编组 / 对齐辅助线│├─ 交互与预览层（Preview）│  ├─ 点击跳转（四向滑入 / 淡入 / 放大）│  ├─ 滑动跳转（跟随手指）│  ├─ 切换按钮（点击翻转图标样式）│  └─ M3 Expressive加载动画（形状渐变 / 波浪进度）│├─ 主题系统层（Theme）│  ├─ 配色：7预设 / 基准色生成 / 动态取色│  ├─ 形状：方形 / 圆角 / 全圆一键切换│  ├─ 字体：Roboto / Flex / Serif / 系统│  └─ 动效：标准 / 弹簧方案│├─ 输出层（Prompt & Export）│  ├─ 四语言自然语言提示词（Android / Web目标）│  ├─ 一键整理与撤销│  ├─ PNG导出 / 分享链接 / AI代理指令│  └─ AI辅助（BYO Key直连服务商）│└─ 基础框架层（基于Next.js静态导出）   ├─ TypeScript + React组件   ├─ 浏览器localStorage自动保存   ├─ 手机端简易编辑器   └─ GitHub Pages自动发布

技术栈：

开发语言：TypeScript框架：Next数据存储：浏览器localStorage部署方式：GitHub Pages在线版 / npm本地构建 / 任意静态托管自部署AI接入：OpenAI / Claude / Gemini / DeepSeek

快速开始

1、下载源码： 文后获取

cd m3e-canvas

2、安装部署：

cd m3e-canvasnpm installnpm run dev

更新进度

1000+优质开源项目更新进度：44/1000。如需更多类型优质项目推荐，请在文章后留言。

开源地址

点击下方小程序   进入  开源项目  获取！（文件夹名称跟上面的更新期数一样） 

往期精彩

别再装到处找好用的远程工具了，这一个就够用了！

功能夯爆了！一款基于Spring Boot + AI + OCR的智能失物招领系统，支持以图找物、多轮对话与地图寻物，可开箱即用

获取更多精彩内容和开源项目  ，请关注微信公众号！ 

免责声明

1、本文所分享的软件、代码或资源，均来自开源社区，遵循其原始许可证（如MIT、GPL等）。仅供学习和研究使用，严禁用于任何违法行为。2、使用者在下载、部署或使用本项目（或文中提及的软件）时，需自行判断其适用性与合法性，由此产生的一切风险与责任均由使用者自行承担。3、我们尊重原作者的知识产权，已在文中注明来源及原始作者（如有遗漏，请联系我们及时更正或删除）。4、本文不对开源软件的安全性、可用性或完整性做任何保证，亦不承担由其引发的任何直接或间接损失责任。5、若您为相关软件/资源的版权方，对内容有异议，请联系我们，我们将在第一时间处理

商务合作、软件开发、项目推广、GPT账号、GPT-PLUS，请联系：

关注就是赚到！更多优质开源项目，请查看：