试试用 AI 搞原型设计找灵感吧

https://mp.weixin.qq.com/s/86VqSoK1ms3NYSiPbVEbuA

今天继续这个：

Claude 3.7来了，感受下它强得可怕的代码能力

按照惯例，制造焦虑的结论应该是这样的：

「AI 并不会取代真正优秀的产品经理，而是淘汰那些只会“画原型、写 PRD、对接需求”的低水平 PM。」

哈，我发现这句话的格式是万能的，换成开发，设计，任何岗位好像都对。

这种方式特别适合通过一个点子搞头脑风暴，直接出高保真原型，不满意就换一个。

当然你说现在完全替代设计师，倒也未必，因为很多细节肯定还是没有设计师给力的，而且生成本身就有点玄学。所以我更建议当头脑风暴，搞高保真原型。

想尝试又不知所措的，可以直接复制我的提示词扔给 AI编辑器，让它给你正反馈，从此踏上 AI 编程的路。

零基础小白学AI编程第一课不是写代码，是学会提需求

AI 编辑器，免费的可以用：Trae，里面也有Claude 3.7，只是可能需要等。

也可以参考我这里提到的：

不差钱可以上cursor或windsurf。

我用的是 windsurf，这里我们只演示一个从需求到设计-到前端，不涉及其他后端数据交互的，一般它都是自动 pc 端和移动端都自适应的。

1，我给了一张我的原型截图，大概长这样的：

然后提示词：

你是一位资深全栈工程师，请参考优秀的设计，基于合理的用户体验和交互逻辑，根据我提供的原型图构思并撰写完整的产品需求文档（PRD）。你的目标是模拟产品经理提出需求，包括但不限于：
产品背景与目标（为什么需要这个产品/功能）核心功能（具体的功能模块及其交互逻辑）用户角色与使用场景（不同用户如何使用该产品）信息架构（页面结构、导航逻辑）UI/UX 设计思路（界面布局、视觉层次、可用性优化）

一桶思考分析之后，你要是觉得它说的在理，你就：

开始设计前端页面吧，其他先不需要,可以用 HTML5

然后它一通输出，效果就能达到这样：

在线体验效果：

二维码：

地址：

https://zlbigger.com/ai/excel-formula-expert/#

2，我拿了群里一大哥画的星座的卡片，扔给了 AI，让它帮我重新设计：

提示词：

你是一个懂设计的资深开发工程师，根据图上的内容，帮我设计一个解读星座的卡片，我希望与众不同，可以加一些 svg 动画效果。

输出效果（带动画效果的）：

在线体验地址：

https://zlbigger.com/ai/zodiac-cards/cancer-card.html

3，可滑动的图片卡片

提示词：

请设计一个图片滚动效果，可以上下滑动，这个交互动画的关键点包括：拖动交互：只有顶部的卡片能被拖动，当拖动超过一定距离时，卡片消失并补充新的卡片。视觉细节：卡片颜色要与图片颜色协调，同时增加大面积的弥散阴影，使其更具层次感。动态补充：拖动顶部卡片时，新的卡片从底部加入，维持固定数量。图片来源：我提供如下图片地址：https://img-musesai.163264.com/pic/202503/UVDAnI1iZCeZ.jpg，https://img-musesai.163264.com/pic/202503/uD8z1sWf1htB.jpg，https://img-musesai.163264.com/pic/202503/QBrhjIlwJd2g.jpg，https://img-musesai.163264.com/pic/202503/18iNVUk9Z6pn.jpg，https://img-musesai.163264.com/pic/202503/YHvHHuzBeCEc.jpg，并根据图片的主要颜色调整卡片背景和阴影颜色。

输出：

在线体验地址：

https://zlbigger.com/ai/swipe-cards/

二维码：

4，城市足迹

提示词：

你是顶级的设计师，同时擅长前端开发，你现在做一个需求，叫地图上的足迹，把我去过的地方在地图上标注出来，以当地比较有特色的建筑或者实物图标标记，同时把所有我去过的地方都练起来，有一个交互动作，要高级感，你先整理下这个需求，如果 ok，你再开始设计和写代码，并告诉我需要给你提供什么素材帮你更好的达到要求

开始给的一个是 3d 效果的地图，但是那个要申请 API还要绑定信用卡，我嫌麻烦，然它给我改了个免费的地图，效果就不是那么好了。

在线地址：

https://zlbigger.com/ai/travel-footprints/index-leaflet.html

5，漂流瓶

提示词：

设计一个创新的HTML5漂流瓶产品展示，专注于优秀的用户体验与独特的差异化。产品展示需包含以下功能的展示：注册、登录、扔瓶子、捡瓶子、瓶子互动（如点赞、评论、私信）、个性化瓶子设计（如不同瓶身、漂流路径可视化）、用户社交元素（如好友系统或主题瓶群）、隐私保护机制等。展示内容应具备直观且美观的UI/UX设计，移动端即可。

注意，这种工作量很大的，很容易卡，可以增加一个要求，让它一个页面一个页面的输出，完成一个问你要不要继续。比如我这次就没有一次性完成，只有部分页面，所以我还没办法放在线上展示了。（回头我再单独录个视频）

界面大概这样的：