与AI共创:从创意设计到应用执行
这篇文章讲述了AI工具如何变革创意设计到应用执行的过程。从Figma Make等工具的推出,到AI驱动的提示编程,设计师和产品经理现在能够更高效地将创意转化为原型,无需依赖开发工程师。通过具体案例,如用Figma和DeepSeek快速构建聊天机器人和仪表盘,文章展示了AI如何赋能设计和开发流程,加速产品从概念到原型的转变。
变革已经开始
太多太多的好创意止步于 Figma 工具中,甚至只是在我们的脑海中不停闪烁。无论你是设计师、项目经理,还是产品经理往往需要依赖开发工程师来实现真实的应用程序。在日常产品研发过程中,我们都知道开发周期是非常有限的,功能的优先级也会随市场变化而不断变化。由于研发阶段出现种种阻碍,导致早期创意很少有机会得到测试、验证或展示给我们的客户。不要误解,在这里我并不是要与研发团队挑起战火。只是,我作为一名产品负责人,阐述一个真实的痛苦。
这也是一个挑战。
然而,我看到了一个时代的变革,随着 Lovable、Cursor 和 V0 等 AI 驱动的工具的横空出世,为数字产品设计和研发开辟了一条新的道路。换言之,即使不依赖开发工程师,我也能将一个创意直接转化为产品原型,甚至能可以快速实现上线。
Figma Make 开辟了一条新的路径,然而这只是开始
Figma 最近推出了一个名为 Figma Make 的新功能。可以将设计转换为带有实际代码的可交互原型(太牛了)。对与绝大数的设计师而言,这是一次革命性的改变。这个新功能大大节省了产品设计和研发时间,特别是在早期的原型设计阶段(设计师终于可以不用 996 了,别做梦了!)。话虽如此,我们不得不承认这是一个巨大进步,况且,变革并不止于此。
无需编程知识也能开始编码
进入 AI 时代,我将见证一个更大的变革。创意可以在没有开发工程师参与的情况下转变为实际应用产品。我唯一需要的,就是理解能让这一切运转起来的基本要素。这一点与学习编程知识相比,就要容易多的多了。、
我不需要一行一行地写代码,而是通过提示(也称为意图编程)来描述我想要什么。AI 工具就会理解我的意图,并生成代码。我来引导,它来构建。终于有一天,不在需要被不会编程所束缚,自由自在的创作的一天,即将到来!
设计师的新语言
我斗胆做一个比喻。过去,设计师主要做的是白粥,最多散一些葱花。快速、基础、不太复杂。现在,我们却想要炒一份黄金炒饭。这是一道需要更多食材的菜品,包括绞肉、胡萝卜碎、香肠丁、鸡蛋、鸡毛菜、芝麻、生抽、老抽、米饭,以及恰当的烹饪时长。
作为一名资深产品设计师,我们知道自己想做什么,也知道成品应该是什么样子的。但是,我们从来没有亲自尝试过制作,也不确切知道该如何操作。
这就是 AI 发挥作用的地方。把设计师想象成主厨,而 AI 则是副厨(其实,炒菜机器人早就问世)。我只需要设定目标愿景,AI 工具就能帮助我将其实现。
在构建一款应用产品时,我需要理解各种”食材”。我只需要描述应用产品的目的、关键功能、预期行为、用户如何与之交互,以及它解决什么问题。我根本不需要自己亲自写代码,但是,我需要理解每个部分的作用以及它们如何相互连接,这样我就能获得 AI 支持。
每当我出现疑惑,我就会立刻询问 DeepSeek。
只要我写”菜谱”的能力越好,最终的成果就会越好。工具、框架和组件的生态系统正在成为设计师的新语言,让他们不只是画草图,而是真正地构建产品。
成为改变世界的新时代设计师,并非是一句空话。
从创意到可用原型只需 5 个步骤
具备预设问题的聊天机器人
仪表盘
我有一个想法,要做一个带预设问题的聊天机器人和一个仪表盘,两者连接到同一个数据库。
以下是我的实现过程:
1. 在 Figma 中绘制布局草图
我设计了一个基础布局:一个聊天机器人界面和一个带有几个饼图的仪表盘。
2. 上传草图并向 DeepSeek 提示
我上传了 Figma 草图,并向 DeepSeek 添加了项目描述。然后我请求生成三个文件: planning.md (项目是关于什么的) task.md (需要做什么) rules.md (应该如何做)
3. 在 Cursor 中设置项目
在 Cursor 中启动新项目,添加文件,并粘贴 DeepSeek 输出的内容。
Cursor :https://www.cursor.com/cn
4. 激活 MCP 以使用实时工具
通过启用 MCP,我能够:直接写入数据库(Supabase)让 Cursor 读取更新的文档,比如来自 Next.js 和 OpenAI 的文档直接在浏览器中运行和测试代码 MCP :https://modelcontextprotocol.io/introduction
5. 让 Cursor 逐步构建和改进
Cursor 开始构建项目。第一次尝试并不完美,但经过多次迭代后,我得到了一个可用的聊天机器人、仪表盘和简单的导航系统(基于Next.js、Shadcn UI、Supabase、OpenAI 和其他一些工具)。
最终,我得到了一个可以测试、与团队分享,甚至可以向客户展示的原型。
整个构建过程只花了我五个小时。但这代码质量好吗? 老实说,我不知道这些代码质量好不好。不过这没关系。这不是一个准备部署的生产应用。这只是一种探索想法、测试概念和尝试用户流程的方式。
这种从设计到 AI 再到代码的转变并不是要取代开发工程师。
这将开辟一种新的思考、创造和实验方式,让为更多人提供构建真实产品的工具,即使他们以前从未写过一行代码。…
你还在原地等待吗?
这不仅仅是为高级用户或开发工程师准备的。只要想要构建产品和测试的设计师和产品经理都可以轻松做到。
借助当今的工具,想法与可用原型之间的差距正在缩小。如果你能清晰地描述你的想法,你就可以开始构建了。…
想亲自尝试一下吗?从这里开始
一开始,就不要做复杂的东西。从简单的开始,比如:一张落地页。不需要后端,不需要数据,只需要结构、内容和布局。
以下是可以探索的基本构建模块:
AI 编程环境:Cursor、Windsurf、Claude
设计转代码工具:V0、Lovable、Firebase
数据库和后端服务:Supabase、Azure SQL、Pinecone
UI 框架:Tailwind、Shadcn UI、Radix、Material UI
AI 集成工具:MCP
语言模型(LLMs):OpenAI、Anthropic
你不需要学习所有这些。但你需要知道什么是可能的。
最后,我希望这篇文章能够为你提供一些小小的启发。
本文由人人都是产品经理作者【TCC翻译情报局】,微信公众号:【TCC翻译情报局】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
- 目前还没评论,等你发挥!