教你用WorkBuddy做《蜘蛛侠：崭新之日》里的追踪器网站

期待已久的《蜘蛛侠：崭新之日》闪亮登场，

不知道各位有无看，反正我麻溜的直接下单了三张电影票联排看了。

笔记从小就是失败的man死忠粉，特别是蜘蛛侠走向科技端的剧情线路，用着3D打印和AI配合着去制造一些零部件，简直帅呆了。

看到电影里的荷兰弟风采依旧，而且失败的man是个大IP，我觉得后面肯定还会有续集。

巴拉巴拉讲了这么多，这篇其实我不是重点说电影剧情的，

我发现电影里有一个蜘蛛侠追踪器spideytracke，这个追踪器是一个网站，蜘蛛侠好友内德开发的。

放到现实来看，其实是用于宣传蜘蛛侠新电影的宣发网站。

整场电影看下来，离场的时候我意犹未尽，

想了一下，这个网站我也想Vibe一个类似的玩玩，由于版权问题包不会做成一模一样的，但是一模两样还是可以的。

接下来开始发车模式~

01 解析网站结构

今天用到的根据依旧是Workbuddy桌面端哈，

把网站的Spidey Tracker丢进终端里，并且告诉他，我需要你理解并且给出做出这个网站的提示词工程。

丢出去，他会给咱反馈一个最初级的提示词工程，

02 优化交互效果

在提示词把提示词丢给他之前，还需要前置一个条件，就是基础的交互设计逻辑。

咱需要给它一套下面这个提示词：

第一步：请先不要写代码。请分析一个“互动目击追踪器”网站应包含的信息架构、首屏布局、主要交互、视觉系统、组件清单和响应式策略。目标是做成沉浸式电影宣发体验，但必须使用原创 IP。这个是参考网页设计界面https://spideytracker.com/

它会给咱反馈出我们这个网站设计的逻辑，

还有，网站里面包含的导航功能细分也会提前规划出来先，以便我们后边构建网站的时候它可以联立参考。

等他加载完这些基础的设计逻辑之后，就可以把咱开头AI给咱的提示词丢进去，让它开始构建网站了。

然后AI会给出来第一版网站，效果肯定不尽人意，所以接下来才是大工程，去优化哪些不合理的地方。

比如UI交互设计的逻辑不对，里面的应用原本是可以滚动放大的，结构变成静态效果等等......

就这样一点点去根据页面前端的效果去修改，直至修改到你满意为止。

讲到这儿，有点感慨。

虽然现在AI把技术门槛降低下来了，但是还存在一个产品设计思维，和产品交互逻辑的差距，

很多人确实是知道怎么做出网站和产品，但是产品的UI设计小心思，还有页面的交互逻辑表现都非常的小白。

所以在技术不断降低门槛的前提下，想法和执行力固然很重要，其实还有一个很隐性的能力，就是产品能力，

这一块没别的办法，只有不断的去学习去复刻去积累哪些优秀的产品，才可能会有提升。

扯远了，下面是咱具体做出的网站效果。

使用效果如下，

做出来咱就顺手把它打包了，把这个网站封装成skill只需要往期的那一串封装咒语。分享一个封装skill的方法，你和AI磨合好的流程可以一直用

等Workbuddy自动跑完，你桌面就会多出一个压缩包，压缩包就是skill啦，后面要跑到别人电脑里面复刻这个效果，把这个skill直接拖动到ta电脑里的agent里读取就完事了，

电影宣发网站：https://spideytracker.com/开源地址：https://github.com/rianhua9-web/-1.0

我把skill丢到git了，大家有需要自取哈。

03 最后

虽然你能做出网站，或者小程序，又或者别的一些什么，

但咱离上线和发售还是差一些距离。

比如网站设计出来了，如果是有用户端的，如何设计好后端，如何做好用户在注册你产品的时候有邮箱回送的动作等等，

还有很多细节可以去打磨产品的，

所以设计完一个产品，这只是咱的开始，

虽然这些问题客观存在，但是咱同样可以继续问AI，我连软件路径找不到都问WorkBuddy

让它告诉你后续怎么实现上线或者发售等等这些操作细节，主打一个把魔法用到底哈哈。

今天的分享就到这儿，赶快搓起来吧。

辛苦大家看到最后，欢迎大家推荐、点赞、关注、点⭐推荐给更多人，在此感谢每一位读者！！！