与AI共创:从创意设计到应用执行

0 评论 327 浏览 3 收藏 10 分钟
对未来感到迷茫?起点课堂的导师将为你提供专业的职业发展规划指导,帮你明确方向、设定目标,让你在产品经理的道路上,每一步都走得清晰而坚定。

这篇文章讲述了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 协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
16915人已学习16篇文章
私域模式已完成从探索到落地的转换,许多企业也纷纷落局。而基于私域衍生出的SCRM工具,也成为私域运营必不可少的利器之一。本专题的文章分享了SCRM工具的搭建以及相关业务运用场景。
专题
12754人已学习11篇文章
怎么做投放是很多运营人和品牌方的一大难题,做好投放不可缺少以下几大步骤。本专题的文章以小红书投放为例,分享了一些策略,一起来看下吧。
专题
13785人已学习12篇文章
追热点蹭热点是互联网相关从业人员的一种潜意识,尤其是运营岗、市场岗。本专题的文章分享了如何做节日营销。
专题
14222人已学习14篇文章
在生活中,我们总是能被各种各样的事情挑起不同的情绪,如果将情绪映射到设计/运营中呢?本专题的文章分享了如何将“情绪”映射到设计/运营中。
专题
86082人已学习22篇文章
不能用C端产品思维套在B端产品上哦。
专题
14228人已学习13篇文章
产品体验报告,是体验者在深入了解某个产品的商业模式、使用场景、产品功能等方面后,所作出的先有深度再到广度的图文分析报告。本专题的文章分享了不同产品的体验报告。