Codex的最佳助手!一款开源AI提示词生成工具,支持1:1还原UI设计,普通人也能做出高颜值、去味的软件

点击下方【IT学习日记】 "关注"、选择  "设为标星"

每天三分钟、打卡阅读

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

前言

大家好，我是日记！

使用Codex、Claude等智能体设计和开发时，我会经常遇到的一个问题：不知道如何跟它们描述才能设计出自己想象中UI界面，每次浪费大量Token，但是设计出来的产品总是不够理想，需要反复修改，不仅浪费Token，还要花大量时间。

界面颜色搭配如何、按钮如何排放，按钮大小、按钮之间的交互等等。总感觉AI落地还差一口气，如果要详细的写Prompt，那将是非常大的工程，要花费大量时间，而且还可能因为不同模型的Prompt理解不一样，输入的跟输出的也可能达不到想要的效果。

最近我在社区中看到一个项目，刚好完美解决这个问题，它可以基于界面设计生成适配不同模型的Prompt，可以一键复制到Ai Agent工具(如：Codex、Claude等)中完美1比1还原出跟设计图一样的产品，简直是AI开发必备工具。

简介

M3E是一款MIT协议、开源免费的产品设计提示词低代码生成工具，专为 AI Coding 场景设计，打通了UI设计、交互原型、AI编程Prompt生成、产品输出的完整链路。

系统集拖放组件、磁吸连接、功能交互、主题定制、UI设计提示词输出、AI辅助、分享协作等功能于一体，用户可在浏览器中拖拽组件快速设计各种产品UI界面，一键生成AI编程提示词，实现1比1还原设计的产品开发。

系统采用纯前端静态架构设计，基于主流技术栈Next + TypeScript + localStorage构建，所有设计数据保存在浏览器本地，无需注册、无需服务器，可开箱即用，十分小白用户、个人开发者、UI设计师、中小型企业等用户快速使用设计开发各类AI产品使用。

功能列表

• 组件画布：

• 支持拖放按钮、FAB、拆分按钮、FAB菜单、标签片、应用栏、导航栏、悬浮工具栏、标签页、搜索栏、卡片、列表、对话框、消息条、文本输入框、下拉菜单、开关、复选框、单选按钮、滑块、图片、相机地图占位符等30+常用组件，基本覆盖各类系统的设计需求。

• 支持磁吸连接，两个按钮、列表项靠近自动融合成组，圆角随之接合，有效提高用户设计效率。

• 支持M3 Expressive加载动画，包含形状渐变的Loading Indicator、波浪形线性、圆形进度条等。

• 提示词生成：

• 支持整个设计产品、单个屏幕输出简洁自然语言提示词(日文、英文、中文、韩文四语可选)，快速应用到Ai Agent产品中(Codex Claude、Cursor等)，1比1还原出符合UI设计的产品。

• 支持组件行为说明一并写入提示词，目标平台可选Android（默认）和Web，提示词按对应技术栈书写，满足95%使用场景。

• 支持一键复制提示和手动编辑提示词，用户可根据个人需求优化，满足不同用户的使用习惯。

• AI辅助：

• 支持OpenAI、Claude、Gemini、DeepSeek主流模型集成，可使用模型设计用界面组件行为，有效提供开发效率。

• 支持改写撤销操作，密钥仅存浏览器，所有请求直连服务商无任何中间服务器，全方位保障数据安全。

• 屏幕管理：

• 支持任意数量屏幕的添加、命名、背景设置等基础功能，拖动屏幕即可整体移动，简单方便。

• 支持手机尺寸412×892和桌面尺寸1280×800两种尺寸间切换，导航栏可自动适配成侧边栏，组件重新排列。

• 导航连线：

• 支持给任意可点击组件、应用栏图标、导航栏项目设置目标屏幕和返回操作，过渡动画如滑入、淡入、放大。

• 支持把任意按钮设计成点击切换的开关，开启时可自定义文字、图标和样式行为。

• 主题管理：

• 支持内置七套预设主题，支持浅色、深色、三档对比度和跟随壁纸的动态配色。

• 导出管理：

• 支持设计产品保存为PNG文件。

• 支持分享链接方便他人浏览和协作设计。

功能截图

首页：

提示词生成：

组件选择：

配色选择：

AI模型配置：

AI绘制：

系统架构

项目结构：

├── src/                        # Next.js 前端源码│   ├── components/             # UI组件（组件面板、画布、属性编辑等）│   ├── hooks/                  # 自定义React Hooks│   ├── store/                  # 状态管理（Zustand）│   ├── types/                  # TypeScript类型定义│   └── utils/                  # 工具函数（Prompt生成、导出等）├── public/                     # 静态资源│   └── agent.md                # AI代理指令模板├── .github/workflows/          # GitHub Actions CI/CD│   └── deploy.yml              # 自动部署到GitHub Pages├── package.json                # 依赖管理└── next.config.js              # Next.js配置

技术栈：

前端：  核心框架: Next.js（TypeScript）  数据存储: 浏览器localStorage（自动保存）  字体来源: Google Fonts（Roboto / Roboto Flex / Roboto Serif）  图标来源: Material SymbolsAI辅助：  接入方式: 自带密钥（OpenAI / Claude / Gemini / DeepSeek）  通信路径: 浏览器直连服务商，无中间服务器部署：  官方在线版: GitHub Pages  自托管: 任意静态托管，子路径部署设NEXT_PUBLIC_BASE_PATH  本地开发: npm run dev（http://localhost:3000）

快速开始

1、环境准备：

Node（本地构建）

2、源码运行： 文后获取

cd m3e-canvasnpm installnpm run dev

更新进度

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

开源地址

往期精彩

开源版“豆包”！一款开源免费的AI创作工作台，内置无限画布、支持文生图 + 图生图 +AI视频 +多模态对话，可开箱即用

NAS神器！一款开源的异地组网工具，支持多组网并行 + NAS远程访问  + 远程办公 +游戏联机，可开箱即用

AI应用开发神器！一款开源免费的低代码AI应用开发平台，支持可视化工作流、RAG知识库、Agent智能体、多模型接入和私有化部署

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

免责声明

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

商务合作、软件开发、项目推广，请联系：

关注就是赚到！新开了一个账号，主要分享一些更接地气、可落地，可商用的优质开源项目，有兴趣的可以关注下：